flv.js播放视频卡顿问题解决方法总结

本文总结了使用flv.js播放flv视频时遇到的问题及其解决方案。包括flv快进导致的视频卡顿,通过在nginx配置和使用yamdi工具注入元数据来解决;以及直播过程中声音弱化问题,可通过调整flv.js参数避免声音与视频不同步。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景

近日项目中需要做些录播和直播类的功能,需要用到播放flv视频的组件,找到了B站的开源组件flv.js

本文章不涉及到flv.js具体使用方法,flv.js具体使用参见B站github地址

只将将使用中遇到的问题总结一下,共参考

  • flv录制后,快进问题
  • flv回放时,跨域问题

flv快进问题

flv.js在快进时,视频会卡住不动,原因有两个:

  • 服务端没配好OPTIONS请求,在nginx的配置文件中添加:
server {
......
location / {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            #
            # Custom headers and headers various browsers *should* be OK with but aren't
            #
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            #
            # Tell client that this pre-flight info is valid for 20 days
            #
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }  
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
......
}
  • flv没有元数据信息,需要使用工具yamdi注入信息

关于yamdi参见yamdi官方文档

使用yamdi注入元数据信息命令如下:

yamdi -i src.flv -o src_meta.flv

这样操作后,flv在快进时就不卡顿了

flv在直播过程中声音弱化问题

实际使用中发现,fixAudioTimestampGap会对声音做处理

官网是这么描述的: Fill silent audio frames to avoid a/v unsync when detect large audio timestamp gap. 主要处理声音与视频不同步的问题。默认值为:true。在网路允许的情况下,可以改为false。

flvPlayer = flvjs.createPlayer({
        type: type,
        url: url,
        hasAudio: true,
        hasVideo: true,
        isLive: false,
        withCredentials: false,
        cors: true,        
      }, {
        enableWorker: true,
        lazyLoadMaxDuration: 3 * 60,
        seekType: 'range',      
        fixAudioTimestampGap: false,  //主要是这个配置,直播时音频的码率会被降低,直播游戏时背景音会有回响,但是说话声音没问题
      });
### 解决 flv.js 多路视频播放页面卡顿的优化方案 #### 1. 减少并发连接数 当使用 WebSocket 播放超过六路视频时,谷歌浏览器的最大并发请求数会达到上限,从而造成请求阻塞和页面卡死的情况[^2]。为了减少这种情况的发生,可以考虑合并多个视频流到单个 WebSocket 连接中传输数据。 #### 2. 使用 Web Worker 加载 FLV 流 通过将解码工作分配给 Web Workers 来减轻主线程的压力,这样不仅可以提高性能还可以改善用户体验。Web Workers 可以在后台线程运行 JavaScript 代码而不会影响 UI 渲染效率。 ```javascript // 创建一个新的 worker 实例来处理FLV解析逻辑 const worker = new Worker('path/to/your-worker-script'); worker.postMessage({ type: 'loadFlv', url: videoUrl }); worker.onmessage = function(e) { console.log(`Worker said: ${e.data}`); }; ``` #### 3. 合理配置缓存策略 适当调整 `config` 参数中的缓冲区大小和其他相关属性可以帮助缓解因网络波动引起的短暂延迟问题: ```javascript let playerConfig = { enableStashBuffer: false, stashInitialSize: 0, autoCleanupSourceBuffer: true, }; player.attachMediaElement(video); player.load(); player.configure(playerConfig); ``` 这些设置能够有效防止过多的数据堆积在内存当中导致系统资源耗尽进而引发崩溃现象[^3]。 #### 4. 动态调整分辨率与帧率 对于不同带宽条件下的终端设备来说,动态切换适合当前环境的最佳画质参数是非常重要的。这可以通过监听用户的网络状态变化事件并相应地修改媒体源对象的相关属性实现。 ```javascript function adjustQualityBasedOnNetworkStatus() { navigator.connection.addEventListener('change', () => { const currentBandwidthMbps = Math.round(navigator.connection.downlink * 1e6); if (currentBandwidthMbps < LOW_BANDWIDTH_THRESHOLD) { setLowResolutionAndFramerate(); } else { restoreOriginalSettings(); } }); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值