flvVIdeo使用

<!-- <template>
    <div>
        <div v-if="flvSrc===null || flvSrc === ''">
            <span style="color: #3790dd;">尚无监控</span>
        </div>
        <video v-else ref="ve" 
        :id='"video"+wwId'
        muted
        autoplay
        width="100%"
        class="tudou"
        @click='clickDialog()'></video>
    </div>
    
</template>
<script>
import flvjs from 'flv.js'
export default{
    name:'flvVideo',
    props:{
        flvSrc:{type:String},
        wwId:{type:String},
        deviceId:{type:String}
    },
    data(){
        return{
            flvPlayer:null
        }
    },
    watch: {
      flvSrc:{
        handler:function(newVal,oldVal) {
            this.destroyFlv();
            if(newVal){
                this.init()
            }   
        },
        deep: true,
        immediate: true
      }
    },
    mounted(){
    },
    beforeDestroy() {
        console.log('kdkjdshfkjsd')
        this.destroyFlv();
    },
    beforeMounted(){
        this.destroyFlv();
    },
    methods:{
        init(){
            // if(!flvjs.isSupported()) return;
             if (flvjs.isSupported()) {
                if(this.flvSrc === '' || this.flvSrc === null) return;
                let that = this
                this.$nextTick(() => {
                // setTimeout(function(){
                    let videoContainer = document.getElementById('video'+that.wwId)
                    that.flvPlayer = flvjs.createPlayer(
                        {
                            type: 'flv',
                            url: that.flvSrc,
                            isLive: true, // 是否是直播流
                            hasAudio: false, // 是否有音频
                            // hanVideo: true, // 是否有视频
                        },
                        {
                            autoCleanupSourceBuffer: true,
                            // autoCleanupMaxBackwardDuration: 12, //    当向后缓冲区持续时间超过此值（以秒为单位）时，请对SourceBuffer进行自动清理
                            // autoCleanupMinBackwardDuration: 60, //指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）。
                            // enableStashBuffer: false, //关闭IO隐藏缓冲区
                            // stashInitialSize: 128
                        }
                    );
                    that.flvPlayer.attachMediaElement(videoContainer);
                    try{
                        that.flvPlayer.load();
                        that.flvPlayer.play();
                        that.listenVideo();
                    }catch(error){
                        console.log('监控报错')
                    }
            // },100)
            })
        }
        },
        destroyFlv() {
            if (this.flvPlayer) {
                this.flvPlayer.pause();
                this.flvPlayer.unload();
                this.flvPlayer.detachMediaElement();
                this.flvPlayer.destroy();
                this.flvPlayer = null;
            }
        },
        listenVideo() {
            const that = this;
            this.flvPlayer.on(
                flvjs.Events.ERROR,
                (errorType, errorDetail, errorInfo) => {
                    console.log("监控errorType", errorType);
                    console.log("监控errorDetail", errorDetail);
                    console.log("监控errorInfo", errorInfo);
                    // 视频出错后销毁重建
                    that.destroyFlv();
                    that.init();
                }
            );
            // 视频断流
            this.flvPlayer.on("statistics_info", function (res) {
                if(that.lastDecodedFrames === 0){
                    that.lastDecodedFrames = res.decodedFrames
                    return
                }
                if(that.lastDecodedFrames != res.decodedFrames){
                    that.lastDecodedFrames = res.decodedFrames
                }else{
                    that.lastDecodedFrames = 0
                    that.destroyFlv()
                    that.init()
                }
            });
        },
        clickDialog(){
            this.$emit('handDialog',this.flvSrc,this.deviceId)
        }
    }
}
</script>
<style lang="scss" scoped>
.tudou{
    cursor: pointer;
}
.tudou::before {
    content: '';
    /* 隐藏遮罩层 */
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
.tudou:hover::before {
  /* 而是显示元素 */
  display: block;
  cursor: pointer;
}
</style> -->
<template>
    <div class="">
      <video
        class="video-js vjs-big-play-centered vjs-fluid"
        ref="videoPlayer"
        preload 
        autoplay
        muted="muted"
      ></video>
    </div>
  </template>
  
  <script>
  import Videojs from "video.js"; // 引入Videojs
  export default {
    name: "flvVideo",
    components: {},
    props: {
        m3u8Src:{
            type:String
        }
    },
    data() {
      return {
        myVideo: null,
        player: null,
      };
    },
    watch: {
      m3u8Src:{
        handler:function(newVal,oldVal) {
            this.destrorM3u8();
            if(newVal){
                this.getVideo()
            }   
        },
        deep: true,
        immediate: true
      }
    },
    computed: {
      videojsId: function () {
        return "videoPlayer" + Math.floor(Math.random() * 100 + 8).toString();
      },
    },
    methods: {
      getVideo() {
        let that = this
        let ele = this.$refs.videoPlayer
       
        this.$nextTick(() => {
            // if(!this.videojsId) return
            if(!this.$refs.videoPlayer) return
            let options = {
                autoplay: true, // 设置自动播放
                controls: true, // 显示播放的控件
                muted:true,
                errorDisplay: false,
                sources: [
                {
                    src: this.m3u8Src,
                    type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
                },
                ],
                notSupportedMessage: "视频资源无法加载",
            }; 


            this.myVideo = Videojs(this.$refs.videoPlayer, options, function onPlayerReady() {
                let _this = this
                this.on('play',function(){
                    console.log("ts文件获取失败404.....play");
                })

                let seekingTimes = 0
                this.on("seeking",function(){
                    seekingTimes ++
                    console.log("ts文件获取失败404",seekingTimes);
                    if(seekingTimes == 1) {
                    seekingTimes = 0
                    that.myVideo.src([
                            {
                            src:that.m3u8Src ,
                            // type: "application/x-mpegURL"  //type可以不写，一旦写了一定要符合否则报错
                            }
                     ])
                     this.play()
                }
                })
                //监听video播放器拿到视频流重新播放时出发seeked
                this.on('seeked',function(){
                    seekingTimes = 0
                    // 已经拿到视频流,可以播放
                    console.log('ts文件获取失败404...seeked')
                })
                this.on('error',function(){
                   
                    console.log("ts文件获取失败404.....error");
                    that.myVideo.src([
                            {
                            src:that.m3u8Src ,
                            // type: "application/x-mpegURL"  //type可以不写，一旦写了一定要符合否则报错
                            }
                     ])
                     this.play()
                })
                //每次卡顿都会出发waiting
                this.on('waiting', function () {
                  
                })

            });
        })
      },
      destrorM3u8(){
        if (this.myVideo) {
            this.myVideo.dispose(); // Removing Players,该方法会重置videojs的内部状态并移除dom
        }
      }

    },
    beforeDestroy() {
      if (this.myVideo) {
        this.myVideo.dispose(); // Removing Players,该方法会重置videojs的内部状态并移除dom
      }
    },
  };
  </script>
  
  <style scoped></style>