[译] HTML5 媒体源扩展（MSE）：把影视制做级别的视频格式带入 Web

英文原文：HTML5 Media Source Extensions: Bringing Production Video To The Web

在过去的十几年，像Flash和Silverlight这样的插件为浏览器开启了丰富的视频功能，壮大了一批视频服务商，如Youtube、Netflix。可是，最近几年的风向却开始转向了HTML5.

大概2年前，W3C组织发布了最终的HTML5标准,其中提供了一组新的HTML元素和APIs,特别是video方面。其中一些旨在为网页增长更多的语义，但不引入新的功能。还有一些扩展了web的可能性，并提升了开发者开发原生web应用可能性，不使用plugins，如Adobe Flash, Microsoft Silverlight 或者 Java。

这对前端开发来讲很是重要，由于Google已经宣布废除NPAPI（一种plugins使用的API），同时Firefox和Microsoft方面都号召要无插件浏览web。虽然这些厂商都还支持Flash player,但淘汰掉它看上去只是时间的问题。此外，对于移动端的浏览器来讲，他们已经跨过了这一步，由于他们原本就不支持插件方式，根本就没有Flash player。

让咱们看一下这些新的HTML5元素以及他们对video方面的影响：

• <canvas>提供了脚本渲染图形，游戏图形等功能。这也叫作Canvas JavaScript API。cancas元素也能够与WebGL结合经过显卡的GPU，来渲染2D和3D图形。

• <video>实现了即开即用的视屏播放，很牛叉是吧。这也让在Web上实现无插件媒体播放变得可行。实际上，各家浏览器厂商好像都赞成用使用一种视频格式-MPEG-4/H.264，这在全部浏览器中已经广泛支持了。不过Opera Mini是一个例外。

• <audio>实现了在Web网页上即开即用的音频播放。与视频播放同样，支持什么样的格式和编码要看不一样的浏览器厂商。

• <track>用于定时文本内容显示，例如视频中的字幕和提示。WebVTT文件是开箱即用的。

其实大多数新的元素已经很熟悉了，并且使用了一些日子了。这时由于全部的主流浏览器早就开始支持了。虽然如今规范已经稳定，但W3C仍是有不少工做要作。

对于我来讲，最重要的标准就是W3C还在制定中的媒体源扩展标准（MSEs），该标准如今已经进入了“备选推荐”状态。这些JavaScript API将容许咱们为<video>、<audio>或其余元素解析媒体流，从而实现自适应码率的标准，好比只靠HTML5和JavaScript开发的MPEG-DASH。

还有一个值得关注的是加密媒体扩展标准,其支持用原生HTML5和JavaScript开发播放加密视频。不过，目前这还仅仅是个研究草案，还须要一点时间才能发布。

咱们很是欢迎新的标准，期待着不再用安装各色Flash播放器或者插件，只开发一个Web版本的就能够在任何设备上享受多媒体内容的一天。

为何是 MPEG-DASH?

让我先简单的介绍如下 MPEG-DASH格式以及为何会被用在HTML5中。MPEG-DASH（DASH是经过HTTP的动态自适应流的缩写）是由MPEG和ISO（ISO / IEC 23009-1）批准的国际，浏览器厂商独立标准。早先的自适应流技术（例如Apple HLS，Microsoft Smooth Streaming和Adobe HDS）由软件公司独立发布，仅支持自身的流媒体服务标准或者播放客户端。基于某一家公司标准来推广显然是不可取的，所以标准化组织推进各家厂商进行协调，这才有了在2012年推出的MPEG-DASH。

再看一下MPEG-DASH的目标和优势：

• 在视频播放期间减小启动延迟以及缓冲和停顿。

• 持续适应客户端的带宽状况。

• 经过客户端开发的流处理逻辑，来达到最好的扩展性和灵活性。

• 能够配合CDN下降成本，并使用代理以及缓存服务。

• 经过使用HTTP有效地绕过NAT和防火墙。

• 经过信令、分发以及同源多并发的DRM方案来实现一种通用加密方法。

• 实现流媒体简单的拼接，以及广告内容在指定位置插入功能。

• 更好的支持“特效模式”

• 其余

近几年，MPEG-DASH已经集成到新的标准化工做中，好比HTML5的MSE，MSE能够经过HTML5的video和audio标签实现DASH播放，以及HTML5加密多媒体格式扩展，即在浏览器中播放用DRM加密的多媒体内容。此外，MPEG-DASH中的DRM加密方式能够很好的协调其余的通用加密系统，如MPEG-CENC。而且MPEG-DASH还能够很容易的经过Hybrid方式的广播宽带电视集成到不一样的只能电视平台上，如HbbTV 1.5 和 HbbTV 2.0。

