HTML5 媒体源扩展：将制作视频带到 Web

在过去十年中，Flash 和 Silverlight 等插件在浏览器中实现了丰富的视频消费，为 YouTube 和 Netflix 等流行服务提供了动力。 然而，这种方法在过去几年中已经转向 HTML5。

大约两年前，W3C 发布了 HTML5 规范的最终建议，其中包含一组新的 HTML 元素和 API，尤其是视频。 其中一些旨在网页中的更多语义，但不引入新功能。 其他扩展了 Web 的可能性并增强了开发人员的可能性，而无需诸如 Adob​​e Flash、Microsoft Silverlight 或 Java 之类的插件。

关于 SmashingMag 的进一步阅读：

• 使用 Web 技术提供原生体验
• 为 HTML5 详细信息元素制作完整的 Polyfill
• 渐进式 Web 应用程序初学者指南
• HTML5 标志：你怎么看？

这一点尤其重要，因为例如，谷歌已经宣布删除 NPAPI（这些插件使用的 API），Firefox 也是如此，微软也提倡无插件浏览。 尽管这些供应商仍然提供 Flash 播放器，但他们不提供可能只是时间问题。 此外，移动设备上的浏览器更进一步，因为它们中的大多数不支持插件并且没有 Flash 播放器。

让我们看看一些新的 HTML5 元素以及它们对视频的改进：

• <canvas>提供脚本来渲染图形、游戏图形等。 这有时被称为 Canvas JavaScript API。 canvas元素也可以与 WebGL 一起使用，使用显卡的 GPU 渲染 2D 和 3D 图形。
• <video>支持开箱即用的视频播放，非常棒。 这最终使网络上的无插件多媒体成为现实。 事实上，浏览器供应商似乎同意一种格式——MPEG-4/H.264，现代浏览器普遍支持这种格式，Opera Mini 除外。
• <audio>可以在网页上播放开箱即用的音频内容。 与视频一样，支持哪些容器格式和编解码器由浏览器供应商决定。
• <track>可用于定时文本轨道，例如视频中的字幕和标题。 开箱即用支持 WebVTT 文件。

大多数新元素已经在 HTML5 视频播放器代码中为人所知并使用了一段时间，因为它们已在所有现代浏览器中实现。 规格稳定。 尽管如此，W3C 还有很多工作要做。

对我来说，W3C 正在制定的最重要的标准是“媒体源扩展”（MSE）标准，目前它的状态是“候选推荐”。 此 JavaScript API 允许我们为<video> 、 <audio>和其他元素生成媒体流，从而支持纯 HTML5 和 JavaScript 中的 MPEG-DASH 等自适应流媒体标准。

另一个有趣的是“加密媒体扩展”标准，它允许播放 HTML5 和 JavaScript 中的受保护内容。 然而，这目前是一个“工作草案”，需要一段时间才能完成。

我们欢迎新标准，并期待我们不再需要 Flash 播放器或插件的时代，那时多媒体几乎可以通过单一实现在任何设备上观看。

为什么选择 MPEG-DASH？

让我们研究一下 MPEG-DASH 流格式以及它在 HTML5 中使用的原因。 MPEG-DASH（DASH 是基于 HTTP 的动态自适应流的缩写）是 MPEG 和 ISO (ISO/IEC 23009-1) 批准的独立于供应商的国际标准。 以前的自适应流媒体技术（例如 Apple HLS、Microsoft Smooth Streaming 和 Adob​​e HDS）由供应商发布，对独立于供应商的流媒体服务器或播放客户端的支持有限。 依赖于供应商的情况显然是不可取的，因此标准化机构开始了协调过程，导致 2012 年批准了 MPEG-DASH。

简而言之，这些是 MPEG-DASH 的目标和好处：

• 减少视频播放期间的启动延迟以及缓冲和停顿。
• 继续适应客户端的带宽情况。
• 使用基于客户端的流逻辑来实现最高的可扩展性和灵活性。
• 使用现有且具有成本效益的基于 HTTP 的 CDN、代理和缓存。
• 通过使用 HTTP 有效地绕过 NAT 和防火墙。
• 通过来自同一文件的多个并发 DRM 方案的信令、交付和使用实现通用加密。
• 启用简单的拼接和（有针对性的）广告插入。
• 有效支持“技巧模式”。
• 以及更多！

