使用flv.js进行不同分辨率无缝切换

最新推荐文章于 2024-10-10 08:09:13 发布

原创

最新推荐文章于 2024-10-10 08:09:13 发布 · 5.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#flv.js #html5 #js

本文介绍了如何使用flv.js实现不同分辨率的无缝切换，通过html5的Media Source Extensions（MSE）技术，当新的分辨率视频流到来时，只需向sourcebuffer添加新的init segment和media segment即可。flv.js因其支持MSE而成为实现无缝切换的合适选择。通过ffmpeg进行视频分片，配合flv.js，可以轻松实现不同分辨率的切换。作者还计划将此功能整合到之前的点播项目中，创建一个完整的点播网页。

自从上次写完一个简单的视频点播网页后，突然发觉播放功能太简单了，平常看视频网站都有个分辨率切换的功能，特别是youtube，分辨率切换时，可以不用停止视频，感觉有点神奇。于是查了MSE相关资料，发现html5对于这块天然就有很好的支持。简单来说，当你新分辨率视频流到来时，要给一个新的init segment到sourcebuffer里，之后跟着你新的分辨率的media segment就行了， so easy。

一、flv.js

之所以使用flv.js，是因为我对比了下video.js，发现video.js是直接使用video.src属性就行播放的（也许他有用到mse只是我没看到~~~），而flv.js 是使用mse就行播放的，要想无缝切换视频，就必须使用mse。

闲话不多说，放链接Demo地址。本身flv.js就支持不同文件块之间的切换，在这基础上，要进行多个分辨率切换就简单很多了。唯一复杂点的地方应该就是不同分辨率的flv文件块的生成上。

二、使用ffmpeg进行分片

使用如下命令

ffmpeg -i $FILE -c copy   -f segment -segment_time 20 -segment_list out.list -segment_list_type csv -segment_format_options flvflags=add_keyframe_index out%03d.flv

另外，给大家一个脚本，这脚本用来生成json数据给video.html访问的

#!/bin/bash


list01=$(awk -F, '{print "{\"url\":\"media/"$1"\", \"start\":\""$2"\", \"end\":\""

最低0.47元/天解锁文章