Child components

<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 ', // media type FLV isLive: If true, / / for live streaming url: this. SRC, / / video address}, {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) {/ / delay if greater than 1.5 seconds, let live to the current time position / / 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(){}}Copy the code

The parent component introduces the child component

Import flvVideo from 'components/common/flvVideo < / / using elementui pop-up components el - dialog title = "video" on the left: append - to - body =' true ' :modal-append-to-body='false' :close-on-click-modal='false' @close='cloself' :visible.sync="videodialoglf"> <flvVideo :getsrc=' videolf' : LFLR ='0' :key= 'lftimer' ></flvVideo> </el-dialog> <el-dialog title=" video right" :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>Copy the code

Stop playing live video when closing the popover

cloself(){
       this.stopVideo(1)
       this.$refs.videolf.flvDestroy()
    },
Copy the code