Web 上的媒体技术

指南

“媒体指南”是帮助您使用现代 Web 技术理解、转换和优化 Web 上的媒体（包括音频、视频和图像）的资源。

音频和视频传输

我们可以在网络上以多种方式交付音频和视频，从“静态”媒体文件到自适应直播流。本文旨在作为一个起点，探索基于网络的媒体的各种交付机制以及与流行浏览器的兼容性。

音频和视频处理

浏览器原生支持音频和视频，这意味着我们可以使用这些数据流与 <canvas>、WebGL 或 Web Audio API 等技术直接修改音频和视频，例如为音频添加混响/压缩效果，或为视频添加灰度/怀旧滤镜。

媒体和 Web Audio API 自动播放指南

不希望的媒体或音频自动播放可能会令用户感到不悦。虽然自动播放有其用途，但应谨慎使用。为了让用户控制这一点，许多浏览器现在提供各种形式的自动播放阻止功能。本文是关于自动播放的指南，其中包含何时以及如何使用它的技巧，以及如何与浏览器协同工作以优雅地处理自动播放阻止。

适用于 HTML 5 视频的 DASH 自适应流媒体

HTTP 上的动态自适应流 (DASH) 是一种自适应流协议。这意味着它允许视频流根据网络性能在比特率之间切换，以保持视频播放流畅。

流媒体音频和视频

本指南涵盖了如何进行音频和视频流传输，以及你可以利用的技术和技巧来确保流的质量和/或性能达到最佳。

Web 上的媒体类型和格式

本指南介绍了 Web 上可用的图像、音频和视频媒体文件类型和编解码器。这包括关于针对不同内容使用哪种格式的建议、最佳实践（包括如何提供备用方案以及如何优先处理媒体类型），以及每种媒体容器和编解码器的通用浏览器支持信息。

在 HTML 中使用图片

这是一份关于如何为网站添加响应式、可访问且性能良好的图片的指南。

参考

HTML

以下 HTML 元素用于在页面中包含媒体。

<audio>

<audio> 元素用于播放音频。它可以作为更复杂的媒体的不可见目标，或者带有可见控件以供用户控制音频文件的播放。可以通过 JavaScript 访问，对象类型为 HTMLAudioElement。

<video>

<video> 元素用于播放视频内容。它可以用于呈现视频文件，或作为流式视频内容的接收端。<video> 还可以用作将媒体 API 与其他 HTML 和 DOM 技术（包括 <canvas>（用于帧捕获和处理））进行链接的方式，例如。可以通过 JavaScript 访问，对象类型为 HTMLVideoElement。

<track>

HTML <track> 元素可以放在 <audio> 或 <video> 元素内，以提供对 WebVTT 格式字幕或说明轨的引用，供媒体播放时使用。可以通过 JavaScript 访问，对象类型为 HTMLTrackElement。

<source>

HTML <source> 元素用于 <audio> 或 <video> 元素内，以指定要呈现的源媒体。可以使用多个源来提供不同格式、大小或分辨率的媒体。可以通过 JavaScript 访问，对象类型为 HTMLSourceElement。

API

Media Capabilities API

Media Capabilities API 允许你确定应用程序或网站运行设备的编码和解码能力。这使你能够实时决定使用何种格式以及何时使用。

媒体捕获和流 API

此 API 的参考文档，它使得在本地和跨网络流式传输、录制和处理媒体成为可能。这包括使用本地摄像头和麦克风捕获视频、音频和静态图像。

Media Session API

Media Session API 提供了一种自定义媒体通知的方式。它通过提供元数据供用户代理显示你 Web 应用正在播放的媒体。它还提供操作处理程序，浏览器可以使用这些处理程序来访问平台媒体键，例如键盘上的硬件键、耳机、遥控器，以及移动设备通知区域和锁定屏幕上的软件键。

MediaStream Recording API

MediaStream Recording API 允许你捕获媒体流以处理或过滤数据，或将其录制到磁盘。

Web Audio API

Web Audio API 允许你在实时和预录制材料上生成、过滤和处理声音数据，然后将音频发送到目标，例如 <audio> 元素、媒体流或磁盘。

WebRTC

WebRTC（Web 实时通信）使得无需中介即可在两个点对点之间通过 Internet 流式传输实时音频和视频，以及传输任意数据。

相关主题

可能感兴趣的相关主题，因为它们可以以有趣的方式与媒体 API 协同使用。

可访问的多媒体

在本指南中，我们介绍了 Web 设计师和开发人员可以创建对不同能力的用户可访问的内容的方法。这包括使用 <img> 元素上的 alt 属性，到字幕，再到为屏幕阅读器标记媒体。

Canvas API

Canvas API 允许你在 <canvas> 中绘图，从而操作和更改图像的内容。这可以以多种方式与媒体结合使用，包括将 <canvas> 元素设置为视频播放或摄像头捕获的目标，以便你可以捕获和处理视频帧。

WebGL

WebGL 在现有 Canvas API 之上提供了兼容 OpenGL ES 的 API，使得在 Web 上进行强大的 3D 图形处理成为可能。通过 canvas，这可以用于为媒体内容添加 3D 图像。

WebXR

WebXR，取代了现已废弃的 WebVR API，是一种支持创建虚拟现实 (VR) 和增强现实 (AR) 内容的技术。然后可以在设备的屏幕上或通过头戴式显示器或耳机显示混合现实内容。

WebVR 已弃用

Web Virtual Reality API 支持虚拟现实 (VR) 设备，如 Oculus Rift 或 HTC Vive，使开发人员能够将用户的姿势和移动转化为 3D 场景中的移动，然后显示在设备上。WebVR 已被 WebXR 取代，即将从浏览器中移除。

Web Audio 空间化基础

在 3D 环境中，这些环境可以是渲染到屏幕的 3D 场景，也可以是使用头戴式显示器体验的混合现实体验，音频的播放方式很重要，使其听起来像是来自其源头的方向。本指南涵盖了如何实现这一点。