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 条评论
登录 后参与评论

相关文章

来自专栏别先生

Hibernate之开门见山

1:SSH框架:   Struts2:基于mvc模式的应用层框架模式(Servlet层)   Hibernate:基于持久层的框架(数据访问层)   Sprin...

1757
来自专栏Java技术分享

SSM三大框架整合详细总结(Spring+SpringMVC+MyBatis)

使用 SSM ( Spring 、 SpringMVC 和 Mybatis )已经很久了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当...

1K12
来自专栏HBStream流媒体与音视频技术

MP4大文件虚拟HLS分片技术,避免服务器大量文件碎片

对于大家经常见到和使用到的普通MP4来说,作为电影、电视文件的存储容器,是很好的,不过对于流媒体点播来说,最大的缺点就是它的媒体信息和关键帧索引都集中存放在mo...

53912
来自专栏dalaoyang

SpringBoot使用Mybatis-Generator

Mybatis-Generator是Mybatis提供的一个便捷型插件,自动可以为项目生产对应的实体类,Mapper,dao层。

541
来自专栏Google Dart

Flutter 构建完整应用手册-处理手势

我们不仅希望向用户展示信息,还希望我们的用户与我们的应用进行互动! 那么,我们如何回应基本操作,如点击和拖动? 我们将使用GestureDetector部件!

862
来自专栏数据派THU

78行Python代码帮你复现微信撤回消息!

[ 导读 ]Python曾经对我说:"时日不多,赶紧用Python"。于是看到了一个基于python的微信开源库:itchat,玩了一天,做了一个程序,把私聊撤...

1123
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(63)-Excel导入和导出

昨天文章太过仓促没有补充导出的示例源码,在者当时弄到到很晚没时间做出导出功能,对阅读理解造成影响,现补充一份示例源码,顺便补充导出的功能说明,望理解 示例代...

3227
来自专栏编舟记

一步步编写SonarQube Plugin

插件确实不好写,因为插件是插入庞大的系统当中工作的,那也就意味着写插件需要具备一定的领域知识,包括系统架构、扩展点、业务共性及差异、API及其业务模型对应、安装...

862
来自专栏Android源码框架分析

Android6.0权限适配及兼容库的实现

从6.0 MarshMallow开始,Android支持动态权限管理,即有些权限需要在使用到的时候动态申请,根据用户的选择需要有不同的处理,具体表现可以看下图:

1222
来自专栏腾讯IVWEB团队的专栏

全面进阶 H5 直播(上)

如果我们想要理解 HTML5 视频,首先需要知道,你应该知道,但你不知道的内容?那怎么去判断呢? ok,很简单,我提几个问题即可,如果某些童鞋知道答案的话,可以...

1.6K6

扫码关注云+社区