flv.js直播点播，播放flv视频时快进、重连、卡死、延迟等问题 |
您所在的位置：网站首页 › 前端video标签播放视频卡住了 › flv.js直播点播，播放flv视频时快进、重连、卡死、延迟等问题 |
|
flv视频流延迟
在普通的网络环境下,flv.js播放http-flv的视频流延迟大概在3~5秒左右,对于实时性要求比较高的场景,显然是不适用的,那么怎么才能降低延迟呢? 通过对buffered(缓冲区末尾)和currentTime(当前播放位置)的比较,发现差值大概在1.8秒左右,这时候就需要我们定时检测currentTime和buffered的差值,然后手动跳帧,使currentTime和buffered同步(PS:这两个值在Player对象中可以获取到,代码如下: setInterval(() => { if (this.player.buffered.length) { let end = this.player.buffered.end(0);//获取当前buffered值 let diff = end - this.player.currentTime;//获取buffered与currentTime的差值 if (diff >= 0.5) {//如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定 this.player.currentTime = this.player.buffered.end(0);//手动跳帧 } } }, 2000); //2000毫秒执行一次 断流重连视频直播时,有时候会遇到视频loading,卡顿,有可能是本地网络波动或者服务端流断开,我们可以通过监听flvjs.Events.ERROR来判断连接是否已经断开,继而进行断流重连,代码如下: this.player.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => { console.log("errorType:", errorType); console.log("errorDetail:", errorDetail); console.log("errorInfo:", errorInfo); //视频出错后销毁重新创建 if (this.player) { this.player.pause(); this.player.unload(); this.player.detachMediaElement(); this.player.destroy(); this.player= null; this.createPlayer(videoElement, this.url); } }); 画面卡死如果控制台没有错误信息,而且查看network发现视频流没有断开,但是画面一直在loading或者卡住不动,我这边的原因是服务端推流突然断开,然后在很快的时间内继续推流,这个时候因为客户端的超时时间还没有结束,流会继续推送到原链接,这个时候我们的视频会卡在掉线的那个时间,不会继续播放.这个时候我们就需要监听推流的decodedFrame,如果decodedFrame不再发生变化,我们就销毁掉该实例并进行重新连接,代码如下: this.player.on("statistics_info", function (res) { if (this.lastDecodedFrame == 0) { this.lastDecodedFrame = res.decodedFrames; return; } if (this.lastDecodedFrame != res.decodedFrames) { this.lastDecodedFrame = res.decodedFrames; } else { this.lastDecodedFrame = 0; if (this.player) { this.player.pause(); this.player.unload(); this.player.detachMediaElement(); this.player.destroy(); this.player= null; this.createPlayer(videoElement, this.url); } } }); flv.js播放文件时，快进卡死 flv没有元数据信息，需要使用工具yamdi注入信息为提供视频的服务增加OPTIONS，比如nginx配置，看一下配置yamdi官方文档 yamdi -i src.flv -o src_meta.flv这样操作后，flv在快进时就不卡顿了，以下为nginx配置，增加OPTIONS 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; } ...... } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |