子组件
<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(){
var videoElement = document.getElementById('videoElement'+this.lflr)
if (flvjs.isSupported()) {
const flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: this.src,
},{
enableStashBuffer: false,
fixAudioTimestampGap:false,
isLive: true
})
flvPlayer.attachMediaElement(videoElement)
this.flvPlayer = flvPlayer
flvPlayer.load()
flvPlayer.play()
this.videoshow = true
}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'
<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()
},