vue弹窗播放直播流flv格式

子组件

<template>
   <figure ref="videoContainer" data-fullscreen="false">
     <video ref="video" :id="'videoElement'+lflr" autoplay controls muted height="450"></video>
   </figure>
</template>
import flvjs from 'flv.js'
export default {
    props: {
        getsrc:'',
        lflr: {
            type: Number,
            default: 0
        },
    },
    data(){
        return{
            src:'',
            flvPlayer:'',
            videoshow:false,
            getvidId:null
        }
    },
    watch:{
       
    },
    methods:{
        openflv(){
           //this.$nextTick(() => {
               var videoElement = document.getElementById('videoElement'+this.lflr)
                if (flvjs.isSupported()) {
                    const flvPlayer = flvjs.createPlayer({
                        type: 'flv', //媒体类型 flv 或 mp4
                        isLive: true, //是否为直播流
                        url: this.src, //视频流地址
                    },{
                        enableStashBuffer: false, 
                        fixAudioTimestampGap:false,
                        isLive: true
                    })
                    flvPlayer.attachMediaElement(videoElement)
                    this.flvPlayer = flvPlayer
                    flvPlayer.load()
                    flvPlayer.play()
                    this.videoshow = true
                    // setInterval(() => {
                    //     if (!this.flvPlayer.buffered.length) {return;}
                    //     let end = this.flvPlayer.buffered.end(0);
                    //     let diff = end - this.flvPlayer.currentTime;
                    //     if (diff >= 1.5) { //延时如果大于1.5秒，就让直播跳到当前时间位置播放
                    //         this.flvPlayer.currentTime = end - 0.5;
                    //     }
                    // }, 3 * 60 * 1000);
                }else {
                    return;
                }
                
            //}); 
        
        },
        flvDestroy(){
            this.flvPlayer.pause()
            this.flvPlayer.unload()
            this.flvPlayer.detachMediaElement()
            this.flvPlayer.destroy()
            this.flvPlayer = null
        }
    },
    created(){
       
    },
    mounted(){
       this.src = this.getsrc
       this.openflv() 
    },
    //销毁事件
    beforeDestroy() {
        
        
      
    },
    destroyed(){
      
    }
}
复制代码

父组件引入子组件

 import flvVideo from 'components/common/FlvVideo'
 //使用elementui的弹窗组件
 <el-dialog title="视频左" :append-to-body='true' :modal-append-to-body='false' :close-on-click-modal='false' @close='cloself' :visible.sync="videodialoglf">
        <flvVideo :getsrc='lefvideo' ref='videolf' :lflr='0' :key="lftimer"></flvVideo>
      </el-dialog> 
      <el-dialog title="视频右" :append-to-body='true' :modal-append-to-body='false' @close='closelr' :close-on-click-modal='false' :visible.sync="videodialoglr">
        <flvVideo :getsrc='rightvideo' ref='videolr' :lflr='1' :key="lrtimer"></flvVideo>
      </el-dialog>  
复制代码

关闭弹窗时停止播放直播视频

cloself(){
       this.stopVideo(1)
       this.$refs.videolf.flvDestroy()
    },
复制代码