近年来，MPEG-DASH 已被集成到新的标准化工作中——例如 HTML5 MSE，它可以通过 HTML5 的video和audio标签实现 DASH 播放，以及 HTML5 加密媒体扩展，它可以在 Web 浏览器中实现受 DRM 保护的播放. 此外，使用 MPEG-DASH 的 DRM 保护通过 MPEG-CENC（用于通用加密）在不同系统之间进行协调； 通过与混合广播宽带电视（HbbTV 1.5 和 HbbTV 2.0）集成，可以在不同的智能电视平台上播放 MPEG-DASH。

此外，围绕 DASH 行业论坛及其 DASH-AVC/264 建议的行业努力以及前瞻性举措（例如关于使用的 DASH-HEVC/265 建议）简化了 MPEG-DASH 标准的使用MPEG-DASH 中的 H.265/HEVC。

如今，MPEG-DASH 的部署越来越多，Netflix 和 Google 等服务加速了这些服务的发展，这些服务最近已切换到这一新标准。 有了这两个主要的流量来源，MPEG-DASH 已经占到 Internet 总流量的 50%。

MSE如何运作？

现在让我们看看 MSE 的详细信息以及开发人员如何使用它们。 MSE 是扩展HTMLMediaElement以允许 JavaScript 为audio和video标签动态构建媒体流的规范。 这在以前是不可能的，因为这些标签只能访问完整的文件（即 MP4 文件）。 这种方法也称为渐进式流式传输或渐进式下载，因为媒体文件是同时下载和播放的，从而实现了伪流式传输。

然而，这带来了较差的搜索能力，并且无法使视频和音频质量适应用户的带宽情况。 通过在 JavaScript 中构建媒体流作为audio和video标签的输入，开发人员现在可以动态地使媒体流适应用户的上下文，从而改善流媒体体验。

如前所述，MPEG-DASH 是 MSE 选择的流格式。 那么，让我们看一下构建基于 HTML5 MSE 的视频播放器所需的步骤：

1. 下载并解析清单文件——在 MPEG-DASH 中称为 MPD——它描述了视频流的详细信息，例如视频流的质量级别和分辨率的数量、音频语言和字幕，以及媒体片段的名称和基于 HTTP 的源服务器或 CDN 上的文件。
2. 估计客户端设备上的可用带宽，选择合适的视频质量以实现无缓冲流式传输，并以 JavaScript 下载媒体片段。
3. 将下载的媒体片段移交给 JavaScript 中的 MSE 缓冲区。
4. 通过video标签解码和渲染视频，通常在硬件中。

这就是 Netflix 和 YouTube 使用的基于 HTML5 的自适应流媒体播放器的工作方式。 那里已经有相当成熟的解决方案，这使得开发人员和内容提供商可以轻松地切换到 HTML5 中的自适应比特率流，例如 DASH-IF 开源项目 dash.js 和 Bitdash HTML5 播放器。

MPEG-DASH 内容生成也很简单，并且得到 x264 和 MP4Box 等开源工具以及 Bitcodin 等商业编码服务的支持

然而，MSE 的使用不限于 MPEG-DASH。 越来越多的项目（包括 hls.js）和播放器（包括 Bitdash）使用 MSE 支持 Apple 在 HTML5 中的 HLS 格式。 他们通过将 HLS 媒体段（MPEG2-TS 容器）多路复用到 HTML5 和 MPEG-DASH 所需的 ISO 基本媒体文件格式来实现这一点。

DRM 的加密媒体扩展

目前 DRM 市场正在发生重大变化，这是由于 NPAPI 插件（例如 Silverlight）即将从 Chrome 和 Firefox 中淘汰导致领先的 DRM 系统 PlayReady 下降所致。 这使几乎所有优质内容提供商都处于困境，因为他们将不得不转换技术并找到面向未来的解决方案。

高级流媒体出版商将无法依靠 Microsoft 的 PlayReady DRM 来保护其在 PC 和 Android 设备上的 Chrome 和 Firefox 中的内容。 他们将不得不重新评估他们的内容保护和流媒体平台战略，并且必须找到一个面向未来的解决方案，然后很快转换技术。

