打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
【转】HLS视频点播&直播初探
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过。如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/

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

  • 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来实现。

切片准备

可使用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><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="//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

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
HLS实现点播和直播时,M3U8文件的不同
Flash的兴衰史和HTML5的崛起
HLS 直播协议m3u8详解
还在傻傻买各大网站VIP看视频吗?程序员教你免费看VIP视频
加密的m3u8、ts文件合并
Android如何离线播放加密(HLS)m3u8视频——实现HLS缓存
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服