vue 视频监控插件，video无法正常播放解决方案

<video :id="'roomVideo'"  class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto" muted poster="@/assets/zhts/login_bg.jpg">
       <source :src="videobox"  type="application/x-mpegURL">
</video>

 myPlayer: null,
 isVideoBreak: '', // 定时器
 plantVideoUrl: null,

   initvideo() { //  先赋值再操作视频插件，否则视频无法正常播放
      getVIDEO().then(res => { 
        this.videobox = res.data.data[0].content
        this.$nextTick(() => {
          this.initvideo1()
        })
      })
    },
    initvideo1() {
      var name = 'roomVideo'
      var _this = this
      _this.myPlayer = videojs(name,{
        bigPlayButton : false,
        textTrackDisplay : false,
        posterImage: true,
        errorDisplay : false,
        controlBar : false
      },function(){
        this.play()
        this.on('loadedmetadata',function(){
          //加载到元数据后开始播放视频
          // _this.startVideo(name)  !==========================重要
        })
        this.on('ended',function(){
          // console.log('ended')
        })
        this.on('firstplay',function(){
          // console.log('firstplay')
        })
        this.on('loadstart',function(){
        //开始加载
          // console.log('loadstart')
        })
        this.on('loadeddata',function(){
          // console.log('loadeddata')
        })
        this.on('seeking',function(){
          //正在去拿视频流的路上
            // console.log('seeking')
        })
        this.on('seeked',function(){
          //已经拿到视频流,可以播放
          // console.log('seeked')
        })	
        this.on('waiting',function(){
          // console.log('waiting')
        })
        this.on('pause',function(){
          // console.log('pause')
        })
        this.on('play',function(){
          // console.log('play')
        })
      })
      _this.startVideo(name)
    },
    // 开始播放视频监控并重置样式
    startVideo(name) {
      var messageNum = 0
      var _this = this			
      _this.myPlayer.play();
      //微信内全屏支持
      document.getElementById(name).style.width = '100%';
      document.getElementById(name).style.height = '100%';
      //判断视频是否卡住，卡主1s重新load视频
      var lastTime = -1,
      tryTimes = 0;
      clearInterval(_this.isVideoBreak) // 清除定时器
      _this.isVideoBreak = setInterval(function(){
        var currentTime = _this.myPlayer.currentTime();
        if(currentTime == lastTime){
          messageNum++
          //此时视频已卡主3s
          //设置当前播放时间为超时时间，此时videojs会在play()后把currentTime设置为0
          // _this.myPlayer.currentTime(currentTime+10000);
          _this.myPlayer.play();
          //尝试5次播放后，如仍未播放成功提示刷新
          // if(++tryTimes > 5){
          // _this.$Message.warning('您的网速有点慢，刷新下页面试试')
          if(messageNum < 4) {
            _this.$Message.warning({
              content: '您的网速有点慢，刷新一下页面试试',
              duration: 10,
              closable: true
            })
          }
        }else{
          lastTime = currentTime;
          tryTimes = 0;
        }
      },3000)
    },

 

main.js

import Video from 'video.js'// m3u8视频监控 播放

import 'video.js/dist/video-js.css'

Vue.prototype.$video = Video // 挂载video.js插件