问题:动态创建多个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