广泛部署的技术

HTML5 新增的 <video> and <audio> 标签极大地改善了 Web 对多媒体内容的集成能力。它们允许将音频和视频内容无插件的嵌入到 Web 上,并允许开发者与音视频内容进行更加自由的交互。这些标签使得音频和视频内容成为 Web 上的一等公民,就像 Web 上已经存在了二十多年的图片一样。

媒体资源扩展可以让开发人员用 JavaScript 缓冲和生成媒体内容,播放内容可以通过媒体资源扩展被流化、增强以及补充完整,这就使得Web应用程序开发人员创建能够处理自适应流格式和协议的库

对于那些需要对内容进行特定保护的媒体分发,加密媒体扩展使 Web 应用可以渲染基于内容加密模块的加密媒体流。

随着新的HTML5标签允许播放多更多媒体内容,HTML媒体捕捉定义了一个基于标记的机制,使用移动设备上常见的附加相机和麦克风来获取捕捉到的多媒体内容。通过媒体捕捉与媒体流API可以直接处理来自摄像机和麦克风的媒体流

画布2D上下文 API 允许修改图像,这也为编辑视频开启了可能,并为 Web 平台带来了多媒体处理的能力。

特性规范成熟度现有实现
视频播放HTML 5.1中的video 元素 (video element in HTML 5.1)REC

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

音频播放HTML 5.1中的audio 元素 (audio element in HTML 5.1)REC

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

生成媒体内容媒体源扩展™ (Media Source Extensions™)REC

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

受保护的内容播放加密媒体扩展 (Encrypted Media Extensions)REC

已有稳定实现
shipped in chromeshipped in edgeshipped in firefoxshipped in safari

捕捉音频/视频HTML媒体捕捉 (HTML Media Capture)PR
媒体捕捉与媒体流 (Media Capture and Streams)CR

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

图像和视频的分析和修改HTML画布2D上下文 (HTML Canvas 2D Context)REC

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

开发中的技术

<audio> 元素启用的声明性方法之外,Web 音频 API 提供了一个成熟的音频处理API,包括对音频内容低延迟播放的支持。

随着用户拥有的互联设备的增多,这些设备之间协同工作的需求也随之增涨:

  • 呈现 API 使网页可以从移动设备打开并控制位于另一个屏幕上的页面,为多屏 Web 应用程序开辟了道路。
  • 远程回放 API 更专注于控制单独设备上的媒体呈现。
  • 音频输出设备 API 为音频流提供了类似的功能,使 Web 应用能够选择在哪个音频输出设备上播放给定的声音。

Web实时通讯工作组开发了记录来自相机和麦克风的媒体流的API,以及通过程序访问相机并拍照的API

Web实时通讯工作组目前还负责的相关工作如下:

  • 跨设备的点对点通讯
  • 允许用户间实时通讯的P2P音视频流
特性规范成熟度现有实现
音频播放Web 音频 API (Web Audio API)WD

开发中
indevelopment in safari

已有稳定实现
shipped in firefoxshipped in chromeshipped in edge

分布式渲染呈现 API (Presentation API)CR

开发中
indevelopment in firefoxindevelopment in safari

已有稳定实现
shipped in chrome

远程回放 API (Remote Playback API)CR

考虑实现
consideration in firefox

开发中
indevelopment in safari

已有稳定实现
shipped in chrome

音频输出设备 API (Audio Output Devices API)CR

考虑实现
consideration in edge

已有稳定实现
shipped in chrome

捕捉音频/视频流媒体录制 (MediaStream Recording)WD

考虑实现
consideration in edge

已有稳定实现
shipped in chromeshipped in firefox

"MediaStream Image Capture"WD

开发中
indevelopment in firefox

已有稳定实现
shipped in chrome

点对点连接以及音视频流WebRTC 1.0: 浏览器间实时通讯 (WebRTC 1.0: Real-time Communication Between Browsers)CR

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

探索性工作

移动设备常常在锁屏或通知区域有快捷方式来处理主应用程序(例如音乐播放器)的音频输出。底层操作系统负责确定哪些应用程序应该具有媒体焦点。媒体会话规范可以将这些焦点的变化暴露给Web应用。

多设备时计社区组目前正在探索多设备媒体渲染的另一方面:时计对象规范允许在跨设备并独立于网络拓扑的同时,保持视频、音频和其他数据流的同步性。这项努力需要更多有关方面的支持来取得进展。

画中画提案将允许应用程序在一个其他活动之上都可以看到的单独微型窗口中启动和控制视频的呈现。

