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

视频直播这么火，再不学就out了！为了紧跟潮流，本文我也将向大家介绍一下视频直播中的基本流程和主要的技术点，包括但仅不限于前端技术。

H5 到底能不能做视频直播？

当然可以了，H5火了这么久，涵盖了各个方面的技术，我们的流媒体服务器就可以支持H5的直播。

 

简单的推流服务器搭建，由于我们上传的视频流都是基于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 标签即可播放 hls 协议的直播视频：

 <video autoplay webkit-playsinline>  
     <source src="http://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> 

需要注意的是，给 video 标签增加 webkit-playsinline 属性，这个属性是为了让 video 视频在 ios 的 uiwebview 里面可以不全屏播放，默认 ios 会全屏播放视频，需要给 uiwebview 设置 allowsInlineMediaPlayback＝YES。业界比较成熟的videojs可以根据不同平台选择不同的策略，例如 iOS 使用 video 标签，pc 使用 flash 等。