一个页面一个video,点击切换显示不同的画面
代码语言：javascript复制<div v-html="videoHtml">
</div> initVideo(){
this.videoHtml = '<video ref="videotest" id="video" width="865" height="460" preload="auto" class="video-js" controls></video>'
this.$nextTick(()=>{
let option = {
bigPlayButton:true,
textTrackDisplay:false,
posterImage:true,
errorDisplay:false,
controlBar:true,
autoplay:true,
// loop:true,//循环：boolean
muted:true,
sources:[{
// src:"http://192.168.30.65:7086/live/cameraid/1000004$0/substream/2.m3u8",
src:this.videoUrl,
type:"application/x-mpegURL"
}]
}
this.player = videojs("video",option)
})
}, changeVideo(obj,index) {
console.log(obj, "obj");
let url = obj[1].value;
this.curCameriaId = index
if(this.player){
this.player.dispose()
this.videoHtml = ""
}
this.videoUrl = url;
this.$nextTick(()=>{ // 要写this.$nextTick 否则会报错
this.initVideo()
})
},一个页面同时显示多个video
代码语言：javascript复制<!-- 多个摄像头情况 -->
<div v-for="(item,index) in videoUrlList" :id="'videoWrap' index" :key="index" style="width:640px;height:460px;margin-bottom:10px;">
</div> initVideoTest(){
setTimeout(() => {
this.videoUrlList.map((item,index)=>{
let videoHtml = `<video ref="videotest" id="video${index}" width="640" height="460" preload="auto" class="video-js" controls></video>`
document.getElementById("videoWrap" index).innerHTML = videoHtml
this.$nextTick(()=>{
let option = {
bigPlayButton:true,
textTrackDisplay:false,
posterImage:true,
errorDisplay:false,
controlBar:true,
autoplay:true,
// loop:true,//循环：boolean
muted:true,
sources:[{
// src:"http://192.168.30.665:7086/live/cameraid/1000001$0/substream/2.m3u8",
src:item,
type:"application/x-mpegURL"
}]
}
this['player' index] = videojs("video" index,option)
})
})
}, 500);
},注意退出的时候要销毁
代码语言：javascript复制 closeCamearDialog() {
if(this.player){
this.player.dispose()
this.videoHtml = ""
}
// 多个摄像头的情况
// this.videoUrlList.forEach((item,index)=>{
// this['player' index].dispose()
// })
this.cameraData = this.$options.data().cameraData;
},
