项目介绍: 开始做的是一款可视化数据大屏,后来客户要求在指定位置加一个摄像头的监控来展示实时的状况,由于没做过,于是就开启了漫漫找插件之路。
前端播放视频格式有:flv,hls,rtmp,rstp。具体啥意思,没背下来。我就直接搬一段了
由于做的是实时的,就果断放弃了hls这种格式。由于rtmp格式播放需要浏览器支持falsh插件,而大多数浏览器已经不支持了。时间紧,任务重。rstp还没试,有哪位仁兄,有推荐文章可以评论一下。
最终选用的是flv.js, 官网为 github.com/bilibili/fl…
具体用法很简单。我就不啰嗦了。给大家说下,我遇到的坑。
1、 页面上的视频不自动播放必须得点击之后才能播放。
报错内容:
Unmuting failed and the element was paused instead because the user didn’t interact with the document before 或 Uncaught (in promise) DOMException。
这个问题我翻了好多文章,有让模拟一下点击的,还有让加一些其他标签的。 试了都没用。 问题还得是从根源上解决。发现这个问题的出现是由于 谷歌浏览器为了提升用户体验,禁止了有声视频自动播放。 既然这样我直接给视频静音就行了。 所以最后 video标签加了 muted 标签完美解决
- 视频延迟过分延迟。
本以为已经顺利完成了。结果在测试的时候还是意外的出现意外了。 视频延迟过于严重。一遍遍查看flv.js的文档。 发现是因为flv.js默认开启了隐藏缓冲区。最终修改了下边这些标签解决问题。 `{
enablenorker: true, 关闭分离的线程
autoCleanupSourceBuffer: true, 自动清理buffer
enablestashBuffer: false, 关闭IO隐藏缓冲区
stashInitialsize: 128, 减少首帧显示等待时长
最后我把我的整个配置贴下
视频延迟最终减少到了1s。如果各位还能其他办法的优化,或者有哪里理解不到位的地方欢迎各位仁兄多多指点。