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();
},
}
如果在离开当前页面之前不清空播放列表,会导致第二次进入时不再重新播放视频,并且消耗性能。