videojs实际应用

<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%240/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()
      })
    },

<!-- 多个摄像头情况 -->
<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%240/substream/2.m3u8",
              src:item,
              type:"application/x-mpegURL"
            }]
          }
         this['player'+index] = videojs("video"+index,option)
      
        })        
      })        
      }, 500);
    },

    closeCamearDialog() {
      if(this.player){
        this.player.dispose()
        this.videoHtml = ""
      }
      // 多个摄像头的情况  
      // this.videoUrlList.forEach((item,index)=>{
      //   this['player'+index].dispose()
      // })
      this.cameraData = this.$options.data().cameraData;
    },