首页 > 音视频技术 > html5播放flv
2018
03-01

html5播放flv

好久没看优酷了,发现优酷也支持html5播放了,这样看1080p视频电脑不会呼呼叫了。看了下,优酷用的是hls方案。如下为我观看的动漫视频:
html5播放flv - 第1张  | Jianchihu
鼠标右键复制调试信息可以得到:

其中”supportType”:”hls”就说明了优酷用的hls。hls延迟比较大,像这种非直播应用问题不大。话说我还是习惯用youtube,因为youtube播放器强大多了,可以设置自动字幕翻译,而且可以实时查看调试信息。
html5播放flv - 第2张  | Jianchihu

目前大多数直播都是采用rtmp协议,延迟小,有很多现成方案,比如librtmp库推流,srs或者nginx rtmp做服务器。但是网页端播放大多还是采用flash插件,耗电,性能差,开个1080p电脑就要呼呼叫了。所以这时候就需要html5了。

html5中播放视频用的是video标签,用法:http://www.w3school.com.cn/tags/tag_video.asp。支持Ogg、MPEG4、WebM三种格式。
html5播放flv - 第3张  | Jianchihu
其中WebM主要是谷歌在使用,Youtube现在用的WebM封装的是vp9视频,接着最常见的是MP4了。

由于html5 video标签只支持mp4,要想也支持flv,我们就要拆解flv了。由于flv容器封装的是H264+AAC,所以我们可以在网页端收到flv后,使用js代码解析flv,取出H264以及AAC,然后封装成mp4文件,再喂给video标签就可以了。这样我们就可以无插件播放flv了,由于mp4封装比flv复杂多了,所以这样可以减轻服务器压力,服务器不用再专门封装mp4文件。前面说到youku用的hls,跟flv类似,也需要一个js插件把hls转成mp4。

ps.如果要学习flv容器格式,可以参考:http://blog.jianchihu.net/flvanalyzer.html 附带的工具,这是我两年前写的。
如果要学习mp4容器格式,可以参考:http://blog.jianchihu.net/mp4-elst-box.html 附带的工具,我当初做mp4解析就是用到该工具,然后配合标准文档:http://blog.jianchihu.net/doc 基本就没问题了,源码的话可以参考ffmpeg demux模块。

最后编辑:
作者:Jianchihu
管理员——低调做事,低调做人

留下一个回复

你的email不会被公开。

This site uses Akismet to reduce spam. Learn how your comment data is processed.