【转】HLS视频点播&直播初探
前端可选的视频直播协议大致只有两种：
- 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>
效果
例子源码
【转】HLS视频点播&直播初探的更多相关文章
- HLS视频点播&直播初探
前端可选的视频直播协议大致只有两种: RTMP(Real Time Messaging Protocol) HLS(HTTP Live Streaming) 其中RTMP是Adobe开发的协议,无法在 ...
- hls&flv直播请求过程
hls&flv直播请求过程 直播类产品层出不穷,从各方面塑造了我们的生活方式.直播产品中,延时是决定用户体验的关键因素,它也将间接决定直播产品的成败.这其间,对延时影响较大的就是直播架构中选择 ...
- HLS视频直播
HTTP Live Streaming (HLS) 苹果官方对于视频直播服务提出了 HLS 解决方案,该方案主要适用范围在于: 使用 iPhone .iPod touch. iPad 以及 Apple ...
- HTTP-FLV直播初探
目前几种视频流的简单对比: 协议 httpflv rtmp hls dash 传输方式 http流 tcp流 http http 视频封装格式 flv flv tag Ts文件 Mp4 3gp web ...
- RTMP HLS HTTP 直播协议一次看个够
直播从2016年一路火到了2017年,如今要在自己的App里加入直播功能,只要找一个现成的SDK就行了,什么拍摄.美颜.推流,一条龙服务.不过作为直播身后最重要的部分:推流协议,很多人并不是很清楚.如 ...
- 流媒体技术学习笔记之（十）HLS协议直播延时优化(35s到10S)
1.首先要了解HLS延时的机制,也就是为什么会延时,延时主要发生在什么地方. HTTP Live Streaming 并不是一个真正实时的流媒体系统,这是因为对应于媒体分段的大小和持续时间有一定潜在的 ...
- EasyNVR无插件H5/HLS/m3u8直播解决方案中Windows系统服务启动错误问题的修复：EasyNVR_Service 服务因 函数不正确。 服务特定错误而停止。
最近在做某地市移动公司景观直播的项目时,遇到一个问题,当我们部署EasyNVR为系统服务后,居然出现了无法启动服务的现象,表面上看,提示是系统服务启动失败,实际通过查看windows 系统日志: 查找 ...
- EasyDSS流媒体解决方案实现的RTMP/HLS视频直播、直播鉴权（如何完美将EasyDSS过渡到新版）
上一篇博文介绍了EasyDSS点播功能,然后作为RTMP流媒体服务器,接受RTMP推流.进行实时的直播流分发又是自身一大核心功能. 需求背景: 写本篇博文的一个目的是向大家介绍一下EasyDSS新版的 ...
- rtsp转rtmp、hls网页直播服务器EasyNVR前端兼容性调试：ie下的 pointer-events- none
发现问题: 之前在做EasyNVR 的web页面开发过程中,力求的都是一个播放效果的.功能的展示.对于兼容性也有注意,但有些细节还是难免有所疏忽. 内部测试发现:由于我们是流媒体的实时视频直播,在we ...
随机推荐
- 客户端相关知识学习（三）之Android原生与H5交互的实现
Android原生与H5交互的实现 H5调用原生的方式 方式可能有多种,根据开发经验,接触过两种方式. 方法一:Android向H5注入全局js对象,也就是H5调Android 1.首先对WebVie ...
- Spring的基本应用(1)：依赖以及控制反转
在说到这里的时候,首先要说下程序的耦合和解耦,以便对上节做一个解释. 一.程序的耦合和解耦 1.程序的耦合性(Copling) (1)程序的耦合性,也叫做耦合度,是对模块之间关联程度的度量,耦合性的强 ...
- kinit: Bad encryption type while getting initial credentials
描述:RHEL 6.x主机执行kinit -kt命令报如下错误 [heboan@localhost~]$ kinit -kt heboan.keytab heboan kinit: Bad encry ...
- Spark报错java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries.
Spark 读取 JSON 文件时运行报错 java.io.IOException: Could not locate executable null\bin\winutils.exe in the ...
- Linux下安装配置启动RabbitMQ
Linux版本:Centos 7RabbitMQ依赖erlang所以需要先安装erlang以及他需要的环境 安装erlang http://www.erlang.org/downloads 拿最新的版 ...
- linux命令详解——sort
[原文链接]:http://www.cnblogs.com/51linux/archive/2012/05/23/2515299.html 1 sort的工作原理 sort将文件的每一行作为一个单位, ...
- python、第七篇：ORM框架SQLAlchemy
一 介绍 SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作,简言之便是:将对象转换成SQL,然后使用数据API执行SQL并获取 ...
- 3.flask核心与源码剖析
1.session session存储了特定用户会话所需的属性及配置信息,这样,当用户在应用程序的 Web 页之间跳转时,存储在 session 对象中的变量将不会丢失,而是在整个用户会话中一直存在下 ...
- verilog分频模块设计
verilog设计: 分频器的设计: 分频器就是将一个时钟源的频率降低的过程(可以通过观察分频之后周期中包含几个原时钟周期来看是几分频),分频分为基数分频也分为偶数分频, 偶数分频的代码如下:(其中就 ...
- 跟着动画来学习TCP三次握手和四次挥手
TCP三次握手和四次挥手的问题在面试中是最为常见的考点之一.很多读者都知道三次和四次,但是如果问深入一点,他们往往都无法作出准确回答. 点我查看如何应对面试中的三次握手.四次挥手 本篇尝试使用动画来对 ...