HLS 视频点播&直播初探

In 未分类 on 2015年04月26日 by TAT.donaldyang view: 3,988

前端可选的视频直播协议大致只有两种：

RTMP（Real Time Messaging Protocol）

HLS（HTTP Live Streaming）
其中 RTMP 是 Adobe 开发的协议，无法在 iPhone 中兼容，故目前兼容最好的就是 HLS 协议了。

HTTP Live Streaming（HLS）是苹果公司实现的基于 HTTP 的流媒体传输协议，可实现流媒体的直播和点播。原理上是将视频流分片成一系列 HTTP 下载文件。所以，HLS 比 RTMP 有较高的延迟。

前端播放 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 来实现。

MediaElement.js兼容性

切片准备

可使用 m3u8downloader 下载一个 HLS 源，或者使用 node-m3u 生成 m3u8 索引和 MPEG-TS 切片，下面是我们准备切片：

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

注意看切片索引文件：

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

<style>

/** 隐藏控制条 **/

.mejs-controls {

display: none !important;

}

</style>

</head>

<body>

</video>

var player = new MediaElementPlayer('#player1', {

// 禁止点击暂停

clickToPlayPause: false,

success: function (media, ele, player) {

// 初始化后立刻播放

player.play();

}

});

</script>

</body>

</html>

效果

例子源码

https://github.com/miniflycn/HLS-demo

原创文章转载请注明：

转载自AlloyTeam：https://www.alloyteam.com/2015/04/hls%e8%a7%86%e9%a2%91%e7%82%b9%e6%92%ad%e7%9b%b4%e6%92%ad%e5%88%9d%e6%8e%a2/

分享到:

AlloyTeam

AlloyTeam

前端播放 HLS

切片准备

前端代码

效果

例子源码

发表评论