前言：最近公司在做一个线上会议的项目，要求后台网站播放m3u8格式的视频，查找部分资料，总结一下，方便后边查阅
1.在vue工程中安装以下依赖：
cnpm install video.js --save cnpm install videojs-contrib-hls --save//我使用的是淘宝镜像源，下载会快一点，没有用npm
2.在需要播放的页面引入
import videojs from 'video.js'
import 'videojs-contrib-hls'
3.准备一个容器，我这里是视频列表
<div v-for="(item,index) in this.videolist.pageData" :key="index">
<div class="videoitem"> //因为id唯一，在遍历的时候给id加上下标，便于区分； poster是封面图 <video :id="'my-video'+index" class="video-js vjs-default-skin imgs"
controls preload="auto" poster="../../images/huiyi.jpg">
<source :src="item.url" type="application/x-mpegURL">
</video> <div class="video_text">
<h1 class="video_h1">标题 ： <span>{{item.title}}</span></h1>
<p class="video_p">创建时间:<span>{{item.createDate}}</span></p>
</div>
</div>
</div>
3.在mounted中获取到初始化的视频地址列表（在这里我做了一个粗暴的操作）
mounted() {
setTimeout(_ => {
let lang=this.videolist.pageData.length //视频长度
for(let i=0;i<lang;i++){
//id+i是为了id的唯一性
videojs("my-video"+i, { //播放的事件
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true,
hls: {
withCredentials: true
}
}, function () {
// this.play() //取消自动播放
})
}
}, 1000);
},