shady-xia / flvExtend

基于 flv.js 的功能扩展插件(追帧、断流重连、实时更新)
https://shady-xia.github.io/flvExtend
Other
150 stars 31 forks source link

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

Open Shimmer66 opened 6 months ago

Shimmer66 commented 6 months ago

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();

      }));
    };
shady-xia commented 6 months ago

可以把trackingDelta调高一点试试