对于许多内容提供商而言，MPEG-DASH 已成为首选技术。 DASH 项目的推出速度越来越快，带有 Widevine DRM 的 MSE 和加密媒体扩展 (EME) 看起来是最可行的替代方案。 此外，MPEG-CENC 可以支持仅具有一个受保护内容版本的单独 DRM 系统，并且 EME 基于 MPEG-DASH 内容的 MSE。

因此，不同 DRM 系统的组合——例如，用于 Chrome 和 Android 的 Widevine Modular，用于 Internet Explorer 和 Edge 的 Microsoft PlayReady，以及用于 Firefox 的 Adob​​e Primetime——为内容的一个版本提供了额外的动力来转向 MPEG -DASH 作为一种国际标准，因为它具有流媒体、DRM 和 CDN 的灵活性。

对 MSE 和 EME 的浏览器支持

经过几年浏览器供应商缓慢采用 HTML5，尤其是 MSE，我们现在看到他们中的大多数都支持它。 这也适用于 EME，尽管在这种情况下，每个供应商都在使用不同的 DRM 系统，并且生态系统更加差异化。

但是，要覆盖 99% 的用户，我们必须有一个视频流设置，它还支持不支持 MSE 的浏览器，特别是旧的浏览器版本和 iOS 上的 Safari。 使用基于 Flash 的播放器可以轻松地为旧浏览器提供服务，该播放器可以播放 MSE 使用的相同 MPEG-DASH 内容，如 Bitdash 播放器所示。 为了支持 iOS 设备，我们必须使用 Apple 的流格式，称为 HLS，Apple 强制要求 HTML5。 Apple 不支持诸如 MSE 之类的开放标准，尽管它们在 OS X 上的 Safari 上受支持。

以下矩阵概述了当今跨浏览器和平台的 MSE 和 EME 支持状态（由 Bitmovin 提供）：

HTML5 视频的未来

新的媒体编解码器正在推向市场，使视频压缩更加高效，这对于 4K 和 UHD 等更高质量的格式以及流式传输到移动设备尤其重要。 最常见的编解码器是HEVC/h.265 ，它可能是几年后的默认编解码器（如果专利情况没有搞砸的话）。 它还将利用浏览器内置的 MSE 进行播放，并使用 MPEG-DASH 作为流格式，这显示了这种开放标准的灵活性。

视频播放器的开发者只需要进行一些简单的适配，比如在创建 SourceBuffer 时更改编解码器的属性； 并且，如果底层浏览器支持 HEVC 解码（很可能由硬件解码器完成），那么您将能够在 HTML5 中观看您的 HEVC MPEG-DASH 流！ 我们已经成功地测试了带有 HEVC 支持的浏览器，例如 Microsoft Edge。 此外，谷歌最近宣布在其 Chromium 浏览器中提供支持。

尽管如此，HEVC 还不能用于绝大多数互联网视频资产，只有少数设备能够对其进行解码。 而且，当然，它不是镇上唯一的编解码器。 开放且免版税的视频编码格式 VP9（VP8 的继任者）旨在具有更高的编码效率，并且已经被 Google Chrome 和 Microsoft Edge 等流行浏览器支持，并且该编解码器也与 MSE 兼容。 但是，我们无法预见哪些编解码器会进入我们的日常流媒体程序。 但无论是 VP8/9、AVC 还是 HEVC，MSE 和 MPEG-DASH 都已准备就绪！

一个即将到来的趋势是 360 度视频，它在 HTML5 中使用起来非常简单。 开发人员可以利用 MSE 的自适应流式支持，只需添加 JavaScript 或 WebGL 渲染层即可在其之上获得 360 度体验。 最近，我讨论了这个话题，以及如何使用 HTML5、JavaScript、DASH 和 WebGL 为虚拟现实构建类似 Netflix 的服务。

结论

我希望这篇文章能让您对网络视频的现状和未来有一个很好的概述。 MSE 和 EME 是朝着网络视频开放标准生态系统迈出的一大步，取代了 Flash 和 Silverlight 等插件。 此外，HTML5 正在成为当今多平台世界的首选平台，包括桌面、移动和智能电视环境。

除了 MPEG-DASH 等流媒体标准外，内容提供商还可以拥有跨平台和设备的统一视频解决方案。 它们可以通过自适应流格式增强用户体验，从而防止缓冲、减少加载时间并为每个用户的带宽和设备情况提供最佳质量。