前端开发：H5直播起航

发现目前

WEB 上主流的视频直播方案有 HLS 和 RTMP，移动 WEB 端目前以 HLS 为主（HLS存在延迟性问题，也能够借助 video.js 采用RTMP），PC端则以 RTMP 为主实时性较好，接下来将围绕这两种视频流协议来展开H5直播主题分享。

1、视频流协议HLS与RTMP

1. HTTP Live Streaming

HTTP Live Streaming（简称 HLS）是一个基于 HTTP 的视频流协议，由 Apple 公司实现，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS，高版本 Android 也增长了对 HLS 的支持。一些常见的客户端如：MPlayerX、VLC 也都支持 HLS 协议。
HLS 协议基于 HTTP，而一个提供 HLS 的服务器须要作两件事：

1.

编码：以

H.263 格式对图像进行编码，以 MP3 或者 HE-AAC 对声音进行编码，最终打包到 MPEG-2 TS（Transport Stream）容器之中；

2.

分割：把编码好的

TS 文件等长切分红后缀为 ts 的小文件，并生成一个 .m3u8 的纯文本索引文件；

浏览器使用的是

m3u8 文件。m3u8 跟音频列表格式 m3u 很像，能够简单的认为 m3u8 就是包含多个 ts 文件的播放列表。播放器按顺序逐个播放，所有放完再请求一下 m3u8 文件，得到包含最新 ts 文件的播放列表继续播，周而复始。整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成，m3u8 必须动态更新，ts 能够走 CDN。一个典型的 m3u8 文件格式以下：

#EXTM3U

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000

gear1/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111

gear2/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444

gear3/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777

gear4/prog_index.m3u8

能够看到

HLS 协议本质仍是一个个的 HTTP 请求 / 响应，因此适应性很好，不会受到防火墙影响。但它也有一个致命的弱点：延迟现象很是明显。若是每一个 ts 按照 5 秒来切分，一个 m3u8 放 6 个 ts 索引，那么至少就会带来 30 秒的延迟。若是减小每一个 ts 的长度，减小 m3u8 中的索引数，延时确实会减小，但会带来更频繁的缓冲，对服务端的请求压力也会成倍增长。因此只能根据实际状况找到一个折中的点。

对于支持

HLS 的浏览器来讲，直接这样写就能播放了：

<video src=”./bipbopall.m3u8″ height=”300″ width=”400″ preload=”auto” autoplay=”autoplay” loop=”loop” webkit-playsinline=”true”></video>

注意：

HLS 在 PC 端仅支持safari浏览器，相似chrome浏览器使用HTML5 video

标签没法播放

m3u8 格式，可直接采用网上一些比较成熟的方案，如： sewise-player

、

MediaElement

、

videojs-contrib-hls

、

jwplayer

。

2. Real Time Messaging Protocol

Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，如今属于 Adobe。这套方案须要搭建专门的 RTMP 流媒体服务如 Adobe Media Server，而且在浏览器中只能使用 Flash 实现播放器。它的实时性很是好，延迟很小，但没法支持移动端 WEB 播放是它的硬伤。

虽然没法在

iOS的H5页面播放，可是对于iOS原生应用是能够本身写解码去解析的, RTMP 延迟低、实时性较好。

浏览器端，

HTML5 video

标签没法播放

RTMP 协议的视频，能够经过 video.js 来实现。

<link href=“http://vjs.zencdn.net/5.8.8/video-js.css” rel=“stylesheet”>

<video id=“example_video_1″ class=“video-js vjs-default-skin” controls preload=“auto” width=“640” height=“264” loop=“loop” webkit-playsinline>

<source src=“rtmp://10.14.221.17:1935/rtmplive/home” type=‘rtmp/flv’>

</video>

<script src=“http://vjs.zencdn.net/5.8.8/video.js”></script>

<script>

videojs.options.flash.swf = ‘video.swf’;

videojs(‘example_video_1′).ready(function() {

this.play();

});

</script>

想要

学习前端开发的同窗，能够加群：

543627393学习哦！