为了提高呈现API和远程回放API规范实现的互操作性,特别是第一屏和第二屏之间的互操作性,第二屏社区组正在讨论开放屏幕协议的需求。

新的移动屏幕可以通过使用比传统的sRGB色彩空间更广泛的色彩空间提供高分辨率的内容。为了适应宽色域显示,Web的所有图形系统都需要适应这些更广泛的色彩空间。CSS 色彩第四版 提议定义在经典sRGB色彩空间之外的CSS色彩。同样,关于 canvas 的色彩管理的工作将加强对 HTML canvas 的多色彩支持。

WebVR 规范是一个允许应用通过 JavaScript 访问并控制头戴式显示器的底层 API,这是使360°的视频内容能够在虚拟现实头盔和移动设备中使用的关键。

移动设备具有广泛的解码(和编码)能力。为了改进用户体验,并在可用时利用先进的设备功能,媒体提供方需要知道用户的设备特定的编解码器是否可以解码一个给定的分辨率、码率或帧率。播放是否流畅和省电?HDR和宽色域内容是否可以呈现?媒体能力规范定义了一个暴露这些信息的 API,以便替换掉 HTML 中比较基础且不够明确的 isTypeSupported()canPlayType() 功能。

媒体提供者同样也需要一个机制来获取用户所感知的播放质量,以便通过自适应流改变传输内容的质量。媒体播放质量规范最初始媒体资源扩展规范的一部分,可以显示出显示或丢弃的帧的数量。

使用 Canvas API 的视频处理非常耗费 CPU 资源。除了传统的视频处理之外,现代 GPU 通常提供具有直接适用性的先进视觉处理能力(例如脸部和物体识别)。在增强现实应用程序中。形状检测 API 正在探索这个空间。

特性规范小组实现意向
媒体聚焦媒体会话 (Media Session)Web 平台孵化社区组 (Web Platform Incubator Community Group)

考虑实现
consideration in edgeconsideration in firefox

开发中
indevelopment in safari

已有稳定实现
shipped in chrome

分布式渲染时计对象 (Timing Object)多设备时计社区组 (Multi-Device Timing Community Group)

画中画 (Picture in Picture)Web 平台孵化社区组 (Web Platform Incubator Community Group)

开放屏幕协议 (Open Screen Protocol)第二屏社区组 (Second Screen Community Group)

不同色彩空间的渲染CSS 色彩第四版中的与设备相关的色彩系统 (profiled device-dependent colors in CSS Color Module Level 4)CSS 工作组 (CSS Working Group)
canvas 的色彩管理 (Color managing canvas contents)
VR头盔中的渲染WebVRWebVR 社区组 (WebVR Community Group)

已有实验性实现
experimental in chrome

已有稳定实现
shipped in edgeshipped in firefox

媒体处理能力媒体能力 (Media Capabilities)Web 平台孵化社区组 (Web Platform Incubator Community Group)
媒体播放质量 (Media Playback Quality)Web 平台孵化社区组 (Web Platform Incubator Community Group)
视频处理形状检测 API (Shape Detection API)Web 平台孵化社区组 (Web Platform Incubator Community Group)

目前尚未覆盖的工作

色彩管理
为了确保正确呈现高动态范围(HDR)和宽色域的视频,内容提供商需要确定底层设备和浏览器是否有适当的支持。类似地,内容提供者需要一种机制来匹配颜色以混合 HDR 内容和标准动态范围(SDR)内容。Web色彩社区组聚集了来自不同行业的色彩专家,以改善 Web 上的色彩管理的状态。
360°视频渲染的原生支持
虽然已经有可能在 <video> 元素中呈现360°视频,但是对360°视频渲染的集成支持将允许隐藏底层自适应流媒体逻辑到应用的复杂性,让浏览器本身能够优化流媒体和渲染。
Canvas API 提供了执行图像和视频处理的功能,但这些功能受限于其对 CPU 执行的依赖性;现代 GPU 为广泛的操作提供硬件加速,但是浏览器不提供这些操作的钩子。GPU for the Web 社区组正在讨论将 GPU 计算功能开放给 Web 应用的解决方案,这可能最终允许 Web 应用利用 GPU 的能力有效地处理视频流。

不再进行的工作

网络服务发现
网络服务发现API通过提供与本地基于网络的媒体渲染器的集成,如 DLN 及 UPnP 等,为建立多设备操作提供较底层的方法。出于对隐私保护的顾虑及缺乏实现,这项工作没有继续下去。目前的解决方案是用户用代理来处理底层的网络发现,就像在呈现 API远程回放 API 中处理的那样。