调研背景
网页上使用flv.js库播放设备录制的flv视频,发现有些能播放,有些只播放几秒钟就会卡住,故调研github上排名靠前的几个视频播放库看是否有解决办法
测试1:html<video>标签
html<video>标签,不能直接播放flv,需借助第三方库
测试2:使用video.js
GitHub - videojs/video.js: Video.js - open source HTML5 video player
也是播放1s卡住,核心使用了bilibili的flv.js,应该只是给flv.js加了个样式
测试3:EZUIKit-flv
有问题的视频可以播放,但没有工具栏(待调研)
https://github.com/Ezviz-OpenBiz/EZUIKit-flv
以前的不卡视频也可以播放
重要:萤石云的这个库没有工具栏,像快进、时间轴拖拽等,也没有提供相关接口,从官网文档看适用于设备看直播的场景
测试4:DPlayer
https://dplayer.diygod.dev/zh/guide.html#flv
底层依赖于flv.js 有问题的视频还是不能播放,卡在1s
测试5: Jessibuca
http://jessibuca.monibuca.com/
https://jessibuca.com/player.html
有问题的视频可以播放,但是没有时间进度条,暂停也是假的,暂停后再播放会从头开始播
pro版本播放有问题视频报错,也没有时间进度条
https://jessibuca.com/player-pro.html
测试6:Xgplayer
https://github.com/bytedance/xgplayer
https://h5player.bytedance.com/en/examples/
有问题的视频可以播放2~3秒,然后暂停;同感云上能播放的历史视频反而报错,说格式不支持。。;也没有时间轴
测试7:chimee
https://chimee.pyzy.net/#demo
有问题的视频可以播放;同感云上以前的正常的视频反而不能播放;也没有时间轴
测试8:mpegts.js
https://xqq.im/mpegts.js/demo/
有问题的视频文件也是卡在1s
测试9:WasmVideoPlayer
https://github.com/sonysuqin/WasmVideoPlayer
播放视频失败
测试10:muiplayer
https://muiplayer.js.org/demo/
不支持flv播放,但官方文档说支持
测试11:ovsyunlive
http://m.ovmeet.com:8082/ovplayerflv/?m.ovmeet.com:7701/webplay/0.8928060356900529
播放失败
总结
设备端转的flv文件,可能是代码问题(使用网上搜索的h264转flv的c++代码),转的flv视频文件有可能有点问题,有问题的flv文件用电脑上的视频软件可以播放,但网页端就会卡住,猜测是电脑端软件做了某些兼容处理。最后讨论,设备端直接转mp4文件,H5原生的video标签就可以播放。
有问题的视频文件
链接: https://pan.baidu.com/s/1lLk579Q62KzuXq23pPgOWw?pwd=6sdj 提取码: 6sdj
其他相关知识
H264与FLV
H264与MP4