flvvideo.vue 3.75 KB
<template>
  <div class="ocxbox">
    <video id="flvvideo"  autoplay  style="width: 100%; height: 100%" class="fvideo"></video>
    <div class="control" hidden>
    
      <!-- <span :class="{'el-icon-full-screen':!furllstatus,'el-icon-circle-close':furllstatus,'videostatus':true, 'full-icon':true}" @click="fullvideo" id="full"></span> -->
    </div>
  </div>
</template>
<script>


export default {
  data() {
    return {
      show: true,
      videostatus: false,
      furllstatus: false,
      cururl:"",
      player: "",
    };
  },
  computed: {},
  methods: {
    initflv() {
      if (flvjs.isSupported()) {
        this.player = flv.createPlayer({
          type: "flv",
        });
      }
    },
    startFunc(url) {
      let playerel = document.getElementById("flvvideo");
      // if (typeof player !== "undefined") {
      //   if (this.player != null) {
      //     // this.player.unload();
      //     // this.player.detachMediaElement();
      //     // this.player.destroy();
      //     // this.player = null;
      //     this.flv_destroy();
      //   }
      // }
      if(this.player) {
         this.destoryVideo(this.player);
      }
      this.cururl = url;
      this.player = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        hasAudio: false,
        url: url,
      },{
         enableWorker: false, //不启用分离线程
        enableStashBuffer: false, //关闭IO隐藏缓冲区
        reuseRedirectedURL: true, //重用301/302重定向url,用于随后的请求,如查找、重新连接等。
        autoCleanupSourceBuffer: true //自动清除缓存
      });
      this.player.attachMediaElement(playerel);
      this.player.load();
      setTimeout(() => {
        this.player.play();
      }, 500);

       this.player.on(flvjs.Events.ERROR, (errType, errDetail) => {
        // alert("网络波动,正在尝试连接中...");
        if (this.player) {
          this.reloadVideo(this.player);
        }
        // errType是 NetworkError时,对应errDetail有:Exception、HttpStatusCodeInvalid、ConnectingTimeout、EarlyEof、UnrecoverableEarlyEof
        // errType是 MediaError时,对应errDetail是MediaMSEError   或MEDIA_SOURCE_ENDED
      });
      this.player.on("statistics_info",  (res)=> {
       if (this.lastDecodedFrame == 0) {
         this.lastDecodedFrame = res.decodedFrames;
         return;
       }
       if (this.lastDecodedFrame != res.decodedFrames) {
         this.lastDecodedFrame = res.decodedFrames;
       } else {
           this.lastDecodedFrame = 0;
           if (this.player) {
             this.reloadVideo(this.player)
         }
       }
     });
//2000毫秒执行一次  

    },
    flv_start() {
      this.player.play();
    },
    reloadVideo(flvPlayer) {
      this.destoryVideo(flvPlayer);
      this.startFunc(this.cururl);
    },
     destoryVideo(flvPlayer) {
       
      flvPlayer.pause();
      flvPlayer.unload();
      flvPlayer.detachMediaElement();
      flvPlayer.destroy();
      flvPlayer = null;
      this.player = null;
    },
    flv_pause() {
      this.player.pause();
    },
  },
  mounted() {},
  destroyed(){
    if(this.player) {
      this.destoryVideo(this.player)
    }
  }
};
</script>
<style lang="stylus">
.ocxbox {
  height: 100%;
  position: relative;

  .fvideo {
    height: 100%;
    width: 100%;
  }

  .control {
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    display: none;

    .videostatus {
      cursor: pointer;
      color: #fff;
      font-size: 30px;
      line-height: 40px;
      padding-left: 10px;
    }

    .full-icon {
      float: right;
      margin-right: 20px;
      font-size: 25px;
    }
  }
}

.ocxbox:hover {
  .control {
    // display block
    cursor: pointer;
  }
}
</style>