flvjs播放器事件动态监听并实现flvjs实例销毁（http-flv协议）

flvjs播放器事件动态监听（http-flv协议）

1.困扰我的问题

最近在使用flvjs播放器播放http-flv协议流的直播视频，业务需求要动态加载非固定数量的视频（不超过6个），使用flv创建flvjs实例简单，但销毁flvjs得想法子，下面是解决我曾经的困扰思路~

2.思路
我们要监听创建出来flvjs实例事件，然后设置变量去判断何时该销毁实例

3.代码说明

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, // 直播地址(http://xxx.flv?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
},

4.总结
要解决动态监听flvjs实例问题，解决方案在代码中已呈现，关键是$flvjs.Events.STATISTICS_INFO的监听事件。

感谢启发文章：
Flv.js文档使用随记
原作者（bilibili）flv.js API文档【推荐】