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

背景

近日项目中需要做些录播和直播类的功能，需要用到播放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,  //主要是这个配置，直播时音频的码率会被降低，直播游戏时背景音会有回响，但是说话声音没问题
      });