使用video.js踩坑。单页切换后无法播放
问题:动态创建多个video实例后,切换其他页面后在切换回来,无法播放,控制台报警告id被占用!
思路:在生命周期beforeDestroy函数中销毁创建的video实例。
代码:
beforeDestroy(){ //(第三步)在销毁之前拿到video实例
for(let i=0;i<this.playlist.length;i++){
this.playlist[i].dispose(); //(第四步)dispose()是官方的销毁函数
}
},
mounted() {
setTimeout(_ => {
let lang=this.videolist.pageData.length //(第一步)这是多个视频地址数组的长度
for(let i=0;i<lang;i++){
var player= videojs("my-video"+i, { //播放的事件
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true,
hls: {
withCredentials: true
}
}, function () {
// this.play() //取消自动播放
})
this.playlist.push(player) //(第二步)palylist是定义的空数组,存放多个视频实例
}
}, 1000);
},
接上上篇博客《在vue项目中播放m3u8格式的视频》
博客地址:https://www.cnblogs.com/cb1490838281/p/12331262.html

浙公网安备 33010602011771号