【转】HLS视频点播&直播初探

时间 2019-11-24

标签 hls 视频点播直播初探繁體版

原文原文链接

特别提示：本人博客部分有参考网络其余博客，但均是本人亲手编写过并验证经过。如发现博客有错误，请及时提出以避免误导其余人，谢谢！欢迎转载，但记得标明文章出处： http://www.cnblogs.com/mao2080/

前端可选的视频直播协议大体只有两种：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浏览器