Open miniflycn opened 9 years ago
前端可选的视频直播协议大致只有两种: RTMP(Real Time Messaging Protocol) HLS(HTTP Live Streaming) 其中RTMP是Adobe开发的协议,无法在iPhone中兼容,故目前兼容最好的就是HLS协议了。
前端可选的视频直播协议大致只有两种:
其中RTMP是Adobe开发的协议,无法在iPhone中兼容,故目前兼容最好的就是HLS协议了。
RTMP
HTTP Live Streaming(HLS)是苹果公司实现的基于HTTP的流媒体传输协议,可实现流媒体的直播和点播。原理上是将视频流分片成一系列HTTP下载文件。所以,HLS比RTMP有较高的延迟。
×
最后,由于MediaElement已经纳入WordPress的核心视音频库,以及其良好的兼容性(见下图),所以最后选择使用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为切片终止标记,如果没有该标记,浏览器会在文件读取完后再请求索引文件,如果有更新则继续下载新文件,以此达到直播效果。
#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
其中RTMP是Adobe开发的协议,无法在iPhone中兼容,故目前兼容最好的就是HLS协议了。 这句话应该是指针对ios上的H5页面吧?ios app是可以解码的。
HTTP Live Streaming(HLS)是苹果公司实现的基于HTTP的流媒体传输协议,可实现流媒体的直播和点播。原理上是将视频流分片成一系列HTTP下载文件。所以,HLS比RTMP有较高的延迟。
前端播放HLS
×
)×
)最后,由于MediaElement已经纳入WordPress的核心视音频库,以及其良好的兼容性(见下图),所以最后选择使用MediaElement.js来实现。
切片准备
可使用m3u8downloader下载一个HLS源,或者使用node-m3u生成m3u8索引和MPEG-TS切片,下面是我们准备切片:
注意看切片索引文件:
其中
#EXT-X-ENDLIST
为切片终止标记,如果没有该标记,浏览器会在文件读取完后再请求索引文件,如果有更新则继续下载新文件,以此达到直播效果。前端代码
效果
例子源码
https://github.com/miniflycn/HLS-demo