让Chrome看不了WWDC直播的HLS技术详解

Requirements: Live streaming uses Apple’s HTTP Live Streaming (HLS) technology. HLS requires an iPhone, iPad, or iPod touch with Safari on iOS 7.0 or later, a Mac with Safari 6.0.5 or later on OS X v10.8.5 or later, or a PC with Microsoft Edge on Windows 10. Streaming via Apple TV requires an Apple TV (2nd or 3rd generation) with software 6.2 or later or an Apple TV (4th generation).

HLS （HTTP Live Streaming）, 是由 Apple 公司实现的基于 HTTP 的媒体流传输协议。Apple 的全系列产品支持，由于 HLS 是苹果提出的，所以在 Apple 的全系列产品包括 iphone、 ipad、safari 都不需要安装任何插件就可以原生支持播放 HLS，现在Android 也加入了对 HLS 的支持。但PC端目前除了Microsoft Edge外，Chrome、Firefox等浏览器均不支持该协议的播放。

HLS跟 DASH 协议的原理非常类似，通过将整条流切割成一个小的可以通过 HTTP 下载的媒体文件，然后提供一个配套的媒体列表文件给客户端，让客户端顺序地拉取这些媒体文件播放, 来实现看上去是在播放一条流的效果。HLS 目前广泛地应用于点播和直播领域。
<video src="example.m3u8" controls></video>

在HTML5页面上使用HLS

<video controls>
<source src=“example.m3u8”></source>
</video>

HLS 的优势

客户端支持简单，只需要支持 HTTP 请求即可，HTTP 协议无状态，只需要按顺序下载媒体片段即可。
使用 HTTP 协议网络兼容性好， HTTP 数据包也可以方便地通过防火墙或者代理服务器，CDN 支持良好。
自带多码率自适应，Apple 在提出 HLS 时，就已经考虑了码流自适应的问题。

HLS 的劣势

相比 RTMP 这类长连接协议，延时较高，难以用到互动直播场景。
对于点播服务来说，由于 TS 切片通常较小，海量碎片在文件分发、一致性缓存、存储等方面都有较大挑战。
虽然HLS存在明显劣势，又拍云对此也有相应的解决方案。

HLS 协议详解

上图可以看出，HLS总共有三个部分: Serve、CDN、Client。HLS 协议的主要内容是关于 M3U8 这个文本协议，其实生成与解析都非常简单，示例如下：

△简单的 Media Playlist

△包含多种比特率的 Master Playlist

HLS优化技术

由于客户端每次请求 TS 或 M3U8 有可能都是一个新的连接请求，所以,我们无法有效的标识客户端，一旦出现问题，基本无法有效的定位问题，因此一般工业级的服务器都会对传统的 HLS 做一些改进。本文主要介绍又拍云的 HLS+。
HLS+ ，又称为流式 HLS 技术，是将标准的 HLS 进行流式处理，大幅度降低标准 HLS 延迟，H5 端直播兼容性更好，且具有回源量小、系统简单、排错容易、防盗链、避免 HLS 404 等优势。
1、Variant HLS
首先，下载一条又拍云的 M3U8 文件：
wget http://uplive.bo.upaiyun.com/...
然后，打开下载得到的 playlist 文件：