移动 Web 应用路线图 >

媒体

2020年9月

这份文档所列出的全部特性是 Web 向一个既服务于生产也服务于消费的综合性多媒体平台演进的出发点。W3C 媒体与娱乐兴趣组所识别出来的那些日益涌现的促进 Web 与媒体世界融合的需求不断推动着相关技术的发展。移动设备在用户的电视体验中也逐渐扮演着越来越重要的作用。当用户在使用手机观看电视节目时，移动设备可以提供第二屏的体验，辅助用户搜索更多信息，或者与电视节目进行互动。

广泛部署的技术

音频/视频播放

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

生成媒体内容

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

受保护的内容播放

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

捕捉音频/视频

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

图像和视频的分析和修改

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

特性	规范 / 小组	现有实现选择浏览器… Chrome Microsoft Edge Firefox Safari / WebKit 百度浏览器 Opera QQ浏览器三星浏览器 UC浏览器
音频/视频播放	HTML标准中的video 元素 (video element in HTML Standard) Web 超文本应用技术工作小组 (WHATWG)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Can I use 在 Microsoft Edge（桌面）中已有稳定实现。来源：Can I use 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Can I use 在百度浏览器（移动）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use
音频/视频播放	HTML标准中的audio 元素 (audio element in HTML Standard) Web 超文本应用技术工作小组 (WHATWG)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Can I use 在 Microsoft Edge（桌面）中已有稳定实现。来源：Can I use 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Can I use 在百度浏览器（移动）中已有稳定实现。来源：Can I use 在 Opera（桌面, 移动）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use
生成媒体内容	媒体源扩展™ (Media Source Extensions™) 媒体工作组 (Media Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Can I use 在百度浏览器（移动）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use
受保护的内容播放	加密媒体扩展 (Encrypted Media Extensions) 媒体工作组 (Media Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use
捕捉音频/视频	HTML媒体捕捉 (HTML Media Capture) 设备与传感器工作组 (Devices and Sensors Working Group)	已有稳定实现: 在 Chrome（移动）中已有稳定实现。来源：Can I use 在 Safari（移动）中已有稳定实现。来源：Can I use 在百度浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use
捕捉音频/视频	媒体捕捉与媒体流 (Media Capture and Streams) Web 实时通讯工作组 (WebRTC Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Can I use 在 Opera（桌面, 移动）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use 已有实验性实现: 在百度浏览器（移动）中已有实验性实现。特性需要使用浏览器引擎前缀。来源：Can I use
图像和视频的分析和修改	HTML标准中的The 2D rendering context (The 2D rendering context in HTML Standard) Web 超文本应用技术工作小组 (WHATWG)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Can I use 在百度浏览器（移动）中已有稳定实现。来源：Can I use 在 Opera（桌面, 移动）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use

开发中的技术

音频播放

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

分布式渲染

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

呈现 API 使网页可以从移动设备打开并控制位于另一个屏幕上的页面，为多屏 Web 应用开辟了道路。
远程回放 API 更专注于控制单独设备上的媒体呈现。
开放屏幕协议是一套允许控制和接收设备以可互操作的方式实现呈现 API 和远程回放 API 的网络协议。
画中画规范将允许应用在一个其他活动之上都可以看到的单独微型窗口中启动和控制视频的呈现。
音频输出设备 API 为音频流提供了类似的功能，使 Web 应用能够选择在哪个音频输出设备上播放给定的声音。

媒体处理能力

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

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

媒体聚焦

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

自动播放

为了在移动设备上节约流量、内存和电池使用，并防止可能不需要的媒体播放，浏览器已经制定了自动播放策略，并且可能拒绝自动播放媒体内容。自动播放策略检测规范是一个让应用知道某个媒体元素的自动播放是否会成功的早期提案。

VR头盔中的渲染

WebXR 设备 API 规范是一个允许应用通过 JavaScript 访问和控制头戴式显示器，并创建引人注目的虚拟现实（VR）/增强现实（AR）体验的底层 API，这是使360°的视频内容能够在虚拟现实头盔和移动设备中使用的关键。

捕捉音频/视频

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

点对点连接以及音视频流

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

跨设备的点对点通讯，
内容提示允许Web应用提示媒体内容的类型（例如语音、音乐、电影、屏幕录制等），以便用户代理可以优化编码或处理参数，
可伸缩视频编码（SVC），允许Web应用配置编码参数以利用SVC（视频流的子集可以从丢弃较大的视频流中的数据包派生而来），从而使从单一初始视频流向多个目标提供不同播放质量的视频更加容易，
允许用户间实时通讯的P2P音视频流。

特性	规范 / 小组	现有实现选择浏览器… Chrome Microsoft Edge Firefox Safari / WebKit 百度浏览器 Opera QQ浏览器三星浏览器 UC浏览器
音频播放	Web 音频 API (Web Audio API) 音频工作组 (Audio Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面）中已有稳定实现。来源：Chrome Platform Status 在百度浏览器（移动）中已有稳定实现。来源：Can I use 在 Opera（桌面, 移动）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use 已有实验性实现: 在 Safari（移动）中已有实验性实现。特性需要使用浏览器引擎前缀。来源：Can I use
分布式渲染	呈现 API (Presentation API) 第二屏工作组 (Second Screen Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status 开发中: 在 Firefox（桌面）中开发中。来源：Chrome Platform Status
	远程回放 API (Remote Playback API) 第二屏工作组 (Second Screen Working Group)	已有稳定实现: 在 Chrome（移动）中已有稳定实现。来源：Chrome Platform Status 开发中: 在 Safari（桌面）中开发中。来源：Chrome Platform Status 考虑实现: 在 Firefox（桌面）中考虑实现。来源：Chrome Platform Status
	开放屏幕协议 (Open Screen Protocol) 第二屏工作组 (Second Screen Working Group)
	画中画 (Picture-in-Picture) 媒体工作组 (Media Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status 在 Firefox（桌面）中已有稳定实现。来源：Can I use 考虑实现: 在 Firefox（移动）中考虑实现。来源：User feedback 在 Safari（桌面, 移动）中考虑实现。来源：User feedback 在 Opera（桌面）中考虑实现。来源：User feedback
	音频输出设备 API (Audio Output Devices API) Web 实时通讯工作组 (WebRTC Working Group)	已有稳定实现: 在 Chrome（桌面）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status 在 Opera（桌面, 移动）中已有稳定实现。来源：MDN Browser Compatibility Data 已有实验性实现: 在 Firefox（移动）中已有实验性实现。特性需要开启浏览器实验性功能。特性支持可能不完整。来源：MDN Browser Compatibility Data
媒体处理能力	媒体能力 (Media Capabilities) 媒体工作组 (Media Working Group)	已有实验性实现: 在 Chrome（桌面, 移动）中已有实验性实现。特性需要开启浏览器实验性功能。特性支持可能不完整。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有实验性实现。特性需要开启浏览器实验性功能。特性支持可能不完整。来源：Chrome Platform Status 考虑实现: 在 Firefox（桌面）中考虑实现。特性支持可能不完整。来源：Chrome Platform Status
媒体处理能力	媒体播放质量 (Media Playback Quality) 媒体工作组 (Media Working Group)
媒体聚焦	媒体会话标准 (Media Session Standard) 媒体工作组 (Media Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status 开发中: 在 Safari（桌面）中开发中。来源：Chrome Platform Status 考虑实现: 在 Firefox（桌面）中考虑实现。来源：Chrome Platform Status
自动播放	自动播放策略检测 (Autoplay Policy Detection) 媒体工作组 (Media Working Group)
VR头盔中的渲染	WebXR 设备 API (WebXR Device API) 沉浸式Web工作组 (Immersive Web Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status 在 Opera（桌面）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 已有实验性实现: 在 Firefox（桌面, 移动）中已有实验性实现。特性需要开启浏览器实验性功能。来源：Can I use Polyfills webxr-polyfill
捕捉音频/视频	流媒体录制 (MediaStream Recording) 设备与传感器工作组 (Devices and Sensors Working Group) Web 实时通讯工作组 (WebRTC Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Opera（桌面, 移动）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 已有实验性实现: 在 Safari（桌面, 移动）中已有实验性实现。特性需要开启浏览器实验性功能。来源：Can I use
捕捉音频/视频	"MediaStream Image Capture" 设备与传感器工作组 (Devices and Sensors Working Group) Web 实时通讯工作组 (WebRTC Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status 开发中: 在 Firefox（桌面）中开发中。来源：Chrome Platform Status
点对点连接以及音视频流	WebRTC 1.0: 浏览器间实时通讯 (WebRTC 1.0: Real-time Communication Between Browsers) Web 实时通讯工作组 (WebRTC Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use 已有实验性实现: 在百度浏览器（移动）中已有实验性实现。特性需要使用浏览器引擎前缀。来源：Can I use 在 QQ浏览器（移动）中已有实验性实现。特性需要使用浏览器引擎前缀。来源：Can I use 在三星浏览器（移动）中已有实验性实现。特性需要使用浏览器引擎前缀。来源：Can I use
	MediaStreamTrack 内容提示 (MediaStreamTrack Content Hints) Web 实时通讯工作组 (WebRTC Working Group)	已有实验性实现: 在 Chrome（桌面, 移动）中已有实验性实现。特性需要开启浏览器实验性功能。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有实验性实现。特性需要开启浏览器实验性功能。来源：Chrome Platform Status
	WebRTC 可伸缩视频编码（SVC）扩展 (Scalable Video Coding (SVC) Extension for WebRTC) Web 实时通讯工作组 (WebRTC Working Group)	开发中: 在 Chrome（桌面, 移动）中开发中。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中开发中。来源：Chrome Platform Status

探索性工作

分布式渲染

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

不同色彩空间的渲染

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

由Web上的色彩社区组开发的文档——Web上的高动态范围和宽色域分析了在Web上支持高动态范围（HDR）和宽色域（WCG）的技术差距和可能的下一步计划，例如允许网页中的 HDR 视频内容与周围或覆盖的图形和文本内容之间的色彩和亮度匹配的机制。

视频处理

WebCodecs 提案提供对内置（软件和硬件）媒体编码器和解码器的高效底层访问，以更好地支持特定的编解码方案，例如点对点音视频会议、低延迟游戏直播或客户端媒体效果和转码，使开发者不必依赖 JavaScript 或 WebAssembly 的编解码器实现，因为这些实现在 CPU、内存、电池和带宽使用方面的成本更高。

使用 Canvas API 进行视频处理非常耗费 CPU 资源。除了传统的视频处理之外，现代 GPU 通常提供具有直接适用于增强现实应用程序的先进视觉处理能力（例如脸部和物体识别）。加速的图形识别正在探索这个空间。

音频播放

即使引入了 audio worklet，底层音频处理仍然受到 Web 音频 API 的渲染机制的限制。音频设备客户端提案作为 Web 音频 API 和浏览器使用的实际音频设备之间的中间层，可通过可配置参数（如采样率、回调缓冲区大小和通道数）更直接地访问音频硬件，同时可在专用线程中进行处理。

特性	规范 / 小组	实现意向选择浏览器… Chrome Microsoft Edge Firefox Safari / WebKit 百度浏览器 Opera QQ浏览器三星浏览器 UC浏览器
分布式渲染	时计对象 (Timing Object) 多设备时计社区组 (Multi-Device Timing Community Group)
不同色彩空间的渲染	CSS 色彩第四版中的与设备相关的色彩系统 (profiled device-dependent colors in CSS Color Module Level 4) CSS 工作组 (CSS Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。特性支持可能不完整。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。特性支持可能不完整。来源：Chrome Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。特性支持可能不完整。来源：Chrome Platform Status 在 Safari（桌面, 移动）中已有稳定实现。特性支持可能不完整。来源：MDN Browser Compatibility Data 在 Opera（桌面, 移动）中已有稳定实现。特性支持可能不完整。来源：MDN Browser Compatibility Data 在三星浏览器（移动）中已有稳定实现。特性支持可能不完整。来源：MDN Browser Compatibility Data
	canvas 的色彩管理 (Color managing canvas contents)	开发中: 在 Chrome（桌面, 移动）中开发中。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中开发中。来源：Chrome Platform Status
	Web上的高动态范围和宽色域 (High Dynamic Range and Wide Gamut Color on the Web) Web上的色彩社区组 (Color on the Web Community Group)
视频处理	WebCodecs Web 平台孵化社区组 (Web Platform Incubator Community Group)	已有实验性实现: 在 Chrome（桌面, 移动）中已有实验性实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有实验性实现。来源：Chrome Platform Status 考虑实现: 在 Firefox（桌面）中考虑实现。来源：Chrome Platform Status
视频处理	加速的图形识别 (Accelerated Shape Detection in Images) Web 平台孵化社区组 (Web Platform Incubator Community Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Chrome Platform Status
音频播放	音频设备客户端 (Audio Device Client) 音频社区组 (Audio Community Group)

目前尚未覆盖的工作

360°视频渲染的原生支持: 虽然已经有可能在 <video> 元素中呈现360°视频，但是对360°视频渲染的集成支持将允许隐藏底层自适应流媒体逻辑到应用的复杂性，让浏览器本身能够优化流媒体和渲染。; Canvas API 提供了执行图像和视频处理的功能，但这些功能受限于其对 CPU 执行的依赖性；现代 GPU 为广泛的操作提供硬件加速，但是浏览器不提供这些操作的钩子。GPU for the Web 社区组正在讨论将 GPU 计算功能开放给 Web 应用的解决方案，这可能最终允许 Web 应用利用 GPU 的能力有效地处理视频流。

不再进行的工作

网络服务发现: 网络服务发现API通过提供与本地基于网络的媒体渲染器的集成，如 DLN 及 UPnP 等，为建立多设备操作提供较底层的方法。出于对隐私保护的顾虑及缺乏实现，这项工作没有继续下去。目前的解决方案是用户用代理来处理底层的网络发现，就像在呈现 API 和远程回放 API 中处理的那样。
WebVR: 允许访问和控制虚拟现实（VR）设备并且在某些浏览器中已实现的 WebVR 规范的开发已停止，以支持 WebXR 设备 API，该 API 将工作范围扩展到增强现实（AR）设备。

发现了缺少的东西？

如果您知道使用 Web 技术无法实现的用例，请让我们知道！

为此，您可以在W3C 的 discourse 论坛中开一个新的主题, 或者在本文档的 GitHub 库中发一个新 issue。

GitHub Discourse