flvExtend icon indicating copy to clipboard operation
flvExtend copied to clipboard

开启追帧设置后,视频会频繁处于加载中

Open Shimmer66 opened this issue 5 months ago • 1 comments

2 推流使用ffmpeg推送了八路rtmp视频流,转httpflv流使用了nginxhttpflv flv-js-extend 配置如下

    const videoElements = ref([]);

    const startPlayback = async () => {
      await Promise.all(videoUrls.value.map(async (url, index) => {
        const videoElement = videoElements.value[index];

        const flv = new FlvExtend({
          element: videoElement, // *必传
          frameTracking: true, // 开启追帧设置
          updateOnStart: true, // 点击播放后更新视频
          updateOnFocus: true, // 获得焦点后更新视频
          reconnect: true, // 开启断流重连
          reconnectInterval: 0.5, // 断流重连间隔
          showLog: true, //显示插件的log信息(包括回到前台、跳帧、卡住重建、视频ERROR)
          trackingDelta: 2,
        });

        // Initialize mpegts player
        const flvPlayer = flv.init({
          type: 'flv',
          isLive: true,
          url: url
        },
          {
            enableStashBuffer: false, // 如果您需要实时(最小延迟)来进行实时流播放,则设置为false
            autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
            stashInitialSize: 128, // 减少首帧显示等待时长
            enableWorker: true // 启用分离的线程进行转换
          });
         flvPlayer.play();

      }));
    };

Shimmer66 avatar Jan 16 '24 14:01 Shimmer66