广泛部署的技术

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

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

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

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

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

特性规范 / 小组成熟度现有实现
选择浏览器…
视频播放HTML 5.2中的video 元素 (video element in HTML 5.2)
Web 平台工作组 (Web Platform Working Group)
正式推荐标准
音频播放HTML 5.2中的audio 元素 (audio element in HTML 5.2)
Web 平台工作组 (Web Platform Working Group)
正式推荐标准
生成媒体内容媒体源扩展™ (Media Source Extensions™)
HTML 媒体扩展工作组 (HTML Media Extensions Working Group)
正式推荐标准
受保护的内容播放加密媒体扩展 (Encrypted Media Extensions)
HTML 媒体扩展工作组 (HTML Media Extensions Working Group)
正式推荐标准
捕捉音频/视频HTML媒体捕捉 (HTML Media Capture)
设备与传感器工作组 (Devices and Sensors Working Group)
正式推荐标准
媒体捕捉与媒体流 (Media Capture and Streams)
Web 实时通讯工作组 (WebRTC Working Group)
候选推荐标准

已有稳定实现:
在 Chrome(桌面, 移动)中已有稳定实现。 来源:Chrome Platform Status在 Microsoft Edge(桌面)中已有稳定实现。 来源:Microsoft Edge Platform Status在 Firefox(桌面, 移动)中已有稳定实现。 来源:Can I use在 Safari(桌面, 移动)中已有稳定实现。 来源:Can I use在 Opera(桌面)中已有稳定实现。 来源:Can I use在 三星浏览器(移动)中已有稳定实现。 来源:Can I use在 UC浏览器(移动)中已有稳定实现。 来源:Can I use

已有实验性实现:
在 百度浏览器(移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 来源:Can I use在 Opera(移动)中已有实验性实现。 特性支持可能不完整。 来源:MDN Browser Compatibility Data在 QQ浏览器(移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 来源:Can I use

图像和视频的分析和修改HTML画布2D上下文 (HTML Canvas 2D Context)
HTML 媒体扩展工作组 (HTML Media Extensions Working Group)
正式推荐标准

开发中的技术

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

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

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

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

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

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

  • 跨设备的点对点通讯
  • 内容提示允许Web应用提示媒体内容的类型(例如语音、音乐、电影、屏幕录制等),以便用户代理可以优化编码或处理参数,
  • 允许用户间实时通讯的P2P音视频流
特性规范 / 小组成熟度现有实现
选择浏览器…
音频播放Web 音频 API (Web Audio API)
音频工作组 (Audio Working Group)
候选推荐标准

已有稳定实现:
在 Microsoft Edge(桌面)中已有稳定实现。 来源:Microsoft Edge 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

已有实验性实现:
在 Chrome(桌面, 移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 来源:Chrome Platform Status在 Safari(移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 来源:Can I use

分布式渲染呈现 API (Presentation API)
第二屏工作组 (Second Screen Working Group)
候选推荐标准
远程回放 API (Remote Playback API)
第二屏工作组 (Second Screen Working Group)
候选推荐标准
音频输出设备 API (Audio Output Devices API)
Web 实时通讯工作组 (WebRTC Working Group)
候选推荐标准
VR头盔中的渲染WebXR 设备 API (WebXR Device API)
沉浸式Web工作组 (Immersive Web Working Group)
编辑草案
捕捉音频/视频流媒体录制 (MediaStream Recording)
设备与传感器工作组 (Devices and Sensors Working Group)
Web 实时通讯工作组 (WebRTC Working Group)
工作草案
"MediaStream Image Capture"
设备与传感器工作组 (Devices and Sensors Working Group)
Web 实时通讯工作组 (WebRTC Working Group)
工作草案
点对点连接以及音视频流WebRTC 1.0: 浏览器间实时通讯 (WebRTC 1.0: Real-time Communication Between Browsers)
Web 实时通讯工作组 (WebRTC Working Group)
候选推荐标准
MediaStreamTrack 内容提示 (MediaStreamTrack Content Hints)
Web 实时通讯工作组 (WebRTC Working Group)
工作草案

探索性工作

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

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

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

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

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

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

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

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

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

特性规范 / 小组实现意向
选择浏览器…
媒体聚焦媒体会话 (Media Session)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
分布式渲染时计对象 (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)
媒体处理能力媒体能力 (Media Capabilities)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
媒体播放质量 (Media Playback Quality)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
视频处理加速的图形识别 (Accelerated Shape Detection in Images)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
自动播放自动播放政策 (Autoplay Policy)
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 中处理的那样。
WebVR
允许访问和控制虚拟现实(VR)设备并且在某些浏览器中已实现的 WebVR 规范的开发已停止,以支持 WebXR 设备 API,该 API 将工作范围扩展到增强现实(AR)设备。