Vue中video.js踩坑日记 单页切换后视频无法播放

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

切换页面以后正常显示效果

但是我切换路由返回上一层或者点击跳转下个页面的返回的时候就不显示了？？

解决思路

在生命周期beforeDestroy函数中销毁创建的video实例。

html代码

<div class="videoListBox">
      <ul class="videoList">
        <li v-for="(item,i) in videoList"
            :key="i"
            style="margin-bottom: 30px">
          <div id="video-title">
            {{item.video_title}}
          </div>
          <video
            :id="'myVideo'+item.id"
            class="video-js vjs-default-skin vjs-big-play-centered" 
            style="width:100%;"
          >
          <!--vjs-big-play-centered 类名调节播放按钮居中显示-->
        <source
            :src="item.video_url"
            type="video/mp4"
        >
        </video>
        </li>
      </ul>
    </div>

js代码如下：

<script>


export default {
  data () {
    return {
      videoList: [],
      page: 1,
      playlist:[]
    }
  },
  mounted(){
    this.videos();
  },
  methods: {
    videos () {
      this.$api.Post('videos', { page: this.page}).then(res => {
        if (res.status == 1) {
          this.videoList = res.result.videos;
          this.initVideo()
        }
      })
    },
    initVideo () {
      this.$nextTick(()=>{
        this.videoList.map((item,i)=>{
          let w = document.getElementById('video-title').offsetWidth;
          let noAutoPlay = false //默认视频列表的第一个自动播放
          if(item.id == this.videoList.length){
            noAutoPlay = 'muted'
          }
          let myPlayer = this.$video('myVideo'+item.id, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            //自动播放属性,muted:静音播放
            autoplay: noAutoPlay,
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: w || '380px',
            //设置视频播放器的显示高度（以像素为单位）
            height: "200px",
          });
          this.playlist.push(myPlayer)
        })
      })
    },
  },
   beforeDestroy(){ //（第三步）在销毁之前拿到video实例
    for(let i=0;i<this.playlist.length;i++){
     this.playlist[i].dispose(); //（第四步）dispose()是官方的销毁函数
    }
  },
}
</script>