vue使用video播放m3u8视频首次进入不播放，刷新页面才播放_vue3中使用video-js必须刷新一下才显示

1.安装依赖

npm i video.js
npm i videojs-contrib-hls
npm i mux.js

 2.html片段

 <video :id="`my-video${index}`" class="video-js vjs-default-skin videos" muted>
     <source :src="item.no_encryption_height" type="application/x-mpegURL" />
 </video>

3.js片段 

import videojs from "video.js";
import "videojs-contrib-hls";
 
export default {
  data() {
    return {
      player:[],
      videoList:[],
    }
  },
  methods:{
      initData(){
        this.$axios.post("/api/initData",{})
        .then((res)=>{
        if(res.data.code ===200){
          this.$nextTick(()=>{
            this.videoList.forEach((item, index) => this.getVideo(index));
          })
       
        }
      })
      },
      getVideo(i) {
      let res = videojs(
        `my-video${i}`,
        {
          bigPlayButton: true,
          textTrackDisplay: false,
          posterImage: false,
          errorDisplay: false,
          controls: true,
          hls: {
            withCredentials: true,
          },
        },
        function () {
          this.play();
        }
      );
      this.player.push(res);
    },
  },
    //它用于在用户离开当前路由之前执行一些代码
  beforeRouteLeave(to, from, next) {
    this.player.forEach((item) => item.dispose());
    this.player = [];
    this.videoList = [];
    next();
  },
}

如果在离开当前页面之前不清空播放列表，会导致第二次进入时不再重新播放视频，并且消耗性能。