HTML5 视频直播(一)

标签: html5 视频 直播 | 发表时间:2015-04-24 01:35 | 作者:
出处:https://www.imququ.com

前不久工作中遇到了在移动 WEB 端直播视频的需求,研究了一下相关技术,记录一下。

目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前就只有 HLS 能用,我们重点介绍它。

HTTP Live Streaming

HTTP Live Streaming(简称 HLS)是一个基于 HTTP 的视频流协议,由 Apple 公司实现,Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS,高版本 Android 也增加了对 HLS 的支持。一些常见的客户端如:MPlayerX、VLC 也都支持 HLS 协议。

HLS 协议基于 HTTP,非常简单。一个提供 HLS 的服务器需要做两件事:

  • 编码:以 H.263 格式对图像进行编码,以 MP3 或者 HE-AAC 对声音进行编码,最终打包到 MPEG-2 TS(Transport Stream)容器之中;
  • 分割:把编码好的 TS 文件等长切分成后缀为 ts 的小文件,并生成一个 .m3u8 的纯文本索引文件;

浏览器使用的是 m3u8 文件。m3u8 跟音频列表格式 m3u 很像,可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。播放器按顺序逐个播放,全部放完再请求一下 m3u8 文件,获得包含最新 ts 文件的播放列表继续播,周而复始。整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成,m3u8 必须动态更新,ts 可以走 CDN。

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

对于支持 HLS 的浏览器来说,直接这样写就能播放了:

  <video src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"
height="300" width="400"></video>

对于不支持 m3u8 的浏览器,比如 PC / Mac 上的 Chrome,需要借助 Flash 来实现了。网上有一些较为成熟的方案可以直接用,如: Sewise Player(免费)、 JW Player(收费)。

Real Time Messaging Protocol

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

前面提到的 JW Player 能很好的播放采用 RTMP 协议的直播服务。

这次先写这么多,下一篇写一个另类的直播方案。

本文链接: https://www.imququ.com/post/html5-live-player-1.html

--EOF--

推荐: 领略前端技术 阅读奇舞周刊

相关 [html5 视频 直播] 推荐:

HTML5 视频直播(一)

- - JerryQu 的小站
前不久工作中遇到了在移动 WEB 端直播视频的需求,研究了一下相关技术,记录一下. 目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前就只有 HLS 能用,我们重点介绍它. HTTP Live Streaming(简称 HLS)是一个基于 HTTP 的视频流协议,由 Apple 公司实现,Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS,高版本 Android 也增加了对 HLS 的支持.

HTML5视频发展状况

- - HTML5研究小组
注:这篇报告来自 LongTail Video. HTML5已经进入了在线视频市场,这是一件激 动人心的事情,同时也对工业开发者提出了挑战. 随着HTML5规范和各种浏览器的不断改变,LongTail Video花费了大量的时间来弄清楚这一技术的本质,并且在各种浏览器以及设备上测试了播放效果,然后针对HTML5播放效果对产品进行了优化.

搅搅 HTML5 视频这滩浑水(2)HTML5 视频标准

- Richard - Apple4.us
HTML5 标准制定时曾经考虑过指定一种视频格式(包括视频编码、音频编码、容器格式)作为标准的一部分,所有浏览器厂商都必须实现. 理想的视频格式应该具有如下特性:. 解码容易,且要有硬件解码器以供处理能力不足的便携设备使用. 当时考虑过的两个组合是 Theora 视频编码、Vorbis 音频编码、Ogg 容器格式,或者 H.264/AAC/MP4(此时 Google 尚未收购 On2).

[原]视频直播 解决方案

- - banketree
中国好声音2016年开始海选了,某某代理了地方海选,为了更好的推广,决定进行网上直播. 服务端:Srs  (https://github.com/ossrs/srs). 收看直播嘛,只要开源播放器支持rtmp、hls…等等都可以看的,具体的我就不多说了. 作者:banketree 发表于2016/5/17 13:01:10 原文链接.

HTML5视频播放器总结

- - mo-Android
目前HTML5的各种应用在如火如荼的进行着,大家都在不断的尝试,尽管目前还没有优秀的产品出现,但是目前各方面的应用产品在层出不穷. 而我一直关注的HTML5视频播放这一块,应该说在国外是很火的,很多公司或者个人都在这推出自己的HTML5 视频播放器,详细的说明大家看下面这张图片:. 以上HTML5视频播放器,我也是使用了其中的2-3个,感觉比较好的还是Video JS,对我们开发人员来说很方便,网站有详细的文档说明,以及扩展说明等,播放器制作的很不错,很具有商业价值,下面给大家看一个我们使用的样例:.

Firefox 实现 HTML5 音视频 GStreamer 后端

- - LinuxTOY
得益于 GStreamer 后端的实现,未来 Firefox 将可以使用系统内置解码器实现 HTML5 音视频的解码和播放工作. 根据 该 Mozilla Bugzilla 上的追踪,目前用于 HTML5 音视频标签播放的 GStreamer 后端支持已经实现并且得到合并许可. 此举意味着 Firefox 将可以通过 GStreamer 作为中介,使用操作系统已经具备的解码包完成 HTML5 音视频的处理工作,带来了如下好处:.

【转载】HTML5的视频格式之争

- - HTML5研究小组
HTML5的视频格式之争. 你可能听说过,HTML5支持直接播放视频. 但是,你可能不知道的是,这背后涉及到复杂的视频格式之争,甚至还牵涉到所有的电子影像设备. 如果你想知道答案,请不要错过下面这篇精彩的文章. 它是我迄今读到的最清晰易懂的解说. 原文网址: http://ruthsarian.wordpress.com/2010/05/05/the-elephant-in-html5s-room/.

音乐人 Daria Musk 利用 Google+ Hangouts 直播演出视频

- jeff - 谷奥——探寻谷歌的奥秘
独立流行音乐人Daria Musk最近潮流了一把,她和自己的乐队利用Google+的Hangouts视频群聊服务,在自己的工作室里举办了一场小型音乐会的直播. 尽管鉴于Hangouts的限制,只能有10个人观看视频直播,但是咱有山寨的办法突破这个限制,就是10个人里的其中一位拿起自己另外一台电脑上的摄像头,拍摄自己看到的音乐会直播画面,然后在这台新电脑上再组建一个10人的Hangouts视频群聊,这样理论上可以一直接力下去,只不过质量就…….

webvbox :集网络视频、直播、小游戏、音乐欣赏

- tackwell - 笨兔兔
webvbox,是一款集网络视频观看、电视直播、音乐电台、小游戏、网络工具于一体的利器. 最新版本为webvbox 2 beta版本. 主页:http://hi.baidu.com/webvbox/. (这段话只有一个叹号标点,全是逗号,堪比GRE的长句子啦,玩笑. 支持多家视频网站:优酷、土豆、新浪…不用打开网页,想看就看.

谷奥: Google 在首页强推 Google+ Hangouts 演出视频直播

- lili - 谷奥聚合——谷奥主站+谷安 aggregator
尽管这并非黑眼豆豆的Will I. Am第一次利用Google+的Hangouts进行视频群聊了,但却是他第一次出现在Google首页里,这也是Google第一次将一个Google Profile个人链接地址放置在Google首页强推──这可是一个无价的广告位啊. 在直播开始之前的现在,如果你点击那个链接,只能看到黑眼豆豆的Will I.