前端開發：H5直播起航

發現目前

WEB 上主流的視頻直播方案有 HLS 和 RTMP，移動 WEB 端目前以 HLS 爲主（HLS存在延遲性問題，也能夠藉助 video.js 採用RTMP），PC端則以 RTMP 爲主實時性較好，接下來將圍繞這兩種視頻流協議來展開H5直播主題分享。

1、視頻流協議HLS與RTMP

1. HTTP Live Streaming

HTTP Live Streaming（簡稱 HLS）是一個基於 HTTP 的視頻流協議，由 Apple 公司實現，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS，高版本 Android 也增長了對 HLS 的支持。一些常見的客戶端如：MPlayerX、VLC 也都支持 HLS 協議。
HLS 協議基於 HTTP，而一個提供 HLS 的服務器須要作兩件事：

1.

編碼：以

H.263 格式對圖像進行編碼，以 MP3 或者 HE-AAC 對聲音進行編碼，最終打包到 MPEG-2 TS（Transport Stream）容器之中；

2.

分割：把編碼好的

TS 文件等長切分紅後綴爲 ts 的小文件，並生成一個 .m3u8 的純文本索引文件；

瀏覽器使用的是

m3u8 文件。m3u8 跟音頻列表格式 m3u 很像，能夠簡單的認爲 m3u8 就是包含多個 ts 文件的播放列表。播放器按順序逐個播放，所有放完再請求一下 m3u8 文件，得到包含最新 ts 文件的播放列表繼續播，周而復始。整個直播過程就是依靠一個不斷更新的 m3u8 和一堆小的 ts 文件組成，m3u8 必須動態更新，ts 能夠走 CDN。一個典型的 m3u8 文件格式以下：

#EXTM3U

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000

gear1/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111

gear2/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444

gear3/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777

gear4/prog_index.m3u8

能夠看到

HLS 協議本質仍是一個個的 HTTP 請求 / 響應，因此適應性很好，不會受到防火牆影響。但它也有一個致命的弱點：延遲現象很是明顯。若是每一個 ts 按照 5 秒來切分，一個 m3u8 放 6 個 ts 索引，那麼至少就會帶來 30 秒的延遲。若是減小每一個 ts 的長度，減小 m3u8 中的索引數，延時確實會減小，但會帶來更頻繁的緩衝，對服務端的請求壓力也會成倍增長。因此只能根據實際狀況找到一個折中的點。

對於支持

HLS 的瀏覽器來講，直接這樣寫就能播放了：

<video src=」./bipbopall.m3u8″ height=」300″ width=」400″ preload=」auto」 autoplay=」autoplay」 loop=」loop」 webkit-playsinline=」true」></video>

注意：

HLS 在 PC 端僅支持safari瀏覽器，相似chrome瀏覽器使用HTML5 video

標籤沒法播放

m3u8 格式，可直接採用網上一些比較成熟的方案，如： sewise-player

、

MediaElement

、

videojs-contrib-hls

、

jwplayer

。

2. Real Time Messaging Protocol

Real Time Messaging Protocol（簡稱 RTMP）是 Macromedia 開發的一套視頻直播協議，如今屬於 Adobe。這套方案須要搭建專門的 RTMP 流媒體服務如 Adobe Media Server，而且在瀏覽器中只能使用 Flash 實現播放器。它的實時性很是好，延遲很小，但沒法支持移動端 WEB 播放是它的硬傷。

雖然沒法在

iOS的H5頁面播放，可是對於iOS原生應用是能夠本身寫解碼去解析的, RTMP 延遲低、實時性較好。

瀏覽器端，

HTML5 video

標籤沒法播放

RTMP 協議的視頻，能夠經過 video.js 來實現。

<link href=「http://vjs.zencdn.net/5.8.8/video-js.css」 rel=「stylesheet」>

<video id=「example_video_1″ class=「video-js vjs-default-skin」 controls preload=「auto」 width=「640」 height=「264」 loop=「loop」 webkit-playsinline>

<source src=「rtmp://10.14.221.17:1935/rtmplive/home」 type=‘rtmp/flv’>

</video>

<script src=「http://vjs.zencdn.net/5.8.8/video.js」></script>

<script>

videojs.options.flash.swf = ‘video.swf’;

videojs(‘example_video_1′).ready(function() {

this.play();

});

</script>

想要

學習前端開發的同窗，能夠加羣：

543627393學習哦！