此外，MPEG-DASH标准的使用方法已经被DASH行业社区以及DASH-AVC/264组织所推荐，同时，像DASH-HEVC/265这样前瞻性的计划，也已经推荐使用MPEG-DASH结合H.265/HEVC这样的方式。

视频流标准的生态圈 (Image: Bitcodin) (大图点击)

今天，MPEG-DASH已经愈来愈多的被部署，而且随着Netflix以及Google这样的服务商的不断升级，他们都已经开始转向MPEG-DASH这一标准。依靠这两个主要的流量来源，MPEG-DASH先进已占整个互联网总流量的50%。

MSEs是如何工做的?

如今，让咱们深刻的去了解一下MSEs，以及开发者如何使用他们。MSEs是HTMLMediaElement元素的扩展规范，经过它可让JavaScript有能力去动态处理video和audio 这样的媒体流。这种功能在过去是不可能的，由于之前这些媒体标签只能加载MP4这样的完整文件。这种方法也被称为渐进式流处理，或者渐进式下载，由于媒体文件的下载和播放并行工做，开启了pseudo-streaming模式。

但是，这只带来了不好的搜索能力，而且根本没有办法来实现根据用户的带宽情况调整视频音频的清晰度。经过由JavaScript处理过的媒体数据，再输入给video和audio标签，这样开发者动态适应视频数据对应上用户的环境，从而提高媒体播放的体验。

如上所述，MPEG-DASH是MSEs的一种媒体传输格式的实现。那让咱们了解一下基于HTML5 MSE的视频播放器的工做步骤：

1. 下载并解析配置文件，MPEG-DASH中使用MPD文件（HLS中使用m3u8文件），配置文件中提供了视频流的详细信息，诸如视频流的码率质量种类，分辨率数量，音频数据数量，字幕数量等，以及媒体文件数据块的名字，源服务器或者CDN的信息。

2. 评估客户端设备上的可用带宽，选择适当的视频质量以实现无缓冲流，截止在用JavaScript来下载后续的媒体片断。

3. JavaScript代码将下载的媒体片断移交到MSE的缓存中处理。

4. 底层硬件拿到了这部分缓存，就开始进行解码以及渲染视频，把结果返回给video标签。

这就是一种Netflix和Youtube都在使用的基于HTML5的自适应媒体播放。像dash.js 和 Bitdash HTML5 player都是现今至关成熟的解决方案，这就让开发者和视频内容商很轻松的切换到HTML5的自适应码率播放方案，同时DASH-IF项目是开源的。

MPEG-DASH的支持的格式所有都来自如x264 和 MP4Box这样的开源工具，也有部分来自一些商业编码服务，如 Bitcodin。

不过这样，MSEs并不只限支持MPEG-DASH。有愈来愈多的项目（如hls.js）和播放器（如Bitdash）都已经实现了经过H5的MSEs方式来支持Apple的HLS格式。他们经过多路转换方式把HLS媒体片断（即MPEG2-TS内容）转成HTML5 和 MPEG-DASH能够处理的符合ISO的媒体文件格式。

DRM加密媒体扩展

主要变化发生在DRM市场，因为Chrome 和 Firefox中NPAPI插件的减小，致使向Silverlight这种，DRM系统的领先者开始失去优点。这使得大多数的专业内容供应商处境变得十分困难，由于他们必须转换新技术，找到一个面向将来的新解决方案。

专业流媒体发布商将没法依靠微软的PlayReady DRM技术在PC和安卓设备上的Chrome、火狐来加密本身的内容。他们必须从新评估他们的内容保护和流平台战略，而且找到一种新的解决方案，快速切换过去。

对许多视频服务商来讲，MPEG-DASH已是最好的技术选型。DASH项目以愈来愈快的速度推出，使用Widevine DRM的MES和EME看起来是最可行的替代方案。此外，MPEG-CENC能够支持不一样的DRM系统都只支持同一版本的加密内容，而且，EME的内容是基于MSE的MPEG-DASH内容格式。

所以，不一样的DRM系统组合，如用于Chrome和安卓的Widevine Modular，用于IE和Edge的Microsoft PlayReady，还有用于Firefox的Adobe Primetime。因为每个平台都要有一个版本，这使得内容供应商有了更多的动机去转向MPEG-DASH做为国际标准，由于它对流媒体、DRM以及CDN都具备更好的灵活性。

浏览器对于MSEs和EMEs的支持状况

