如何使用视频流媒体服务器支持HTML5直播?

视频直播这么火，再不学就out了!为了紧跟潮流，本文我也将向大家介绍一下视频直播中的基本流程和主要的技术点，包括但仅不限于前端技术。H5 到底能不能做视频直播?当然可以了，H5火了这么久，涵盖了各个方面的技术，我们的流媒体服务器就可以支持H5的直播。对于视频录制，可以使用强大的 WebRTC(Web Real-Time

Communication)是一个支持网页浏览器进行实时语音对话或视频对话的技术，缺点是只在PC的chrome上支持较好，移动端支持不太理想。简单的推流服务器搭建，由于我们上传的视频流都是基于rtmp协议的，所以服务器也必须要支持 rtmp才行，大概需要以下几个步骤：1 安装一台 nginx 服务器。2 安装 nginx 的 rtmp 扩展，目前使用比较多的是https://github.com/arut/nginx-rtmp-module。3 配置 nginx 的 conf 文件：rtmp { server { listen 1935; #监听的端口 chunk_size 4000; application hls {
#rtmp推流请求路径 live on; hls on; hls_path /usr/local/var/www/hls; hls_fragment 5s; }
} }4 重启 nginx，将 rtmp 的推流地址写为 rtmp://ip:1935/hls/mystream，其中 hls_path 表示生成的 .m3u8
和 ts 文件所存放的地址，hls_fragment 表示切片时长，mysteam
表示一个实例，即将来要生成的文件名可以先自己随便设置一个。更多配置可以参考：https://github.com/arut/nginx-rtmp-module/wiki/根据以上步骤基本上已经实现了一个支持 rtmp 的视频服务器了。对于视频播放，可以使用 HLS(HTTP Live Streaming)协议播放直播流，iOS 和 Android 都天然支持这种协议，配置简单，直接使用
video 标签即可。需要注意的是，给 video 标签增加 webkit-playsinline 属性，这个属性是为了让 video 视频在 ios 的 uiwebview
里面可以不全屏播放，默认 ios 会全屏播放视频，需要给 uiwebview 设置
allowsInlineMediaPlayback=YES。业界比较成熟的videojs可以根据不同平台选择不同的策略，例如 iOS 使用 video
标签，pc 使用 flash 等。

转载于天翼云知识，如有侵权，请联系删除，谢谢