H5视频直播扫盲
1 H5到底能不能做视频直播？
当然可以， H5火了这么久，涵盖了各个方面的技术。
对于视频录制，可以使用强大的webRTC（Web Real-Time Communication）是一个支持网页浏览器进行实时语音对话或视频对话的技术，缺点是只在PC的chrome上支持较好，移动端支持不太理想。
对于视频播放，可以使用HLS(HTTP Live Streaming)协议播放直播流，ios和android都天然支持这种协议，配置简单，直接使用video标签即可。
webRTC兼容性：
video标签播放hls协议视频：
1
2
3
4
<video controls autoplay> 
    <source src="10.66.69.77:8080/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" /> 
    <p class="warning">Your browser does not support HTML5 video.</p> 
</video>
2 到底什么是HLS协议？
简单讲就是把整个流分成一个个小的，基于HTTP的文件来下载，每次只下载一些，前面提到了用于H5播放直播视频时引入的一个.m3u8的文件，这个文件就是基于HLS协议，存放视频流元数据的文件。
每一个.m3u8文件，分别对应若干个ts文件，这些ts文件才是真正存放视频的数据，m3u8文件只是存放了一些ts文件的配置信息和相关路径，当视频播放时，.m3u8是动态改变的，video标签会解析这个文件，并到对应的ts文件来播放，所以一般为了加快速度，.m3u8放在web服务器上，ts文件放在cdn上。
.m3u8文件，其实就是以UTF-8编码的m3u文件，这个文件本身不能播放，只是存放了播放信息的文本文件：
1
2
3
4
5
6
7
#EXTM3U                    m3u文件头
#EXT-X-MEDIA-SEQUENCE      第一个TS分片的序列号
#EXT-X-TARGETDURATION      每个分片TS的最大的时长
#EXT-X-ALLOW-CACHE          是否允许cache
#EXT-X-ENDLIST              m3u8文件结束符
#EXTINF                    指定每个媒体段(ts)的持续时间（秒），仅对其后面的URI有效
mystream-12.tsreactnative原生列表

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。