使用video.js踩坑。单页切换后无法播放

Posted 2020-11-26 风zz

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