浏览器厂家在经历了不少年对HTML5以及MSE的缓慢适配以后，咱们很高兴的看到现在大多数的主流浏览器都已经支持了。这样的过程，也一样会发生在EME身上，虽然目前各家厂商都有本身的DRM系统，这让目前的DRM的生态系统变得有点复杂。

尽管如此，要覆盖99%的用户，咱们须要作一个视频流兼容设置，这样也可让那些不支持MSE的浏览器也能顺利播放，好比一些旧版本的浏览器，和iOS上的Safari。老的浏览器可使用Flash播放器来提供服务，Flash播放器是能够直接播放MSE的MPEG-DASH格式内容的，如Bitdash player播放器。为了支持iOS设备，咱们必需要使用Apple的HLS流媒体格式，这是苹果在HTML5中强推的另外一种方式。Apple并不喜欢支持开放标准（如MSE），不过Mac OSX上的Safari仍是支持MSE的。

下面的列表介绍了如今主流的浏览器对MSE和EME支持的现状，由Bitmovin提供:

Environment	Player Technology	Media	DRM
Chrome	HTML5 MSE	MPEG-DASH	Widevine Modular
Internet Explorer 11 Windows 8.1	HTML5 MSE	MPEG-DASH	PlayReady
Internet Explorer (other)	Flash, Silverlight	MPEG-DASH	ClearKey, PlayReady
Edge	HTML5 MSE, HTML5 HLS	MPEG-DASH, HLS	PlayReady, AES HLS
Firefox	HTML5 MSE	MPEG-DASH	Adobe
Safari	HTML5 MSE, HTML5 HLS	MPEG-DASH, HLS	Fairplay, AES
Android: Web > v4.1	HTML5 MSE, HTML5 HLS	MPEG-DASH, HLS	Widevine Modular
Android: app	Google’s Exoplayer	MPEG-DASH, HLS	Widevine Modular
iOS: web	HTML5 HLS	HLS	AES
iOS: app	native HLS support	HLS	Fairplay, AES
smart TV	Native MPEG-DASH support or HTML5 MSE (e.g. Tizen)	MPEG-DASH or HLS	Device-dependent
HbbTV (1.5)	native MPEG-DASH support	MPEG-DASH	device-dependent

HTML5 Video的将来

新的媒体解码器正在进入市场，这使得视频压缩效率变得更高，这对于那些高质量的格式（如4K和UHD）以及那些移动端设备的流媒体尤其重要。最多见的编解码器是HEVC/h.265，它是十几年至今一直选用的默认编解码格式（固然若是他的专利确定不发生变化）。同时他还能够利用浏览器内置的MSEs进行播放，并使用MPEG-DASH做为流格式，这代表了这种开发标准的灵活性。

视频播放器的开发者值须要启动一种简单的适配，好比在建立SourceBuffer时改变编解码器的属性。而且，浏览器底层已经集成了HEVC解码（最有多是硬件解码器），那么你就能够在HTML5中观看基于HEVC MPEG-DASH的流媒体。咱们已经成功在在一些浏览器中测试过了，好比Microsoft Edge，其已经支持了HEVC；并且Google最近声称它的Chromium browser也会支持。

然而，HEVC还不能为绝大多数互联网视频资源所用，并且也只有很少的一部分设备能支出对其的硬解码。固然，它并非世界上惟一的一种编解码器。VP9，一种开放的免版税的视频编码格式（VP8的继任者），它旨在提供更好的编码效率，如今诸如Google Chrome和Microsoft Edge这些主流浏览器已经支持VP9，而且VP9能够很好的与MSE兼容。不过，咱们并不能预见将来那些编解码器会成为咱们的主流。但无论是VP8/9, AVC 仍是 HEVC，MSEs和MPEG-DASH都已经准备好了！

如今，360度视频即将普及，这能够很是直观的经过HTML5来观看。开发者能够利用MSE的流自适应功能来实现360度视频的体验，只须要结合一些JavaScript代码或WebGL渲染层。最近，我作了一个小演讲,是关于如何用HTML5，JavaScript，DASH以及WebGL实现一套跟Netflix服务相似的虚拟现实系统。

小结

我但愿这篇文章可让你大概的了解一下网络视频的现状和将来。MSE跟EME是网络视频迈向开放生态系统的重要一步，他们取代了Flash和Silverlight。此外，HTML5技术已经被现现在各类平台所选用，包括桌面端，移动端，还有智能电视平台。

结合像MPEG-DASH这样的流媒体标准，视频内容供应商还能够在不一样平台和设备之间拥有统一的视频解决方案。他们能够经过自适应流媒体格式来防止发生缓冲，减小视频加载时间，提升用户观看体验，并根据每个用户自身的带宽和设备状况提供最匹配的视频画质。