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

HLS视频点播直播初探相关推荐

视频监控安防平台-国标28181平台（支持国标28181转RTSP/RTMP/HLS/WEBRTC直播）
视频监控安防平台-国标28181平台(支持国标28181转RTSP/RTMP/HLS/WEBRTC直播) 发现很久都未更新博客了,最近把小平台的功能做了完善,在原来的功能基础上添加了功能,支持国标28 ...
php安卓直播抓取,hls,android_安卓大部分浏览器播放HLS协议直播流会从头开始，hls,android,ffmpeg,m3u8 - phpStudy...
安卓大部分浏览器播放HLS协议直播流会从头开始遇到的问题 HLS直播流在iOS系统中表现正常, 但在安卓使用大部分浏览器(UC浏览器除外)播放ffmpeg生成的HLS直播流都会发生从头播放的问题, ...
RTMP、HTTP-FLV、HLS三大直播协议
RTMP.HTTP-FLV.HLS,你了解常见的三大直播协议吗随着直播行业大火,游戏.乐秀.教育.发布会等直播类产品层出不穷,能够满足各方人员的需求.在直播中,总能在其中找到适合自己的产品内容.喜欢 ...
小程序实现RTMP/HLS协议直播监控视频实时播放实现步骤
小程序实现监控视频实时播放实现步骤简述:RTMP协议直播视频,可使用小程序live-player组件实现视频播放,暂只针对国内主体特定类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发 ...
LiveQing直播点播流媒体如何关闭指定类型的流播放HTTP-FLV直播流|WS-FLV直播流|HLS(m3u8)直播流|RTMP直播流
流媒体服务可以分发输出,HTTP-FLV直播流.WS-FLV直播流.HLS(m3u8)直播流.RTMP直播流,在某些场景下,我们不希望用户播放指定类型的流,那么如何做呢? RTMP直播点播流媒体服务 ...
Nginx 搭建RTMP视频点播直播 HLS服务器
安装Nginx --下载nginx-rtmp-module模块 git clone https://github.com/arut/nginx-rtmp-module.git--安装依赖 yum in ...
如何实现app直播源代码，通过HLS进行直播观看
app直播源代码需要通过网页观看直播,无插件方案就是移动端使用HLS 方法为FFMPEG推流到带Nginx-RTMP-Module的Nginx上,转出RTMP流和HLS流所用命令为: ffmpeg. ...
php 直播服务器搭建,基于Nginx搭建RTMP/HLS视频直播服务器
1.Nginx环境搭建(基于lnmp环境)//下载并安装lnmp环境 wget -c http://soft.vpser.net/lnmp/lnmp1.3.tar.gz && tar ...
android hls检测,安卓大部分浏览器播放HLS协议直播流会从头开始
遇到的问题 HLS直播流在iOS系统中表现正常, 但在安卓使用大部分浏览器(UC浏览器除外)播放ffmpeg生成的HLS直播流都会发生从头播放的问题, 即不管何时播放直播流,都会从直播开头的内容开始播 ...