Vue-DPlayer自动播放下个视频质量切换地址没有改变问题
Vue
2020-07-08 16:40:47
常见视频网站中视频自动播放下一个视频是一个非常频繁得功能,那么在Vue-DPlayer我们如何实现视频播放完整后,自动播放下一个视频呢?
流程如下:通过监听ended视频播放完成后调用dp.switchVideo来完成视频下一个切换,但官网提供得仅限于切换到下一个视频,但如果你得视频包含有不同质量得要求时(如:高清,标清),视频得质量地址及相关数据没有进行切换。那么这个问题我们要如何处理呢?
解决方法:对dp.switchVideo进行源码修改。
{
key: "switchVideo",
value: function(e, t) {
console.log(this.template)
console.log(this.template.qualityList.children)
this.quality =e.quality;
this.options.video.quality =e.quality;
for(var is = 0 ;is<this.template.qualityList.children.length;is++){
this.template.qualityList.children[is].innerHTML=this.quality[is].name
}
this.pause(), this.video.poster = e.pic ? e.pic : "", this.video.src = this.quality[0].url,this.template.qualityButton.innerHTML = this.quality[0].name, this.initMSE(
this.video, this.quality[0].type || "auto"),
t && (this.template.danmakuLoading.style.display =
"block", this.bar.set("played", 0, "width"), this.bar.set("loaded", 0, "width"), this
.template.ptime.innerHTML = "00:00", this.template.danmaku.innerHTML = "", this.danmaku &&
this.danmaku.reload({
id: t.id,
address: t.api,
token: t.token,
maximum: t.maximum,
addition: t.addition,
user: t.user
}))
}
}
原dp.switchVideo方法参数格式为:
dp.switchVideo(
{
url: 'second.mp4',
pic: 'second.png',
thumbnails: 'second.jpg',
},
{
id: 'test',
api: 'https://api.prprpr.me/dplayer/',
maximum: 3000,
user: 'DIYgod',
}
);
修改后参数格式为:
dp.switchVideo({
quality:[
{
name: 'HD1',
url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
type: 'normal',
},
{
name: 'SD1',
url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
type: 'normal',
},
],
pic: 'second.png', thumbnails: 'second.jpg',
},
{
id: 'test',
api: 'https://api.prprpr.me/dplayer/',
maximum: 3000,
user: 'DIYgod',
}
)
注:这里相当于将url直接使用了初始化里得格式,所以相对来说是很容易理解得,当然最终效果亲测也是有效得!
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
881篇文章
4330人已阅读