前端可选的视频直播协议大致只有两种：
- RTMP（Real Time Messaging Protocol）
- HLS（HTTP Live Streaming） 其中
RTMP是Adobe开发的协议，无法在iPhone中兼容，故目前兼容最好的就是HLS协议了。
HTTP Live Streaming（HLS）是苹果公司实现的基于HTTP的流媒体传输协议，可实现流媒体的直播和点播。原理上是将视频流分片成一系列HTTP下载文件。所以，HLS比RTMP有较高的延迟。
前端播放HLS
- Native支持
- Android 3.0+
- iOS 3.0+
- flash支持
- Flowplayer（GPL
×） - GrindPlayer（MIT）
- video-js-swf（Apache License 2.0）
- MediaElement.js（MIT）
- clappr（BSD IE10+
×）
- Flowplayer（GPL
最后，由于MediaElement已经纳入WordPress的核心视音频库，以及其良好的兼容性（见下图），所以最后选择使用MediaElement.js来实现。
切片准备
可使用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>
效果
例子源码
https://github.com/miniflycn/HLS-demo
时间： 2024-10-14 00:38:17