HLS视频点播&直播初探

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

  • 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="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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯云安全的专栏

Android 9 Pie 正式发布,腾讯云应用加固完美适配

1291
来自专栏腾讯移动品质中心TMQ的专栏

TMQ在线沙龙第三期回顾

Android自动化测试框架Uiautomator 活动时间:2016年6月30日 QQ群视频交流 活动介绍:TMQ QQ群沙龙第三期分享圆满结束啦~本次分享的...

1916
来自专栏技术墨客

multi-tenant solution(多租户方案)说明

今天在研究vertx-Metrics时碰到了一个multi-tenant solution的概念,特此整理记录相关资料。

1182
来自专栏云计算D1net

云管理成功的关键:应用工作流

IT环境管理的目标就是要确保云应用的运行性能和系统可靠性达到一个最佳水平。在云计算中,应用与固定资源是相互隔离的,这就意味着负责云管理的IT管理人员必须对应用的...

2596
来自专栏无原型不设计

主流原型工具可用性测试横向比较

可用性测试是指通过观察用户使用产品(或原型)的过程,记录和分析用户的行为和感受,以改善产品可用性的一系列方法。可用性测试适用于产品前期设计开发,中期改进和后期...

3875
来自专栏VRPinea

Mozilla推出新功能Hubs,网络浏览器秒变VR社交体验

1574
来自专栏ThoughtWorks

持续交付2.0:云原生持续交付

《持续交付》提出了一系列贯穿整个软件交付生命周期的最佳实践。但它成书的年代(2010年)云计算尚未得到广泛应用,尤其在软件开发过程中的应用非常有限。如果站在今天...

3695
来自专栏JadePeng的技术博客

Angular 中后台前端解决方案 - Ng Alain 介绍

4165
来自专栏小怪聊职场

爬虫课程|利用Python Scrapy进行爬虫开发指南清单

2676
来自专栏Web 开发

关于NoSQL优势的一点想法

想法来源于与刚才龙老大的一番讨论,文中对于NoSQL概念性的东西摘录自:http://www.infoq.com/cn/news/2011/01/nosql-w...

1210

扫码关注云+社区