flvjs播放器事件动态监听并实现flvjs实例销毁（http-flv协议）
watch: {
device(val) {
if (val) {
this.changeLampPost = true // 切换设备时销毁
}
}
},
data() {
return {
leaveRouter: false,
changeLampPost: false,
}
},
methods: {
// 打开视频(方法体)
openVideo() {
let _this = this
this.tableData.forEach((item, index) => { // 遍历接口返回的数据
if (item) {
_this.$nextTick(() => {
setTimeout(()=>{
// 【flvjs播放】
if (_this.$flvjs.isSupported()) { // 引入flvjs时已声明全局变量 $flvjs
let videoElement = document.getElementById('videoElement'+(index+1))
// 创建flvjs实例
let flvPlayer = _this.$flvjs.createPlayer({
type: 'flv',
url: item, // 直播地址(?port=1935&app=live&stream=xxx)
})
flvPlayer.attachMediaElement(videoElement)
flvPlayer.load()
flvPlayer.play()
// 【flvjs播放器事件侦听】
flvPlayer.on(_this.$flvjs.Events.LOADING_COMPLETE, (res) => {
console.log("加载完成")
})
flvPlayer.on(_this.$flvjs.Events.MEDIA_INFO, (res) => {
console.log("媒体信息")
})
flvPlayer.on(_this.$flvjs.Events.METADATA_ARRIVED, (res) => {
console.log("获取元数据")
})
flvPlayer.on(_this.$flvjs.Events.RECOVERED_EARLY_EOF, (res) => {
console.log("恢复早期EOF")
})
flvPlayer.on(_this.$flvjs.Events.SCRIPTDATA_ARRIVED, (res) => {
console.log("获取到脚本数据")
})
flvPlayer.on(_this.$flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
console.log("视频错误信息回调")
console.log("errorType:", errorType);
console.log("errorDetail:", errorDetail);
console.log("errorInfo:", errorInfo);
})
// 【重要事件监听】http请求建立好后，该事件会一直监听flvjs实例
flvPlayer.on(_this.$flvjs.Events.STATISTICS_INFO, (res) => {
console.log("请求数据信息")
if (_this.leaveRouter || _this.changeLampPost) { // 离开路由或切换设备
console.log("销毁实例")
// 销毁实例
flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer= null;
}
})
}
})
})
} else this.setDrop(index) // 掉线设备
})
// 切换设备，完成旧flvjs实例销毁后重启flvjs播放器
if (this.changeLampPost) {
console.log("重启播放器")
this.changeLampPost = false
this.openVideo()
}
},
}，
// 路由销毁前
beforeDestroy() {
this.leaveRouter = true
},