HTTP Live Streaming(HLS)是蘋果公司實現的基於HTTP的流媒體傳輸協議,可實現流媒體的直播和點播。原理上是將視頻流分片成一系列HTTP下載文件。所以,HLS比RTMP有較高的延遲。
可使用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
爲切片終止標記,如果沒有該標記,瀏覽器會在文件讀取完後再請求索引文件,如果有更新則繼續下載新文件,以此達到直播效果。
前端代碼
<!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>