关于使用flvjs

文章目录

• 关于使用flvjs
• • • 1.创建
    • 2.事件处理
    • 3.踩到的坑

1.创建

HTML

        <video
          id="largeVideo"
          style="width: 100%; height: 600px"
          class="centeredVideo"
          controls
          autoplay
          muted
          width="1015"
          height="576"
        >
          Your browser is too old which doesn't support HTML5 video.
        </video>

javascript

 let flvPlayerRef1 = document.getElementById("largeVideo");//获取创建dom
 let flvPlayerObjM1 = flvjs.createPlayer(
          {
            type: "flv",
            isLive: true, //是否直播
            url: url, //地址
            hasAudio: true,
            hasVideo: true,
          },
          {
            cors: true, // 是否跨域
            stashInitialSize: 384, // 缓存大小(kb)  默认384kb
            enableStashBuffer: true, // 是否启用缓存
            autoCleanupMaxBackwardDuration: 3 * 60,//自动清除缓存时间
            enableWorker: false, // 是否多线程工作
            autoCleanupSourceBuffer: true, // 是否自动清理缓存
            fixAudioTimestampGap: true,//音视频同步
          }
 flvPlayerObjM1.load(); //加载
 flvPlayerObjM1.play(); //播放

2.事件处理

flvjs.Events.STATISTICS_INFO 信息出错销毁直播流

flvPlayerObjM1.on(flvjs.Events.STATISTICS_INFO, function (res) {
         	flvPlayerObjM1.pause();
            flvPlayerObjM1.unload();
            flvPlayerObjM1.detachMediaElement();
            flvPlayerObjM1.destroy();
            flvPlayerObjM1 = null;
});

flvjs.Events.ERROR 断流报错销毁

flvPlayerObjM1.on(
          flvjs.Events.ERROR,
          (errorType, errorDetail, errorInfo) => {
            console.log("errorType:", errorType);
            console.log("errorDetail:", errorDetail);
            console.log("errorInfo:", errorInfo);
            flvPlayerObjM1.pause();
            flvPlayerObjM1.unload();
            flvPlayerObjM1.detachMediaElement();
            flvPlayerObjM1.destroy();
            flvPlayerObjM1 = null;
          }
        );

flvjs.Events.VIDEO_FROZEN视频卡顿监听

flvPlayerObjM1.on(
          flvjs.Events.VIDEO_FROZEN,
          (errorType, errorDetail, errorInfo) => {
            console.log("errorType:", errorType);
            console.log("errorDetail:", errorDetail);
            console.log("errorInfo:", errorInfo);
            flvPlayerObjM1.pause();
            flvPlayerObjM1.unload();
            flvPlayerObjM1.detachMediaElement();
            flvPlayerObjM1.destroy();
            flvPlayerObjM1 = null;
          }
        );

将创建写入方法，在事件监听中调用可以实现断流重连，卡顿重连等问题

3.踩到的坑

当使用创建时，记住每次都需要销毁当前创建的直播流，是整个都需要销毁，不然很容易造成内存溢出，直接导致浏览器卡死，在断流重连和卡顿修复的时候尤其注意是否完全销毁这个直播组件！！！