vue通过video.js解决m3u8视频播放格式的方法

cnpm install video.js --save
ccnp install videojs-contrib-hls --save

<video
id="myVideo"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
style='width: 100%;height: auto'
:poster="poster"
>
</video>

computed: {
  poster: function() {
   return this.posterSrc
    "./../assets/images/coveImg.png");
  }
 },

<script src="/UploadFiles/2021-04-02/video.min.js">

这样就可以了

2.3video.js配置项


getVideo() {
   this.myVideo = videojs("myVideo", {
    bigPlayButton: true,
    textTrackDisplay: false,
    posterImage: false,
    errorDisplay: false,
    hls: {
     withCredentials: true
    }
   });
  }


最重要的一点，标红的，一定一定要使用，下载了安装包，一定要在这个使用，才能失效。不然播放不了m3u8视频格式


mounted() {
this.$nextTick(() => {
this.getVideo();
});
this.getViewList();
},


定义的两个方法，放在mounted
第二种方法


上面是实现播放m3u8,接下来说第二种实现方法


<script src="/UploadFiles/2021-04-02/hls.js@latest">

地址请看 https://www.npmjs.com/package/hls.js/v/canary


引入上面那个文件

只需要写这么多，然后再mounted生命周期调用，但是这个没有video.js样式好看，都可以解决播放不了m3u8视频的格式问题。
以上都是来解决m3u8视频播放不了的问题，
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。