HLS視頻點播&直播初探

時間 2019-11-06

標籤 hls 視頻點播直播初探简体版

原文原文鏈接

前端可選的視頻直播協議大體只有兩種：css

RTMP（Real Time Messaging Protocol）

HLS（HTTP Live Streaming）其中RTMP是Adobe開發的協議，沒法在iPhone中兼容，故目前兼容最好的就是HLS協議了。

HTTP Live Streaming（HLS）是蘋果公司實現的基於HTTP的流媒體傳輸協議，可實現流媒體的直播和點播。原理上是將視頻流分片成一系列HTTP下載文件。因此，HLS比RTMP有較高的延遲。html

前端播放HLS

Native支持
1. Android 3.0+
2. iOS 3.0+
flash支持
1. Flowplayer（GPL ×）
2. GrindPlayer（MIT）
3. video-js-swf（Apache License 2.0）
4. MediaElement.js（MIT）
5. clappr（BSD IE10+ ×）

最後，因爲MediaElement已經歸入WordPress的核心視音頻庫，以及其良好的兼容性（見下圖），因此最後選擇使用MediaElement.js來實現。前端

切片準備

可以使用m3u8downloader下載一個HLS源，或者使用node-m3u生成m3u8索引和MPEG-TS切片，下面是咱們準備切片：node

https://github.com/miniflycn/HLS-demo/tree/master/m3u8jquery

注意看切片索引文件：git

#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爲切片終止標記，若是沒有該標記，瀏覽器會在文件讀取完後再請求索引文件，若是有更新則繼續下載新文件，以此達到直播效果。github

前端代碼

<!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>

效果

例子源碼

https://github.com/miniflycn/HLS-demo瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。