如何在vue项目中播放m3u8格式的视频

 <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

视频播放页

<video id="my_video" class="video video-js vjs-default-skin vjs-big-play-centered" preload="auto" controls>
</video>

playVideo(e){//e为视频的m3u8 url
  this.$nextTick(()=>{
    console.log(Hls.isSupported())
    var myPlayer = document.getElementById('my_video')
    if(Hls.isSupported()) {
      var hls = new Hls();
      hls.loadSource(e);
      hls.attachMedia(myPlayer);
      hls.on(Hls.Events.MANIFEST_PARSED,function() {
      myPlayer.play();
      });
    }
    })
},

this.playVideo('')//播放其它视频前执行，清空之前的url
this.playVideo(url)//调用