視頻直播這么火，再不學就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 標簽即可播放 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 等。