1.下载相关包
npm install video.js --save
npm install videojs-contrib-hls --save
2.main.js 引入
import 'video.js/dist/video-js.css'
3.页面引入
import videojs from "video.js";
import "videojs-contrib-hls";
4.页面同时播放多个视频
<el-col :span="8" v-for="(item,index) in videoList" :key="index">
<div class="videoitem">
<video
:id="'myvideo'+index"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
muted
preload="auto"
width="436"
>
<source :src="item.url" type="application/x-mpegURL" />
</video>
<div class="name">
<div>{{item.name}} </div>
</div>
</div>
</el-col>
5.JS
data() {
return {
videoList:[...], //视频播放地址
player:[{one:''},...] //存储初始化视频,用于退出页面时销毁video.js对象
}
},
mounted() {
this.$nextTick(()=>{
setTimeout(() => {
this.getVideo();
}, 300);
})
},
methods:{
getVideo() {
for (let i = 0; i < this.videoList.length; i++) {
this.player[i].one = videojs("myvideo" + i, {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true
},
);
}
},
},
destroyed () {//页面销毁,同时也销毁video.js对象
for (let i = 0; i < this.videoList.length; i++) {
this.player[i].one.dispose()
}
},