背景

近日项目中需要做些录播和直播类的功能，需要用到播放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在快进时就不卡顿了