前端可選的視頻直播協(xié)議大致只有兩種：
- RTMP（Real Time Messaging Protocol）
- HLS（HTTP Live Streaming） 其中
RTMP是Adobe開發(fā)的協(xié)議，無法在iPhone中兼容，故目前兼容最好的就是HLS協(xié)議了。
HTTP Live Streaming（HLS）是蘋果公司實現(xiàn)的基于HTTP的流媒體傳輸協(xié)議，可實現(xiàn)流媒體的直播和點播。原理上是將視頻流分片成一系列HTTP下載文件。所以，HLS比RTMP有較高的延遲。
- Android 3.0+
- iOS 3.0+
- Flowplayer（GPL
×）- GrindPlayer（MIT）
- video-js-swf（Apache License 2.0）
- MediaElement.js（MIT）
- clappr（BSD IE10+
×）
最后，由于MediaElement已經(jīng)納入WordPress的核心視音頻庫，以及其良好的兼容性（見下圖），所以最后選擇使用MediaElement.js來實現(xiàn)。
可使用m3u8downloader下載一個HLS源，或者使用node-m3u生成m3u8索引和MPEG-TS切片，下面是我們準備切片：
注意看切片索引文件：
#EXTM3U#EXT-X-TARGETDURATION:11#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:0#EXT-X-PLAYLIST-TYPE:VOD#EXTINF:10.133333,fileSequence0.ts#EXTINF:10.000666,fileSequence1.ts#EXTINF:10.667334,fileSequence2.ts#EXTINF:9.686001,fileSequence3.ts#EXTINF:9.768665,fileSequence4.ts#EXTINF:10.000000,fileSequence5.ts#EXT-X-ENDLIST其中#EXT-X-ENDLIST為切片終止標記，如果沒有該標記，瀏覽器會在文件讀取完后再請求索引文件，如果有更新則繼續(xù)下載新文件，以此達到直播效果。
<!DOCTYPE html><html><head><title>player</title><link rel="stylesheet" href="./player/mediaelementplayer.css" /><style>/** 隱藏控制條 **/.mejs-controls { display: none !important;}</style></head><body><video width="640" height="360" id="player1"> <source type="application/x-mpegURL" src="/m3u8/index.m3u8"></video><script src="http://7.url.cn/edu/jslib/jquery/1.9.1/jquery.min.js"></script> <script src="./player/mediaelement-and-player.js"></script><script>var player = new MediaElementPlayer('#player1', { // 禁止點擊暫停 clickToPlayPause: false, success: function (media, ele, player) { // 初始化后立刻播放 player.play(); }});</script></body></html>
