使用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

原文地址:https://www.cnblogs.com/cb1490838281/p/12424892.html