美文网首页
flv.js播放卡顿问题解决

flv.js播放卡顿问题解决

作者: myan18 | 来源:发表于2019-02-16 20:50 被阅读0次

背景

近日项目中需要做些录播和直播类的功能,需要用到播放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.js播放卡顿问题解决

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

  • vue中播放flv格式视频(b站flv.js的使用)

    flv.js是什么? flv.js就是由 bilibili 网站开源的 HTML5 Flash 视频(FLV)播放...

  • Eclispe 卡顿问题解决

    Eclispe 卡顿问题解决 1. Remote System Explorer Operation 引起的卡顿 ...

  • iOS 几个问题记录

    1. Weex单利卡顿 最近修复了一个播放器卡顿的问题,现象是播放器播放一段时间后会产生卡顿,原因是我们发现wee...

  • 直播专题问题排查-播放卡顿(二)

    1. 播放卡顿的表现 播放卡顿的表现总结下来包括但不限于以下这些: 频繁出现缓冲 播放不够流畅,画面一卡一卡的 2...

  • PhotoView播放gif卡顿

    问题出现场景 引入github著名第三方库PhotoView在项目的需求中有点击查看大图,查看大图里的组件用的Ph...

  • 关于ijkplayer播放卡顿

    在做音频播放的时候,使用的是开源的ijkplayer播放器,ijkplayer解码使用的是ffmpeg,声音输出使...

  • H5直播系列八 FLV文件格式

    在如何看待哔哩哔哩的开源 HTML5 播放器内核 flv.js?中,flv.js作者有这样一段回复:一些人问我为什...

  • 短视频的卡顿优化

    视频播放卡顿是音视频业务里一个常见的问题,引起视频播放卡顿的主要原因通常包括: 网络带宽速度不够,造成音视频数据无...

  • 示例:React 项目中封装 Flv.js

    1.背景 Flv.js 是 B站开源的播放器,开源用于播放 flv 的视频流而不依赖 flash。在React项目...

网友评论

      本文标题:flv.js播放卡顿问题解决

      本文链接:https://www.haomeiwen.com/subject/irwieqtx.html