为 HTML 5 视频提供的 DASH 自适应串流 - Web 媒体技术

为 HTML 5 视频提供的 DASH 自适应串流
=========================

经由 HTTP 的动态自适应串流（DASH）是一种自适应串流协议。这意味着它使得视频串流能基于网络性能来调整比特率，以保证视频流畅播放。

浏览器支持
-----

Firefox 21 包含了针对 HTM5 WebM 视频的 DASH 实现，但默认没有启用。可以通过在“about:config”里调整“`media.dash.enabled`”首选项来开启。

Firefox 23 移除了针对 HTML5 WebM 视频的 DASH 实现。此功能将被 媒体源扩展 API（MSE）的实现取代。MSE 可实现通过 JavaScript 库（例如 dash.js）来提供对 DASH 的支持。详情参见 Bug 778617。

使用 DASH - 服务端
-------------

首先，你需要将 WebM 视频转换为带有不同比特率的随附视频文件的 DASH 清单。根据你的需求，启动从 ffmpeg.org 的 ffmpeg 程序，就可以使用 libvpx 和 libbvorbis 支持的 WebM 视频和音频（版本 2.5 以上，3.2.5 版本已通过测试）。

### 1. 使用现有的 WebM 文件创建一个音频文件和多个视频文件

例如：

文件***in.video***可以是任何包含至少一个音频和一个视频流的容器，这些容器可以由 ffmpeg 解码，

创建音频：
```

ffmpeg -i in.video -vn -acodec libvorbis -ab 128k my_audio.webm
```

创建不同的视频
```

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=160:190 -b:v 250k video_160x90_250k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=320:180 -b:v 500k video_320x180_500k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=640:360 -b:v 750k  video_640x360_750k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=640:360 -b:v 1000k  video_640x360_1000k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=1280:720 -b:v 1500k  video_1280x720_1500k.webm
```

或使用命令创建以上视频：
```

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \
-g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=160:190 -b:v 250k video_160x90_250k.webm \
-an -vf scale=320:180 -b:v 500k video_320x180_500k.webm \
-an -vf scale=640:360 -b:v 750k  video_640x360_750k.webm \
-an -vf scale=640:360 -b:v 1000k  video_640x360_1000k.webm \
-an -vf scale=1280:720 -b:v 1500k  video_1280x720_1500k.webm
```

### 2. 创建清单文件
```

ffmpeg \
  -f webm_dash_manifest -i video_160x90_250k.webm \
  -f webm_dash_manifest -i video_320x180_500k.webm \
  -f webm_dash_manifest -i video_640x360_750k.webm \
  -f webm_dash_manifest -i video_1280x720_1500k.webm \
  -f webm_dash_manifest -i my_audio.webm \
  -c copy \
  -map 0 -map 1 -map 2 -map 3 -map 4 \
  -f webm_dash_manifest \
  -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \
  my_video_manifest.mpd
```

`-map` 参数对应输入文件的顺序（每个文件只对应一个参数）。`-adaptation_sets` 参数将它们分配给适配集；例如，以上命令创建一个包含 0,1,2,3 的视频集（0），而另一个（1）仅仅包含视频流 4 和音频流。

将清单和相关的视频文件放在 Web 服务器或 CDN 上。DASH 通过 HTTP 来完成，因此只要你的 HTTP 服务器支持字节范围请求，并且 DASH 设置为使用 mimetype="application/dash+xml" 来支持 .mpd 文件即可。

使用 DASH-客户端
-----------

你将需要修改网页，使其首先指向 DASH 清单，而不是直接指向特定的视频文件：

```html
<video>
  <source src="movie.mpd" />
  <source src="movie.webm" />
  Your browser does not support the video tag.
</video>
```

如果浏览器支持 DASH，则你的视频现在将自适应地流式传输。

Links
-----

WebM DASH Specification at The WebM Project

DASH Industry Forum

WebM project description of how to create DASH files with FFMPEG


实时传输 Web 音频与视频 - Web 媒体技术

实时传输 Web 音频与视频
==============

实时流技术经常应用在一些现场输出的转播活动，类似体育活动、演唱会和更平常的电视播放及广播节目。这通常称为流媒体，实时流就是将媒体“实时”传输到计算机和设备的过程。这是一个包含多个元素的、非常复杂且较为新生的主题，所以我们会通过这篇文章，向你介绍它并让你知道如何开始。

将媒体传输到浏览器的关键考虑因素是，我们不是在播放一个大小明确的文件，而是在转播一个即时创建的文件，并且它没有预先确定的开始或结束位置。

流媒体与静态媒体的主要区别
-------------

在这里，无论是 mp3 还是 WebM 文件，我们都称之为静态媒体。这些文件存放在服务端，可以像其他文件那样传输到浏览器端。这通常被称为渐进式下载。

跟静态媒体文件比起来，实时流媒体没有有限的开始和结束时间，它通常是一种自适应的、从服务端向下传输到浏览器端的数据流（见下文）。通常我们需要不同格式和特定的服务端软件来实现这个。

自适应流
----

实时流最优先考虑的事项之一就是让播放器保持与流同步：自适应流是一种可以在低带宽下执行此操作的技术。这种方法就是通过监控数据传输速率，如果速率慢，跟不上，我们就降低到低带宽（因此质量较低）的数据流。为了拥有这种能力，我们需要使用能实现该功能的数据格式。实时流格式通常是把流分割成许多不同质量和比特率的小片段，以此来实现自适应流的特性。

流式音频与视频的点播
----------

流式技术不只是用于直播。它也能用来替换传统的渐进式下载点播音频和视频：

优点如下：

* 延迟通常较低，所以媒体可以快速播放
* 自适应流可以在不同设备上获得更好的体验
* 媒体实时下载，提高带宽效率
流式协议
----

静态媒体通常是使用 HTTP 协议传输，但是自适应流媒体却有很多种协议，让我们看一下这些选择。

### HTTP

目前来说，HTTP 是媒体点播或直播最常使用的协议。

### RTMP

实时消息协议 (RTMP) 是由 Macromedia（即现在的 Adobe）公司研发的专有协议，并且它支持 Adobe Flash 插件。RTMP 共有 RTMPE（加密的）、RTMPS（基于 SSL/TLS 的安全协议）和 RTMPT（封装成 HTTP 请求）这几种形式

### RTSP

**备注：** 实时流协议 (RTSP) 控制媒体在两端传输的会话，且同时使用实时传输协议 (RTP) 和实时控制协议 (RTCP) 来传输媒体流。将 RTP 与 RTCP 结合使用可以实现自适应流。目前大部分浏览器还无法原生支持，但请留意 Firefox OS 1.3 支持 RTSP。

某些厂商实现了专有的传输协议，类似 RealNetworks 以及他们的真实数据传输 (RDT)。

### RTSP 2.0

RTSP 2.0 目前处于开发阶段，并且无法向后兼容 RTSP 1.0。

**警告：** 虽然 `<audio>` 与 `<video>` 标签与协议无关，但是目前没有浏览器可以在无插件的情况下支持除了 HTTP 外的协议，尽管这种局面可能会有所转变，但除了 HTTP 以外的协议可能会被防火墙或代理服务器拦截。

使用流式协议
------

如果你习惯于通过 HTTP 传输媒体，那么使用其他的协议也会让你感到熟悉。

举个例子：

```html
<video src="rtsp://myhost.com/mymedia.format">
  <!-- Fallback here -->
</video>
```

媒体源扩展 (MSE)
-----------

Media Source Extensions 是一个 W3C 的工作草案，计划用来扩展 `HTMLMediaElement` 使其支持使用 JavaScript 来生成用于播放的媒体流。使用 JavaScript 来生成流对于自适应流和时移实时流来说非常好用。

比如，在卸载 MSE 解码器后，你可以通过 JavaScript 实现 MPEG-DASH.

**备注：** 时移是在直播流发生后使用实时流的过程。

视频流文件格式
-------

一些基于 HTTP 的实时流视频格式开始得到跨浏览器支持。

**备注：** 你可以通过 设置自适应流媒体源 (en-US) 找到在 web 中使用的 HLS 和 MPEG-DASH 的编码指南。

### MPEG-DASH

DASH 意即基于 HTTP 的动态自适应流，最近已经被 Chrome、以及运行在 Window 8.1 的 IE 11 浏览器所支持。它依赖于媒体源扩展 (MSE)，这些扩展被DASH.js之类的 JavaScript 库所使用。这种方式允许我们通过 XHR 下载视频流的数据块，并且将它“添加”到 `<video>`元素正在播放的流中。正因如此，如果我们检测到网络缓慢，我们可以从下一段开始请求低质量（较小）的数据块。这种技术也允许添加广告片段到流中。

**备注：** 你也可以 将 MPEG-DASH 自适应流式系统与 WebM 一起使用.

### HLS

HLS(HTTP Live Streaming) 是由苹果公司研发的协议，支持在 IOS、Safari 及安卓上最新版本的浏览器/Chrome 浏览器。HLS 也是自适应的。

HLS 也能被 JavaScript 解码，这意味着我们能在最新版本的 Firefox，Chrome 和 IE10+ 浏览器上使用。看这个 HTTP Live Streaming JavaScript player.

在流式会话的开始阶段， extended M3U (m3u8) playlist 已经下载完成。它包含了所提供的各个子流的元数据。

### 流式文件格式支持

| Browser | DASH | HLS | Opus (Audio) |
| --- | --- | --- | --- |
| Firefox 32 | ✓ [1] | ✓ [2] | ✓ 14+ |
| Safari 6+ |  | ✓ |  |
| Chrome 24+ | ✓ [1] | ✓ |  |
| Opera 20+ | ✓ [1] |  |  |
| Internet Explorer 10+ | ✓ 11 | ✓ [2] |  |
| Firefox Mobile | ✓ | ✓ | ✓ |
| Safari iOS6+ |  | ✓ |  |
| Chrome Mobile | ✓ | ✓ [2] |  |
| Opera Mobile | ✓ [1] | ✓ |  |
| Internet Explorer Mobile | ✓ 11 | ✓ [2] |  |
| Android | ✓ |  |  |

[1] 使用 JavaScript 与 MSE

[2] 使用 JavaScript 与跨域代理

### 视频备选方案

DASH 与 HLS 可以在很大一部分主流浏览器上获得支持，但我们仍需要备选方案来支持其余的浏览器。

一个流行的方案是通过 Flash 播放器来支持 RTMP。当然，这就有个问题，我们需要编码三个不同的格式。

音频流文件格式
-------

目前也有一些音频格式开始在不同浏览器上获得支持。

### Opus

Opus 是一个无版权的开放格式，针对不同类型文件使用不同的比特率来优化音频质量。音乐或演讲会可以通过不同方式来优化，Opus 就借助了 SILK 和 CELT 来实现。

目前，Opus 被桌面端和移动端的 Firefox 以及桌面端的 Chrome 和 Opera 浏览器所支持。

**备注：** 对于浏览器端实现 WebRTC 功能来说，Opus 是必须要用到的格式。

### MP3, AAC, Ogg Vorbis

大部分通用的音频格式能够通过特殊的服务端技术进行传输。

**备注：** 相对于视频来说，音频没有键帧，可能更容易通过非流式格式来传输。

服务端流式技术
-------

为了实时传输音频和视频，你需要在你的服务器上运行特定的流式软件，或者使用第三方服务。

### GStreamer

GStreamer 是一个开源的跨平台的多媒体框架，它可以让你创建各种媒体处理组件，包括流式组件。GStreamer 通过它的插件系统，支持了一百多种编码 (包括 MPEG-1, MPEG-2, MPEG-4, H.261, H.263, H.264, RealVideo, MP3, WMV，和 FLV。)

GStreamer 的插件如 souphttpclientsink 和 shout2send 通过 HTTP 来传输媒体。你也可以集成 Python 的 Twisted 框架或者使用一些类似 Flumotion (open source streaming software) 的东西。

至于传输 RTMP，你可以使用 Nginx RTMP Module。

### SHOUTcast

SHOUTcast 是一种跨平台的，针对流式媒体的专有技术。它由 Nullsoft 开发，可以播放 MP3 或 AAC 格式的数字音频内容。对于 Web 端使用，SHOUTcast 通过 HTTP 传输流。

**备注：** SHOUTcast 的 URL 可能需要加上分号.

### Icecast

Icecast 服务是一种针对流式媒体的开源技术。它由 Xiph.org Foundation 进行维护，通过 SHOUTcast 协议来传输 Ogg Vorbis/Theora 以及 MP3 和 AAC 格式。

**备注：** SHOUTcast 和 Icecast 是最流行的已确立的技术之一，但也有 更多流媒体系统可用.

### 流式服务

虽然你可以安装类似 GStreamer，SHOUTcast 和 lcecast 的软件，但也可以从 第三方流式服务 中找到大量的服务帮助你完成工作。

参见
--

* HTTP 实时流式传输
* HLS 浏览器支持
* 基于 HTTP Live Streaming 的 JavaScript 播放器
* HTTP Live Streaming 的基础知识
* 用于 HTML 5 视频的 DASH 自适应流
* HTTP 上的动态自适应流式传输 (MPEG-DASH)
* MPEG-DASH 媒体源演示
* DASH 参考客户端
* HTTP 上的动态流式传输
* MPEG-DASH 的部署状态
* 看，无需插件：使用媒体源扩展和 MPEG-DASH 实时流式传输到浏览器
* 媒体源扩展 (W3C)
* Icecast
* SHOUTcast
* GStreamer
* 通过 HTTP 流式传输 GStreamer 管道
* 在 web 上使用 GStreamer 传输媒体
* GStreamer 和树莓派
* 接受媒体源扩展 (MSE) 作为 W3C 候选推荐将加速 dash.js 的使用
* 流媒体系统对比
* Mozilla Hacks - 使用媒体源扩展 (MSE) 传输媒体


Web Audio playbackRate explained - Web 媒体技术

Web Audio playbackRate explained
================================

html 元素“audio”和“video”的 `playbackRate` 属性允许我们改变一段正在播放的网页音频或者视频的速度，或速率。本文详细解释了 `playbackRate`。

playbackRate 基础
---------------

让我们以一个简单的`playbackRate`用法示例开始：

```js
var myAudio = document.createElement("audio");
myAudio.setAttribute("src", "audiofile.mp3");
myAudio.playbackRate = 0.5;
```

在此我们创建了一个 html 元素“audio”，以我们选择的一个文件设置它的 `src`。然后我们把 `playbackRate` 设为 0.5，这代表一半的正常播放速度（`playbackRate` 是对原始速率的一个乘数）。

一个完整示例
------

让我们首先创建一个 html 元素“video”，在 HTML 中设置视频和播放速率控制：

```html
<video id="myVideo" controls>
  <source
 src="http://jplayer.org/video/m4v/Big\_Buck\_Bunny\_Trailer.m4v"
 type="video/mp4" />
  <source
 src="http://jplayer.org/video/webm/Big\_Buck\_Bunny\_Trailer.webm"
 type="video/webm" />
</video>

<form>
  <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" />
  <p>Playback Rate <span id="currentPbr">1</span></p>
</form>
```

对它运用一些 JavaScript 代码：

```js
window.onload = function () {
  var v = document.getElementById("myVideo");
  var p = document.getElementById("pbr");
  var c = document.getElementById("currentPbr");

  p.addEventListener(
    "input",
    function () {
      c.innerHTML = p.value;
      v.playbackRate = p.value;
    },
    false,
  );
};
```

最后，我们监听指向 html 元素“input”的 `input` 事件，这允许我们对被改变的播放速率控制产生影响。

**备注：** 在线试用示例, 尝试调整播放速率控制看看效果。

defaultPlaybackRate 和 ratechange
--------------------------------

除了 `playbackRate`, 我们也有一个可用的 `defaultPlaybackRate` 属性，这让我们能设置默认的播放速率：对媒体文件重设置的播放速率；例如，如果我们改变视频的来源，或（在一些浏览器中）当产生一个`ended`事件。

所以 `defaultPlaybackRate` 允许我们在播放媒体文件之前设置播放速率，而`playbackRate` 只允许我们在媒体播放阶段改变它。

有一个可用事件 `ratechange`，每次 `playbackRate` 改变的时候均会触发。

浏览器支持
-----

* Chrome 20+ ✔
* Firefox 20+ ✔
* IE 9+ ✔
* Safari 6+ ✔
* Opera 15+ ✔
* Mobile Chrome (Android) ✖
* Mobile Firefox 24+ ✔
* IE Mobile ✖
* Mobile Safari 6+ (iOS) ✔
* Opera Mobile ✖
### 注意

* 大多数浏览器对 0.5 至 4 之外的`playbackRate`值会停止播放音频，而视频会静音播放。对大多数应用，推荐限制值的范围在 0.5 至 4 之间。
* 当 `playBackRate` 改变的时候音频的进度条不会变化。
* 负数不会引起媒体文件反向播放。
* 当`ended`事件触发时 IE9+ 会转换到默认播放速率。
* 当媒体源文件被替换时，Firefox 会触发 `ratechange` 事件。
* 在 iOS 7 中你只能在媒体暂停的时候影响`playbackRate`值（不是它播放的时候）。
参见
--

* Hyperaudio's Playback Rate Test
* HTMLMediaElement reference


向 HTML 视频中添加字幕 - Web 媒体技术

向 HTML 视频中添加字幕
==============

在其他文章中我们学会了如何使用 `HTMLMediaElement` 和 `Window.fullScreen` API 搭建一个跨浏览器的视频播放器 (en-US)以及如何给视频播放器添加样式 (en-US)。本文将介绍如何用 `WebVTT 格式`和 `<track>` 元素为视频添加字幕。

带有字幕的视频示例
---------

在本篇文章中，我们将参考带字幕的视频播放器的示例。本实例使用了来自 Blender 基金会的 Sintel open movie。

![带有播放、停止、音量和字幕的开启和关闭控制按钮的播放器。正在播放的视频显示了一个男人手持长矛状武器的场景，标题为“Esta hoja tiene pasado oscuro”](/zh-CN/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video/video-player-with-captions.png)

**备注：** 你可以查看 Github 源码，或者浏览在线示例。

HTML 和视频字幕
----------

在深入研究如何在视频播放器中添加字幕之前，我们首先要提到一些事情，在开始之前你应该注意到这些。

### 原文字幕（caption）和翻译字幕（subtitle）

原文字幕和翻译字幕不是一回事：它们的受众明显不同，传达的信息也不同，如果你不确定它们有什么区别，建议你阅读一下。然而，它们在技术上的实现方式是相同的，所以本文的材料将适用于这两种情况。

在本文中，我们将把显示的文字轨道称为字幕，因为它们的内容是针对难以理解电影语言的健听人士，而不是聋人或重听人士。

### <track> 元素

HTML 允许我们使用 `<track>` 元素来为视频指定字幕。这个元素的各种属性允许我们指定诸如我们要添加的内容的类型，它所使用的语言，当然还有对包含实际字幕信息的文本文件的引用。

### WebVTT

包含实际字幕数据的文件是遵循指定格式的简单文本文件，在这里是 Web 视频文本轨（WebVTT）格式。WebVTT 规范仍在指定中，但其主要部分已经稳定，所以现在我们可以使用它。

视频供应商（如 Blender 基金会）在其视频中提供文本格式的字幕，但它们通常是 SubRip Text（SRT）格式。这些都可以用在线转换器很容易地转换为 WebVTT 格式。

修改 HTML 和 CSS
-------------

本节总结了对上一篇文章的代码所做的修改，以方便在视频中添加字幕。如果你对此不感兴趣，只想直接进入 JavaScript 和更相关的 CSS 环节，请跳到字幕实现部分。

在这个例子中，我们使用了一个不同的视频（Sintel），它实际上有一些语音，因此更适合于说明字幕的工作原理！

### HTML 标签

如上所述，我们需要利用新的 HTML `<track>` 元素，将我们的字幕文件添加到 HTML 视频中。实际上，我们的字幕有三种不同的语言：英语、德语和西班牙语，所以我们将通过在 HTML `<video>` 元素中添加 `<track>` 元素来引用所有三个相关的 VTT 文件：

```html
<video id="video" controls preload="metadata">
  <source src="video/sintel-short.mp4" type="video/mp4" />
  <source src="video/sintel-short.webm" type="video/webm" />
  <track
 label="English"
 kind="subtitles"
 srclang="en"
 src="captions/vtt/sintel-en.vtt"
 default />
  <track
 label="Deutsch"
 kind="subtitles"
 srclang="de"
 src="captions/vtt/sintel-de.vtt" />
  <track
 label="Español"
 kind="subtitles"
 srclang="es"
 src="captions/vtt/sintel-es.vtt" />
</video>
```

正如你所看到的，每个 `<track>` 元素都有以下属性设置：

* `kind` 的值为 `subtitles`，表示文件包含的内容类型。
* `label` 的值表示该字幕是哪种语言，例如 `English` 或 `Deutsch`。这些标签将出现在用户界面上，让用户轻松选择他们想看的字幕语言。
* `src` 的值为一个有效的 URL，指向相关的 WebVTT 字幕文件。
* `srclang` 表示每个字幕文件的内容是什么语言。
* `default` 属性被设置在携带英语字幕的 `<track>` 元素上，向浏览器表明这是默认的字幕文件定义，当字幕被打开而用户没有做出具体选择时使用。

除了添加 `<track>` 元素外，我们还添加了一个新的按钮来控制我们将建立的字幕菜单。因此，现在的视频控件看起来如下：

```html
<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">播放/暂停</button>
  <button id="stop" type="button" data-state="stop">停止</button>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar"></span>
    </progress>
  </div>
  <button id="mute" type="button" data-state="mute">静音/解除静音</button>
  <button id="volinc" type="button" data-state="volup">音量+</button>
  <button id="voldec" type="button" data-state="voldown">音量-</button>
  <button id="fs" type="button" data-state="go-fullscreen">全屏</button>
  <button id="subtitles" type="button" data-state="subtitles">CC 字幕</button>
</div>
```

### 修改 CSS

为了给额外的按钮腾出空间，视频控件经历了一些小的变化，但这些都是相对简单的。

字幕按钮没有使用图片，所以它的风格简单地被定为：

```css
.controls button[data-state="subtitles"] {
  height: 85%;
  text-indent: 0;
  font-size: 16px;
  font-size: 1rem;
  font-weight: bold;
  color: #666;
  background: #000;
  border-radius: 2px;
}
```

还有其他的 CSS 变化，是针对一些额外的 JavaScript 实现的，但这些将在下面适当的地方提到。

字幕实现
----

我们为访问视频字幕所做的很多工作都是围绕着 JavaScript 展开的。与视频控件类似，如果一个浏览器支持 HTML 视频字幕，那么在本地控件集中会有一个按钮来访问它们。然而，由于我们已经定义了我们自己的视频控件，这个按钮是隐藏的，我们需要自行定义。

浏览器支持的内容各不相同，因此我们将尝试在可能的情况下为每个浏览器提供一个更统一的用户界面。稍后会有更多关于浏览器兼容性问题的内容。

### 初始设定

和其他所有的按钮一样，我们首先需要做的一件事是为字幕的按钮存储一个引用：

```js
const subtitles = document.getElementById("subtitles");
```

我们最初还关闭了所有的字幕，以防止浏览器默认打开任何字幕：

```js
for (let i = 0; i < video.textTracks.length; i++) {
  video.textTracks[i].mode = "hidden";
}
```

`video.textTracks` 属性包含一个数组，其中包含所有附加在视频上的文本轨道。我们循环遍历每一个，并将其 `mode` 设置为 `hidden`。

注意：WebVTT API 使我们能够访问所有使用 `<track>` 元素为 HTML 视频定义的文本轨道。

### 创建字幕菜单

我们的目标是使用我们先前添加的 `subtitles` 按钮来显示一个菜单，让用户选择他们希望以哪种语言显示字幕，或完全关闭字幕。

我们已经添加了按钮，但在我们让它做任何事情之前，需要先建立与之配套的菜单。这个菜单是动态建立的，以后可以通过编辑视频标记中的 `<track>` 元素来添加或删除语言。

我们所要做的就是遍历视频的 `textTracks`，读取它们的属性，然后从那里建立菜单：

```js
let subtitlesMenu;
if (video.textTracks) {
  const df = document.createDocumentFragment();
  const subtitlesMenu = df.appendChild(document.createElement("ul"));
  subtitlesMenu.className = "subtitles-menu";
  subtitlesMenu.appendChild(createMenuItem("subtitles-off", "", "Off"));
  for (let i = 0; i < video.textTracks.length; i++) {
    subtitlesMenu.appendChild(
      createMenuItem(
        `subtitles-${video.textTracks[i].language}`,
        video.textTracks[i].language,
        video.textTracks[i].label,
      ),
    );
  }
  videoContainer.appendChild(subtitlesMenu);
}
```

这段代码创建了一个 `documentFragment`，用来保存一个包含我们的字幕菜单的无序列表。首先添加了一个选项，允许用户关闭所有字幕，然后为每个文本轨道添加按钮，从每个文本轨道读取语言和标签。

每个列表项和按钮的创建是由 `createMenuItem()` 函数完成的，它的定义如下：

```js
const subtitleMenuButtons = [];
function createMenuItem(id, lang, label) {
  const listItem = document.createElement("li");
  const button = listItem.appendChild(document.createElement("button"));
  button.setAttribute("id", id);
  button.className = "subtitles-button";
  if (lang.length > 0) button.setAttribute("lang", lang);
  button.value = label;
  button.setAttribute("data-state", "inactive");
  button.appendChild(document.createTextNode(label));
  button.addEventListener("click", (e) => {
    // 将所有按钮置为非活动状态
    subtitleMenuButtons.forEach((button) => {
      button.setAttribute("data-state", "inactive");
    });

    // 找到要激活的按钮
    const lang = button.getAttribute("lang");
    for (let i = 0; i < video.textTracks.length; i++) {
      // 对于 'subtitles-off' 按钮，第一个条件永远不会满足，故所有字幕都会关闭
      if (video.textTracks[i].language === lang) {
        video.textTracks[i].mode = "showing";
        button.setAttribute("data-state", "active");
      } else {
        video.textTracks[i].mode = "hidden";
      }
    }
    subtitlesMenu.style.display = "none";
  });
  subtitleMenuButtons.push(button);
  return listItem;
}
```

这个函数建立了所需的 `<li>` 和 `<button>` 元素，并返回它们，以便它们可以被添加到字幕菜单列表中。它还在按钮上设置了所需的事件监听器，以开启或关闭相关的字幕设置。这是通过将所需字幕的 `mode` 属性设置为 `showing`，并将其他字幕设置为 `hidden` 来完成的。

一旦菜单建成，它就会被插入到视频容器底部的 DOM 中。

最初，菜单默认是隐藏的，所以需要给我们的字幕按钮添加一个事件监听器来切换它。

```js
subtitles.addEventListener("click", (e) => {
  if (subtitlesMenu) {
    subtitlesMenu.style.display =
      subtitlesMenu.style.display === "block" ? "none" : "block";
  }
});
```

### 字幕菜单 CSS 代码

我们还为新创建的字幕菜单添加了一些基本的风格设计：

```css
.subtitles-menu {
  display: none;
  position: absolute;
  bottom: 14.8%;
  right: 20px;
  background: #666;
  list-style-type: none;
  margin: 0;
  width: 100px;
  padding: 10px;
}

.subtitles-menu li {
  padding: 0;
  text-align: center;
}

.subtitles-menu li button {
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
  width: 90%;
  padding: 2px 5px;
  border-radius: 2px;
}
```

为显示的字幕添加样式
----------

WebVTT 的一个不太为人所知和支持的功能是通过 CSS 扩展对单个字幕（有时被称为文本提示）进行样式化。

伪元素 `::cue` 是针对单个文本轨进行样式设计的关键，因为它可以匹配任何定义的提示。只有少数几个 CSS 属性可以应用于文本提示符：

* `color`
* `opacity`
* `visibility`
* `text-decoration`
* `text-shadow`
* `background` 简写属性
* `outline` 简写属性
* `font` 简写属性，包括 `line-height`
* `white-space`

例如，要改变文字轨道提示的文字颜色，你可以这样写：

```css
::cue {
  color: #ccc;
}
```

如果 WebVTT 文件使用 voice span，它允许将提示定义为具有特定的“声音”：
```

0
00:00:00.000 --> 00:00:12.000
<v Test>[Test]</v>
```

这种特定的“声音”可以像这样施加样式：

```css
::cue(v[voice="Test"]) {
  color: #fff;
  background: #0095dd;
}
```

**备注：** 一些带有 ::cue 的提示语的样式目前在 Chrome、Opera 和 Safari 上可以使用，但在 Firefox 上还不行。

浏览器兼容性
------

浏览器对 WebVTT 和 `<track>` 元素的支持相当好，尽管有些浏览器在实现上略有不同。

### Safari

在 Safari 6.1 以上版本中，字幕是默认启用的，默认控件包含一个按钮和一个菜单，提供与我们刚刚建立的菜单相同的功能，还有一个“自动”选项，允许浏览器进行选择。`default` 属性也被支持。

### Chrome 和 Opera

这些浏览器也有类似的实现方式：默认启用字幕，默认控制集包含一个“cc”按钮，可以打开和关闭字幕。Chrome 和 Opera 忽略了 `<track>` 元素上的 `default` 属性，而是会尝试将浏览器的语言与字幕的语言相匹配。

插件
--

也有许多开源和商业的 HTML 视频播放器插件提供字幕支持，你可以用它们来代替自己制作。你可以在网上使用“*HTML 视频播放器插件*”等搜索词来搜索这些插件。


Media buffering, seeking, and time ranges - Web 媒体技术

Media buffering, seeking, and time ranges
=========================================

有时候知道 `<audio>` 或 `<video>` 已经下载了多少或有多少可以不延迟的播放是有用的——音频和视频的缓冲条就是这个的一个好例子。这篇文章讨论 用 TimeRanges 如何创建一个 buffer/seek bar，和 media API 的其他特性。

Buffered
--------

`Buffered` 属性会告诉我们媒体的哪一部分已经下载好了。它返回一个 `TimeRanges` 对象，表名哪些块已经下载。这通常是连续的但是如果用户在缓冲时跳过，就可能会有缺口。

它与 `<audio>` 或 `<video>`一起工作; 现在我们来考虑一个简单的 aodio 例子：

```html
<audio id="my-audio" controls src="music.mp3"></audio>
```

我们可以这样访问这些属性：

```js
var myAudio = document.getElementById("my-audio");

var bufferedTimeRanges = myAudio.buffered;
```

TimeRanges 对象
-------------

TimeRanges 是一系列有开始和结束时间的非重叠的时间范围。 (learn more about TimeRanges).

一个 `TimeRanges` 对象包括以下内容。

* `length`: The number of time ranges in the object.
* `start(index)`: The start time, in seconds, of a time range.
* `end(index)`: The end time, in seconds, of a time range.

没有用户操作的话通常只有一个时间范围，但是如果你在媒体中跳来跳去那么就会出现多个时间范围，下面形象化的表名了这一点。This represents two buffered time ranges — one spanning 0 to 5 seconds and the second spanning 15 to 19 seconds.
```

------------------------------------------------------
|=============|                    |===========|     |
------------------------------------------------------
0             5                    15          19    21
```

对于这个 audio 实例，相关联的 `TimeRange` 对象会有以下的可用属性：

```js
myAudio.buffered.length; // returns 2
myAudio.buffered.start(0); // returns 0
myAudio.buffered.end(0); // returns 5
myAudio.buffered.start(1); // returns 15
myAudio.buffered.end(1); // returns 19
```

为了试用并形象化 buffered time ranges 我们可以写一点 HTML:

```html
<p>
  <audio id="my-audio" controls>
    <source src="music.mp3" type="audio/mpeg" />
  </audio>
</p>
<p>
  <canvas id="my-canvas" width="300" height="20"></canvas>
</p>
```

and a little bit of JavaScript:

```js
window.onload = function () {
  var myAudio = document.getElementById("my-audio");
  var myCanvas = document.getElementById("my-canvas");
  var context = myCanvas.getContext("2d");

  context.fillStyle = "lightgray";
  context.fillRect(0, 0, myCanvas.width, myCanvas.height);
  context.fillStyle = "red";
  context.strokeStyle = "white";

  var inc = myCanvas.width / myAudio.duration;

  // display TimeRanges

  myAudio.addEventListener("seeked", function () {
    for (i = 0; i < myAudio.buffered.length; i++) {
      var startX = myAudio.buffered.start(i) \* inc;
      var endX = myAudio.buffered.end(i) \* inc;
      var width = endX - startX;

      context.fillRect(startX, 0, width, myCanvas.height);
      context.rect(startX, 0, width, myCanvas.height);
      context.stroke();
    }
  });
};
```

这在长一些的 audio 或 video 上工作的更好，但是按开始键并在进度条上点击，你会得到这个。每个红色填充的长方形代表一个时间范围。

![A simple audio player with play button, seek bar and volume control, with a series of red rectangles beneath it representing time ranges.](/zh-CN/docs/Web/Media/Audio_and_video_delivery/buffering_seeking_time_ranges/bufferedtimeranges.png)

**备注：** You can see the timerange code running live on JS Bin.

Seekable
--------

`Seekable` 属性返回一个 `TimeRanges` 对象告诉我们哪一部分媒体可以不等待的播放; this is irrespective of whether that part has been downloaded or not. Some parts of the media may be seekable but not buffered if byte-range requests are enabled on the server. Byte range requests allow parts of the media file to be delivered from the server and so can be ready to play almost immediately — thus they are seekable.

```js
var seekableTimeRanges = myAudio.seekable;
```

Creating our own Buffering Feedback
-----------------------------------

If we wish to create our own custom player, we may want to provide feedback on how much of the media is ready to be played. In practice a good way to do this is use the `seekable` attribute, although as we have seen above seekable parts of the media are not neccessarily contiguous — they often are however and we can safely approximate this information to give the user an indication of which parts of the media can be played directly. We can find this point in the media using the following line of code:

```js
var seekableEnd = myAudio.seekable.end(myAudio.seekable.length - 1);
```

**备注：** `myAudio.seekable.end(myAudio.seekable.length - 1)` actually tells us the end point of the last time range that is seekable (not all seekable media). In practice this is good enough as the browser either enables range requests or it doesn't. If it doesn't then `audio.seekable` will be equivalent to `audio.buffered`, which will give a valid indication of the end of seekable media. If range requests are enabled this value usually becomes the duration of the media almost instantly.

It is better perhaps to give an indication of how much media has actually downloaded — this what the browser's native players seem to display.

So let's build this. The HTML for our player looks like this:

```css
<audio id="my-audio" preload controls>
  <source src="music.mp3" type="audio/mpeg">
</audio>
<div class="buffered">
  <span id="buffered-amount"></span>
</div>
<div class="progress">
  <span id="progress-amount"></span>
</div>
```

We'll use the following CSS to style the buffering display:

```css
.buffered {
  height: 20px;
  position: relative;
  background: #555;
  width: 300px;
}

#buffered-amount {
  display: block;
  height: 100%;
  background-color: #777;
  width: 0;
}

.progress {
  margin-top: -20px;
  height: 20px;
  position: relative;
  width: 300px;
}

#progress-amount {
  display: block;
  height: 100%;
  background-color: #595;
  width: 0;
}
```

And the following JavaScript provides our functionality:

```js
window.onload = function () {
  var myAudio = document.getElementById("my-audio");

  myAudio.addEventListener("progress", function () {
    var bufferedEnd = myAudio.buffered.end(myAudio.buffered.length - 1);
    var duration = myAudio.duration;
    if (duration > 0) {
      document.getElementById("buffered-amount").style.width =
        (bufferedEnd / duration) \* 100 + "%";
    }
  });

  myAudio.addEventListener("timeupdate", function () {
    var duration = myAudio.duration;
    if (duration > 0) {
      document.getElementById("progress-amount").style.width =
        (myAudio.currentTime / duration) \* 100 + "%";
    }
  });
};
```

The progress event is fired as data is downloaded, this is a good event to react to if we want to display download or buffering progress.

The timeupdate event is fired 4 times a second as the media plays and that's where we increment our playing progress bar.

This should give you results similar to the following, where the light grey bar represents the buffered progress and green bar shows the played progress:

![A simple audio player with play button, seek bar and volume control, with a bar below it. The bar has a red portion to show played video, and a dark gray bar to show how much has been buffered.](/zh-CN/docs/Web/Media/Audio_and_video_delivery/buffering_seeking_time_ranges/bufferedprogress.png)

**备注：** You can see the buffering code running live on JS Bin.

A quick word about Played
-------------------------

It's worth mentioning the `played` property — this tells us which time ranges have been played within the media. For example:

```js
var played = audio.played; // returns a TimeRanges object
```

This could be useful for establishing the parts of your media that are most listened to or watched.


Media container formats (file types) - Web 媒体技术

Media container formats (file types)
====================================

一个音频/视频文件包含两部分：编码器（codec）和媒体容器（container）。本文讨论通用的多媒体容器的优点、局限性以及用法。

WebRTC does not use a container at all. Instead, it streams the encoded audio and video tracks directly from one peer to another using `MediaStreamTrack` objects to represent each track. See Codecs used by WebRTC (en-US) for information about codecs commonly used for making WebRTC calls, as well as browser compatibility information around codec support in WebRTC.

Common container formats
------------------------

最常用的几个媒体容器格式：MPEG-4（MP4）、QuickTime Movie（MOV）、Wavafile Audio File Format（WAV）。当然你也可能听说过：MP3, Ogg, WebM, AVI 等等。下面列出了常用的几种媒体容器格式，有些仅支持音频，有些即支持音频又支持视频。

一个媒体文件的扩展名和 MIME 类型，与它的容器格式以及它的编码方式没有特定的关系。例如 MP3 的扩展名是`.mp3`，MIME 类型是`audio/mp3`，但是它的容器格式是 MPEG-1，编码方式是 MPEG-1 Audio Layer III。

### Index of media container formats (file types)

要了解有关特定容器格式的更多信息，请在此列表中找到它并单击查看详细信息，其中包括有关容器通常用于哪些用途、它支持哪些编解码器以及哪些浏览器支持它等详细信息。

| Codec name (short) | Full codec name | Browser compatibility1 |
| --- | --- | --- |
| 3GP | Third Generation Partnership | Firefox for Android |
| ADTS | Audio Data Transport Stream | Firefox2 |
| FLAC | Free Lossless Audio Codec | Chrome 56, Edge 16, Firefox 51, Safari 11 |
| MPEG / MPEG-2 | Moving Picture Experts Group (1 and 2) | — |
| MPEG-4 (MP4) | Moving Picture Experts Group 4 | Chrome 3, Edge 12, Firefox, Internet Explorer 9, Opera 24, Safari 3.1 |
| Ogg | Ogg | Chrome 3, Firefox 3.5, Edge 173 (desktop only), Internet Explorer 9, Opera 10.50 |
| QuickTime (MOV) | Apple QuickTime movie | Only older versions of Safari, plus other browsers that supported Apple's QuickTime plugin |
| WebM | Web Media | Chrome 6, Edge 173 (desktop only), Firefox 4, Opera 10.6, Safari (WebRTC only) |

[1] Unless otherwise specified, both mobile and desktop browser compatibility is implied if a browser is listed here. Support is also implied only for the container itself, not for any specific codecs.

[2] Available only if available on the underlying operating system's media framework.

[3] Requires Web Media Extensions to be installed.

### 3GP

The **3GP** or **3GPP** media container is used to encapsulate audio and/or video that is specifically intended for transmission over cellular networks for consumption on mobile devices. The format was designed for use on 3G mobile phones, but can still be used on more modern phones and networks. However, the improved bandwidth availability and increased data caps on most networks has reduced the need for the 3GP format. However, this format is still used for slower networks and for lower-performance phones.

This media container format is derived from the ISO Base Media File Format and MPEG-4, but is specifically streamlined for lower bandwidth scenarios.

| Audio | Video |
| --- | --- |
| `audio/3gpp` | `video/3gpp` |
| `audio/3gpp2` | `video/3gpp2` |
| `audio/3gp2` | `video/3gp2` |

These MIME types are the fundamental types for the 3GP media container; other types may be used depending on the specific codec or codecs in use; in addition, you can add the `codecs` parameter (en-US) to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally provide details about the profile, level, and/or other codec configuration specifics.

Video codecs supported by 3GP| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AVC (H.264) |  |  | Yes1,2 |  |
| H.263 |  |  | Yes1 |  |
| MPEG-4 Part 2 (MP4v-es) |  |  | Yes1 |  |
| VP8 |  |  | Yes1 |  |

[1] Firefox only supports 3GP on OpenMAX-based devices, which currently means the Boot to Gecko (B2G) platform.

[2] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

Audio codecs supported by 3GP| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AMR-NB |  |  | Yes1 |  |
| AMR-WB |  |  | Yes1 |  |
| AMR-WB+ |  |  | Yes1 |  |
| AAC-LC |  |  | Yes1,2 |  |
| HE-AAC v1 |  |  | Yes1,2 |  |
| HE-AAC v2 |  |  | Yes1,2 |  |
| MP3 |  |  | Yes1 |  |

[1] Firefox only supports 3GP on OpenMAX-based devices, which currently means the Boot to Gecko (B2G) platform.

[2] Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

### ADTS

**Audio Data Transport Stream** (**ADTS**) is a container format specified by MPEG-4 Part 3 for audio data, intended to be used for streamed audio, such as for Internet radio. It is, essentially, an almost bare stream of AAC audio data, comprised of ADTS frames with a minimal header.

| Audio |
| --- |
| `audio/aac`[1] |
| `audio/mpeg`[1] |

[1] The MIME type used for ADTS depends on what kind of audio frames are contained within. If ADTS frames are used, the `audio/aac` MIME type should be used. If the audio frames are in MPEG-1/MPEG-2 Audio Layer I, II, or III format, the MIME type should be `audio/mpeg`.

Audio codecs supported by ADTS| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AAC |  |  | Yes1 |  |
| MP3 |  |  | Yes |  |

[1] Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

### FLAC

The **Free Lossless Audio Codec** (**FLAC**) is a lossless audio codec; there is also an associated simple container format, also called FLAC, that can contain this audio. The format is not encumbered by any patents, so its use is safe from interference. FLAC files can only contain FLAC audio data.

| Audio |
| --- |
| `audio/flac` |
| `audio/x-flac` (non-standard) |

Audio codecs supported by FLAC| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| FLAC |  |  | Yes |  |

### MPEG/MPEG-2

The **MPEG-1** and **MPEG-2** file formats are essentially identical. Created by the Moving Picture Experts Group (MPEG), these formats are widely used in physical media, including as the format of the video on DVD media.

On the internet, perhaps the most common use of the MPEG file format is to contain Layer\_III/MP3 sound data; the resulting files are the wildly popular MP3 file used by digital music devices around the world. Otherwise, MPEG-1 and MPEG-2 are not widely used in Web content.

The main differences between MPEG-1 and MPEG-2 take place in the media data formats rather than the container format. MPEG-1 was introduced in 1992; MPEG-2 was introduced in 1996.

| Audio | Video |
| --- | --- |
| `audio/mpeg` | `video/mpeg` |

Video codecs supported by MPEG-1 and MPEG-2| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| MPEG-1 Part 2 |  |  | No |  |
| MPEG-2 Part 2 |  |  | No |  |

Audio codecs supported by MPEG-1 and MPEG-2| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| MPEG-1 Audio Layer I |  |  | No |  |
| MPEG-1 Audio Layer II |  |  | No |  |
| MPEG-1 Audio Layer III (MP3) |  |  | Yes |  |

### MPEG-4 (MP4)

**MPEG-4** (**MP4**) is the latest version of the MPEG file format. There are two versions of the format, defined in parts 1 and 14 of the specification. MP4 is a popular container today, as it supports several of the most-used codecs and is broadly supported.

The original MPEG-4 Part 1 file format was introduced in 1999; the version 2 format, defined in Part 14, was added in 2003. The MP4 file format is derived from the ISO base media file format, which is directly derived from the QuickTime file format developed by Apple.

When specifying the MPEG-4 media type (`audio/mp4` or `video/mp4`), you can add the `codecs` parameter (en-US) to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally provide details about the profile, level, and/or other codec configuration specifics.

| Audio | Video |
| --- | --- |
| `audio/mp4` | `video/mp4` |

These MIME types are the fundamental types for the MPEG-4 media container; other MIME types may be used depending on the specific codec or codecs in use within the container. In addition, you can add the `codecs` parameter (en-US) to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally provide details about the profile, level, and/or other codec configuration specifics.

Video codecs supported by MPEG-4| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AVC (H.264) |  |  | Yes1 |  |
| AV1 |  |  | Yes1 |  |
| H.263 |  |  | No |  |
| MPEG-4 Part 2 Visual |  |  | No |  |
| VP9 |  |  | Yes |  |

[1] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

[2] Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference `media.av1.enabled` to `true`.

Audio codecs supported by MPEG-4| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AAC |  |  | Yes1 |  |
| FLAC |  |  | Yes |  |
| MPEG-1 Audio Layer III (MP3) |  |  | Yes |  |
| Opus |  |  | Yes |  |

[1] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

### Ogg

The **Ogg** container format is a free and open format maintained by the Xiph.org Foundation. The Ogg framework also defines patent unencumbered media data formats, such as the Theora video codec and the Vorbis and Opus audio codecs. Xiph.org documents about the Ogg format are available on their web site.

While Ogg has been around for a long time, it has never gained the wide support needed to make it a good first choice for a media container. You are typically better off using WebM, though there are times when Ogg is useful to offer, such as when you wish to support older versions of Firefox and Chrome which don't yet support WebM. For example, Firefox 3.5 and 3.6 support Ogg, but not WebM.

You can get more information about Ogg and its codecs in the Theora Cookbook.

| Audio | Video |
| --- | --- |
| `audio/ogg` | `video/ogg` |

The `application/ogg` MIME type can be used when you don't necessarily know whether the media contains audio or video. If at all possible, you should use one of the specific types, but fall back to `application/ogg` if you don't know the content format or formats.

You can also add the `codecs` parameter (en-US) to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally further describe the track media formats.

Video codecs supported by Ogg| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| Theora |  |  | Yes |  |
| VP8 |  |  | Yes |  |
| VP9 |  |  | Yes |  |

Audio codecs supported by Ogg| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| FLAC |  |  | Yes |  |
| Opus |  |  | Yes |  |
| Vorbis |  |  | Yes |  |

### QuickTime

The **QuickTime** file format (**QTFF**, **QT**, or **MOV**) was created by Apple for use by its media framework of the same name. The extension for these files, `.mov`, comes from the fact that the format was initially used for movies and was usually called the "QuickTime movie" format. While QTFF served as the basis for the MPEG-4 file format, there are differences and the two are not quite interchangeable.

QuickTime files support any sort of time-based data, including audio and video media, text tracks, and so forth. QuickTime files are primarily supported by macOS, but for a number of years, QuickTime for Windows was available to access them on Windows. However, QuickTime for Windows is no longer supported by Apple as of early 2016, and *should not be used*, as there are known security concerns. However, Windows Media Player now has integrated support for QuickTime version 2.0 and earlier files; support for later versions of QuickTime requires third-party additions.

On Mac OS, the QuickTime framework not only supported QuickTime format movie files and codecs, but supported a vast array of popular and specialty audio and video codecs, as well as still image formats. Through QuickTime, Mac applications (including web browsers, through the QuickTime plugin or direct QuickTime integration) were able to read and write audio formats including AAC, AIFF, MP3, PCM, and Qualcomm PureVoice; and video formats including AVI, DV, Pixlet, ProRes, FLAC, Cinepak, 3GP, H.261 through H.265, MJPEG, MPEG-1 and MPEG-4 Part 2, Sorenson, and many more.

In addition, a number of third-party components are available for QuickTime, some of which add support for additional codecs.

Because QuickTime support is, for all intents and purposes, primarily available on Apple devices, it is no longer widely used on the internet. Apple itself generally now uses MP4 for video. In addition, the QuickTime framework has been deprecated on the Mac for some time, and is no longer available at all starting in macOS 10.15 Catalina.

| Video |
| --- |
| `video/quicktime` |

The `video/quicktime` MIME type is the fundamental type for the QuickTime media container. It's worth noting that QuickTime (the media framework on Mac operating systems) supports a wide variety of containers and codecs, so it actually supports many other MIME types.

You can add the `codecs` parameter (en-US) to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally provide details about the profile, level, and/or other codec configuration specifics.

Video codecs supported by QuickTime| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AVC (H.264) |  |  | No |  |
| Cinepak |  |  | No |  |
| Component Video |  |  | No |  |
| DV |  |  | No |  |
| H.261 |  |  | No |  |
| H.263 |  |  | No |  |
| MPEG-2 |  |  | No |  |
| MPEG-4 Part 2 Visual |  |  | No |  |
| Motion JPEG |  |  | No |  |
| Sorenson Video 2 |  |  | No |  |
| Sorenson Video 3 |  |  | No |  |

Audio codecs supported by QuickTime| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AAC |  |  | No |  |
| ALaw 2:1 |  |  | No |  |
| Apple Lossless (ALAC) |  |  | No |  |
| HE-AAC |  |  | No |  |
| MPEG-1 Audio Layer III (MP3) |  |  | No |  |
| Microsoft ADPCM |  |  | No |  |
| µ-Law 2:1 (u-Law) |  |  | No |  |

### WAVE (WAV)

The **Waveform Audio File Format** (**WAVE**), usually referred to simply as WAV due to its filename extension being `.wav`, is a format developed by Microsoft and IBM to store audio bitstream data.

It is derived from the Resource Interchange File Format (RIFF), and as such is similar to other formats such as Apple's AIFF. The WAV codec registry can be found at RFC 2361; however, because nearly all WAV files use linear PCM, support for the other codecs is sparse.

The WAVE format was first released in 1991.

| Audio |
| --- |
| `audio/wave`1 |
| `audio/wav` |
| `audio/x-wav` |
| `audio/x-pn-wav` |

[1] The `audio/wave` MIME type is the standard type, and is preferred; however, the others have been used by various products over the years and may be used as well in some environments.

Audio codecs supported by WAVE| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| ADPCM (Adaptive Differential Pulse Code Modulation) |  |  | No |  |
| GSM 06.10 |  |  | No |  |
| LPCM (Linear Pulse Code Modulation) |  |  | Yes |  |
| MPEG-1 Audio Layer III (MP3) |  |  | No |  |
| µ-Law (u-Law) |  |  | No |  |

### WebM

**WebM** (**Web Media**) is a format based on Matroska which is designed specifically for use in modern web environments. It's based entirely on free and open technologies and primarily uses codecs that are in turn free and open, although some products support other codecs in WebM containers as well.

WebM was first introduced in 2010 and is now widely supported. Compliant implementations of WebM are required to support the VP8 and VP8 video codecs and the Theora and Opus audio codecs. The WebM container format and its required codecs are all available under open licenses. Any other codecs may require a license to use.

| Audio | Video |
| --- | --- |
| `audio/webm` | `video/webm` |

Video codecs supported by WebM| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AV1 | Yes | Yes | Yes1 | Yes |
| VP8 | Yes | Yes | Yes | Yes |
| VP9 | Yes | Yes | Yes | Yes |

[1] Firefox support for AV1 was added to macOS in Firefox 66; for Windows in Firefox 67; and Firefox 68 on Linux. Firefox for Android does not yet support AV1; the implementation in Firefox is designed to use a secure process, which is not supported yet in Android.

Audio codecs supported by WebM| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| Opus | Yes | Yes | Yes | Yes |
| Vorbis | Yes | Yes | Yes | Yes |

Choosing the right container
----------------------------

There are a few factors to consider when selecting the best container or containers to use for your media. The relative importance of each will depend on your needs, your license requirements, and the compatibility requirements of your target audience.

### Guidelines

The best choice also depends on what you'll be doing with the media. Playing back media is a different thing than recording and/or editing it. If you're going to be manipulating the media data, using an uncompressed format can improve performance, while using a lossless compressed format at least prevent the accumulation of noise as compression artifacts are multiplied with each re-compression that occurs.

* If your target audience is likely to include users on mobile, especially on lower-end devices or on slow networks, consider providing a version of your media in a 3GP container with appropriate compression.
* If you have any specific encoding requirements, make sure the container you choose supports the appropriate codecs.
* If you want your media to be in a non-proprietary, open format, consider using one of the open container formats such as FLAC (for audio) or WebM (for video).
* If for any reason you are only able to provide media in a single format, choose a format that's available on the broadest selection of devices and browsers, such as MP3 (for audio) or MP4 (for video and/or audio).
* If your media is audio-only, choosing an audio-only container format likely makes sense. Now that the patents have all expired, MP3 is a widely supported and good choice. WAVE is good but uncompressed, so be aware of that before using it for large audio samples. FLAC is a very good choice, due to its lossless compression, if the target browsers all support it.

Unfortunately, neither of the relatively major lossless compression formats (FLAC and ALAC) are universally supported. FLAC is the more broadly supported of the two, but is not supported by macOS without additional software installed, and is not supported at all on iOS. If you need to offer lossless audio, you may need to provide both FLAC and ALAC to get close to universal compatibility.

### Container selection advice

The tables below offer suggested containers to use in various scenarios. These are just suggestions. Be sure to consider the needs of your application and your organization before selecting a container format.

#### Audio-only files

| If you need... | Consider using this container format |
| --- | --- |
| Compressed files for general-purpose playback | MP3 (MPEG-1 Audio Layer III) |
| Losslessly compressed files | FLAC with ALAC fallback |
| Uncompressed files | WAV |

Now that MP3's patents have all expired, the choice of audio file format has become much easier to make. It's no longer necessary to choose between MP3's broad compatibility and the need to pay royalties when using it.

#### Video files

| If you need... | Consider using this container format |
| --- | --- |
| General purpose video, preferably in an open format | WebM (ideally with MP4 fallback) |
| General purpose video | MP4 (ideally with WebM or Ogg fallback) |
| High compression optimized for slow connections | 3GP (ideally with MP4 fallback) |
| Compatibility with older devices/browsers | QuickTime (ideally with AVI and/or MPEG-2 fallback) |

These suggestions make a number of assumptions. You should carefully consider the options before making a final decision, especially if you have a lot of media that will need to be encoded.

Maximizing compatibility with multiple containers
-------------------------------------------------

To optimize compatibility, it's worth considering providing more than one version of media files, using the `<source>` element to specify each source within the `<audio>` or `<video>` element. For example, you can offer an Ogg or WebM video as the first choice, with a fallback in MP4 format. You could even choose to offer a retro-like QuickTime or AVI fallback for good measure.

To do this, you create a `<video>` (or `<audio>`) element with no `src` attribute. Then add child `<source>` elements within the `<video>` element, one for each version of the video you offer. This can be used to offer various versions of a video that can be selected depending on bandwidth availability, but in our case, we'll use it to offer format options.

In the example shown here, a video is offered to the browser in two formats: WebM and MP4.

尝试一下
----

The video is offered first in WebM format (with the `type` attribute set to `video/webm`). If the user agent can't play that, it moves on to the next option, whose `type` is specified as `video/mp4`. If neither of those can be played, the text "This browser does not support the HTML5 video element." is presented.

Specifications
--------------

| Specification | Comment |
| --- | --- |
| ETSI 3GPP | Defines the 3GP container format |
| ISO/IEC 14496-3 (MPEG-4 Part 3 Audio) | Defines MP4 audio including ADTS |
| FLAC Format | The FLAC format specification |
| ISO/IEC 11172-1 (MPEG-1 Part 1 Systems) | Defines the MPEG-1 container format |
| ISO/IEC 13818-1 (MPEG-2 Part 1 Systems) | Defines the MPEG-2 container format |
| ISO/IEC 14496-14 (MPEG-4 Part 14: MP4 file format) | Defines the MPEG-4 (MP4) version 2 container format |
| ISO/IEC 14496-1 (MPEG-4 Part 1 Systems) | Defines the original MPEG-4 (MP4) container format |
| RFC 3533 | Defines the Ogg container format |
| RFC 5334 | Defines the Ogg media types and file extensions |
| QuickTime File Format Specification | Defines the QuickTime movie (MOV) format |
| Multimedia Programming Interface and Data Specifications 1.0 | The closest thing to an official WAVE specification |
| Resource Interchange File Format (used by WAV) | Defines the RIFF format; WAVE files are a form of RIFF |
| WebM Container Guidelines | Guide for adapting Matroska for WebM |
| Matroska Specifications | The specification for the Matroska container format upon which WebM is based |
| WebM Byte Stream Format | WebM byte stream format for use with Media Source Extensions |

Browser compatibility
---------------------

| Container format name | Audio | Video |
| --- | --- | --- |
| MIME type | Extension(s) | Browser support | MIME type | Extension(s) | Browser support |
| 3GP | `audio/3gpp` | `.3gp` | Firefox | `video/3gpp` | `.3gp` | Firefox |
| ADTS (Audio Data Transport Stream) | `audio/aac` | `.aac` | Firefox | — | — | — |
| FLAC | `audio/flac` | `.flac` | Firefox | — | — | — |
| MPEG-1 / MPEG-2 (MPG or MPEG) | `audio/mpeg` | `.mpg``.mpeg` | Firefox | `video/mpeg` | `.mpg``.mpeg` | Firefox |
| `audio/mp3` | `.mp3` | Firefox |
| MPEG-4 (MP4) | `audio/mp4` | `.mp4``.m4a` | Firefox | `video/mp4` | `.mp4``.m4v``.m4p` | Firefox |
| Ogg | `audio/ogg` | `.oga``.ogg` | Firefox | `video/ogg` | `.ogv``.ogg` | Firefox |
| QuickTime Movie (MOV) | — | — | — | `video/quicktime` | `.mov` | Safari |
| WAV (Waveform Audiofile) | `audio/wav` | `.wav` | Firefox | — | — | — |
| WebM | `audio/webm` | `.webm` | Firefox | `video/webm` | `.webm` | Firefox |

See also
--------

* WebRTC API
* MediaStream Recording API
* `<audio>` and `<video>` elements


网页视频编码指南 - Web 媒体技术

网页视频编码指南
========

本文介绍了你在网络中最常遇见的视频编码，总结了这些编码方式的能力、兼容性以及使用时需要考虑的事项，并且提供了一些为你的项目的视频选择编码的建议。

由于未压缩的视频数据的使用巨大的空间，有必要对其进行压缩以便进行存储，更不用说通过网络传输了。想象一下存储未压缩视频所需的数据量：

* 单帧全彩色高清（1920x1080）视频（每像素 4 字节）为 8,294,400 字节。
* 在典型的每秒 30 帧的情况下，每秒高清视频将占用 248,832,000 字节（~249 MB）。
* 一分钟的高清视频需要 14.93 GB 的存储空间。
* 一个相当典型的 30 分钟视频会议需要大约 447.9 GB 的存储空间，而一部 2 小时的电影需要几乎 *1.79 **TB***（即 1790 GB）的空间。

不仅所需的存储空间巨大，而且传输这样的未压缩视频所需的网络带宽也将是巨大的，达到 249 MB/秒——不包括音频和开销。视频编解码器在此时就派上用场了。就像音频编解码器对声音数据所做的那样，视频编解码器压缩视频数据并将其编码为以后可以解码和播放或编辑的格式。

大多数视频编解码器都是**有损**的，因为解码后的视频与源不完全匹配。一些细节可能会丢失；损失量取决于编解码器及其配置方式，但作为一般规则，你实现的压缩越多，细节和保真度的损失就越多。确实存在一些无损编解码器，但它们通常用于存档和存储以进行本地播放，而不是在网络上使用。

常用编解码器
------

以下视频编解码器是网络上最常用的编解码器。对于每个编解码器，还列出了可以支持它们的容器（文件类型）。每个编解码器都提供了一个指向下方部分的链接，该部分提供了有关编解码器的其他详细信息，包括你可能需要注意的特定功能和兼容性问题。

| 编解码器简称 | 编解码器全称 | 容器支持 |
| --- | --- | --- |
| AV1 | AOMedia Video 1 | MP4、WebM |
| AVC (H.264) | Advanced Video Coding（高级视频编码器） | 3GP、MP4 |
| H.263 | H.263 Video | 3GP |
| HEVC (H.265) | High Efficiency Video Coding（高效视频编码） | MP4 |
| MP4V-ES | MPEG-4 Video Elemental Stream（MPEG-4 视频元素流） | 3GP、MP4 |
| MPEG-1 | MPEG-1 Part 2 Visual | MPEG、QuickTime |
| MPEG-2 | MPEG-2 Part 2 Visual | MP4、MPEG、QuickTime |
| Theora | Theora | Ogg |
| VP8 | Video Processor 8 | 3GP、Ogg、WebM |
| VP9 | Video Processor 9 | MP4、Ogg、WebM |

影响编码视频的因素
---------

与任何编码器一样，影响编码视频大小和质量的基本因素有两组：源视频格式和内容的细节，以及编码视频时使用的编解码器的特性和配置。

最简单的准则是：任何使要编码的视频看起来更像原始的、未压缩的东西通常会使数据更大。因此，它始终需要在大小与质量作出权衡。在某些情况下，为了降低数据大小而牺牲更高的质量是值得的。而有时质量损失是不可接受的，因此有必要接受导致使文件数据更大的编解码器配置。

### 源视频格式对编码输出的影响

源视频格式对输出的影响程度取决于编解码器及其工作方式。如果编解码器将媒体转换为内部像素格式，或者以其他方式使用简单像素以外的方式表示图像，则原始图像的格式没有任何区别。但是，帧速率和分辨率等因素总是会影响媒体的输出大小。

此外，所有编解码器都有其优点和缺点。有些编码器在处理特定的形状和图案会出现问题，有的不擅长处理锐利的边缘，有的在黑暗区域往往会丢失细节，不同的编码器都有可能出现各种各样的问题，这一切是由编码器底层的算法和数学理论决定的。

源视频格式和内容对编码视频质量和大小的潜在影响| 特征 | 对质量的影响 | 对文件大小的影响 |
| --- | --- | --- |
| 颜色深度（位深度） | 颜色位深度越高，视频中实现的颜色保真质量就越高。此外，在图像的饱和部分（即颜色纯净而强烈的地方，例如明亮的纯红色 [ `rgba(255, 0, 0, 1)` ]），每个分量的颜色深度低于 10 位（10-位颜色）允许条带化，如果没有可见的颜色步进，则无法表示渐变。 | 根据编解码器的不同，更高的颜色深度可能会导致更大的压缩文件大小。决定性因素是用于存储压缩后数据的内部格式。 |
| 帧率 | 主要影响图像中运动的平滑度。在某种程度上，帧速率越高，运动就会显得越流畅和逼真。随着帧率的提高这种收益最终会达到递减点。有关详细信息，请参阅下面的帧速率。 | 假设在编码过程中帧速率没有降低，更高的帧速率会导致压缩后的视频占据更多的空间。 |
| 运动 | 视频压缩通常通过比较帧、找到它们的不同之处然后构建包含足够信息的记录来更新前一帧以使其近似于下一帧的外观。不相同的连续帧越多，这些差异就越大，为了避免鬼影压缩的效率就越低。 | 由于动作中存在大量的不相同的帧，因此其会导致更大的中间帧。因此，视频中的运动越多，输出文件通常就越大。 |
| 噪声 | 图片噪声（例如胶片颗粒效果、灰尘或图像的其他粗糙度）会引入易变性。易变性通常使压缩更加困难，因为为了达到相同的压缩水平需要丢弃掉更多的细节，因此会导致更多的质量损失。 | 图像中的易变性（例如噪声）越多，压缩过程就越复杂，算法在将图像压缩到相同程度时的成功率也就越低。除非配置编码器使其忽略部分或所有由噪声引起的变化，否则压缩视频会更大。 |
| 分辨率（宽度和高度） | 以相同屏幕尺寸呈现的更高分辨率视频通常能够更准确地描绘原始场景，除非在压缩过程中引入了效果。 | 视频的分辨率越高，它就越大。这对视频的最终大小起着关键作用。 |

这些对生成的编码视频的影响程度将根据情况的具体细节而有所不同，包括使用的编码器及其配置方式。除了通用编解码器选项外，编码器还可以配置为降低帧速率、清除噪声和/或降低编码期间视频的整体分辨率。

### 编解码器配置对编码输出的影响

用于对视频进行编码的算法通常使用多种通用技术中的一种或多种来执行它们的编码。一般来说，任何旨在减少视频输出大小的配置选项都可能会对视频的整体质量产生负面影响，或者会在视频中引入某些类型的鬼影。也可以选择能够完美再现原始片段单会产生更大编码文件的无损编码形式。

此外，每个编码器实用程序在处理源视频的方式上可能有所不同，从而导致输出质量和大小的差异。

视频编码器配置对质量和大小的影响| 特征 | 对质量的影响 | 对文件大小的影响 |
| --- | --- | --- |
| 无损压缩 | 无质量损失 | 无损压缩不能像有损压缩那样减小整体视频大小；生成的文件对于一般用途来说可能仍然太大。 |
| 有损压缩 | 在某种程度上，会出现鬼影和其他形式的质量下降，具体取决于特定的编解码器和应用了多少压缩 | 允许编码后的视频和源的差别越大，就越容易实现更高的压缩率 |
| 质量设置 | 质量配置越高，编码视频看起来越像原始媒体 | 一般来说，更高质量的设置会产生更大的编码视频文件；实际程度因编解码器而异 |
| 比特率 | 质量通常会随着更高的比特率而提高 | 更高的比特率会导致更大的输出文件 |

编码视频时可用的选项以及分配给这些选项的值不仅会因一种编解码器而异，而且取决于你使用的编码软件。编码软件随附的文档将帮助你了解这些选项对编码视频的具体影响。

压缩鬼影
----

**鬼影**是有损编码过程的副作用，其中丢失或重新排列的数据会导致明显的负面影响。一旦鬼影出现，它可能会因为视频的显示方式而停留一段时间。通过对当前可见的帧应用一组变化记录来呈现视频的每一帧。这意味着任何错误或伪影都会随着时间的推移而复杂化，从而导致图像出现故障或其他奇怪或意外的偏差，这些偏差会持续一段时间。

为了解决这个问题，并改善视频数据的搜索时间，将周期性的**关键帧**（也称为**帧内**或 **i 帧**）放置到视频文件中。关键帧是完整帧，用于修复当前可见的任何损坏或伪影残留。

### 混叠

混叠是从编码数据重建后看起来与压缩前不同的任何事物的通用术语。有多种形式的别名；你可能会看到的最常见的包括：

|  |  |
| --- | --- |
| 摩尔纹
**摩尔纹**是当源图像中的一个图案和编码器的操作方式在空间上略微失准时产生的大尺度空间干涉图案。然后，编码器生成的鬼影会在解码时在源图像的图案中引入奇怪的漩涡效果。 | 由于云纹图案，砖墙显示出类似于波浪的漩涡效果 |
| 楼梯效果
**楼梯效果**是一种空间伪影，当应该平滑的对角直线或弯曲边缘呈现锯齿状外观时，就会出现这种空间伪影，看起来有点像一组楼梯台阶。通过"抗锯齿"过滤器能减少这种现象。 | 由于混叠导致楼梯效果而看起来像楼梯的对角线照片 |
| 马车车轮效应
**马车车轮效应**（或**频闪效应**）是电影中常见的视觉效果，由于帧速率和压缩算法之间的相互作用，车轮似乎以错误的速度旋转，甚至反向旋转。任何重复的移动模式都会出现同样的效果，例如铁路线上的枕木、路边的柱子等等。这是一个时间（基于时间）混叠问题；旋转速度会干扰压缩或编码期间执行的采样频率。 |  |

### 色彩边缘

**色彩边缘**是一种视觉鬼影，表现为沿场景中彩色对象边缘引入的虚假颜色。这些颜色与帧的内容没有有意义的颜色关系。

### 锐度损失

在视频编码过程中删除数据的行为需要丢失一些细节。如果应用了足够的压缩，图像的部分甚至全部可能会损失清晰度，导致外观略微模糊或看齐来很朦胧。

失去清晰度会使图像中的文本难以阅读，因为文本（尤其是小文本）是非常注重细节的内容，微小的改动会显着影响易读性。

### 振铃效应

有损压缩算法会引入**振铃效应**，即对象外部区域被压缩算法生成的彩色像素污染的效果。当算法使用跨越对象与其背景之间的清晰边界的块时，就会发生这种情况。这在较高的压缩级别下尤其常见。

![振铃效应示例](/zh-CN/docs/Web/Media/Formats/Video_codecs/ringing-effects.png)

请注意上方星星边缘周围的蓝色和粉红色条纹（以及步进和其他重要的压缩伪影）。那些边缘是振铃效应。振铃效应在某些方面类似于飞蚊噪声，除了振铃效果或多或少稳定不变，而蚊子噪音闪烁和移动。

振铃是另一种类型的鬼影，它会使阅读图像中包含的文本变得特别困难。

### 分色

**分色**发生在压缩导致渐变中颜色细节丢失时。图像不是通过区域中的各种颜色进行平滑过渡，而是呈现为块状的，带有接近图像原始外观的颜色斑点。

![](/zh-CN/docs/Web/Media/Formats/Video_codecs/posterize-effect.jpg)

请注意上面照片中秃鹰（以及背景中的雪鸮）羽毛中颜色的块状。由于这些后化鬼影，在很大程度上丢失了羽毛的细节。

### 轮廓

**轮廓**或**色带**是一种特殊的分色形式，其中色块在图像中形成条带或条纹。当视频使用了低精度的量化配置进行编码时，就会发生这种情况。压缩后的视频的内容中呈现出“分层”的外观，其中不是平滑的渐变和过渡，而是从颜色到颜色的过渡是突然的，导致出现色条。

![压缩引入轮廓的图像示例](/zh-CN/docs/Web/Media/Formats/Video_codecs/contouring-effect.jpg)

在上面的示例图像中，请注意天空如何具有不同深浅的蓝色带，而不是随着天空颜色向地平线变化而形成一致的渐变。这就是轮廓效果。

### 飞蚊噪声

**飞蚊噪声**是一种时间鬼影，表现为噪声或**边缘繁忙**，表现为闪烁的朦胧或闪烁，大致跟随在具有硬边缘或前景对象和背景之间的尖锐过渡的对象的边缘之外。效果在外观上可能类似于振铃效应。

![](/zh-CN/docs/Web/Media/Formats/Video_codecs/mosquito-effect-sm.png)

上面的照片显示了许多地方的飞蚊噪音，包括在桥梁周围的天空中。在右上角，插图显示了图像中出现蚊子噪声的部分的特写。

飞蚊噪声鬼影最常见于 MPEG 视频中，但只要使用离散余弦变换（DCT）算法就会出现；例如 JPEG 静止图像。

### 运动补偿块边界鬼影

视频压缩通常通过比较两帧并记录它们之间的差异，一帧接一帧，直到视频结束。当相机固定在适当位置或者帧中的对象相对静止时这种方法的效果很好，但如果帧中有大量运动，帧之间的差异数量可能会很大，以至于压缩算法不会做任何事。

**运动补偿**是一种寻找运动（相机或视野中的物体）并确定移动的物体在各个方向上有多少个像素的偏移的技术。确定后存储这些不能只用相似变化描述的像素偏移。本质上，编码器会找到移动的对象，然后构建一个类似于原始对象但所有对象都被转换到新位置的帧内。理论上，这近似于新帧的外观。然后，为了完成运动补偿，需要找到剩余的差异，然后将对象移动的集合和像素差异的集合存储在表示新帧的数据中。这个描述偏移和像素差异的对象称为**残差帧**。

| 原始帧 | 帧间差异 | 运动补偿后的差异 |
| --- | --- | --- |
| Original frame of video |  | 右移两个像素后的帧之间的差异 |
| 观众看到的第一个完整帧。 | 在这里，只看到第一帧和下一帧之间的差异。其他一切都是黑色的。仔细观察，我们可以看到这些差异大部分来自水平摄像机移动，这使其成为运动补偿的良好候选者。 | 为了最小化不同像素的数量，这里我们考虑到相机的平移，首先将第一帧向右移动两个像素，然后再考虑差异。这补偿了相机的平移，允许两个帧之间有更多的重叠。 |
| 图片来自维基百科 |

运动补偿有两种一般类型：**全局运动补偿**和**块运动补偿**。全局运动补偿通常针对摄像机运动进行调整，例如跟踪、小车运动、平移、倾斜、滚动和上下运动。块运动补偿处理局部变化，寻找可以使用运动补偿编码的图像的较小部分。这些块通常在网格中具有固定大小，但有一些运动补偿形式允许可变块大小，甚至允许块重叠。

然而，由于运动补偿可能会出现鬼。这些沿着块边界发生，以产生错误振铃和其他边缘效应的尖锐边缘的形式出现。这些是由于残差帧编码中涉及的数学问题，并且在被下一个关键帧修复之前很容易被注意到。

### 减少帧大小

在某些情况下，减少视频的尺寸以提高视频文件的最终大小可能很有用。虽然播放的大小或流畅度的立即损失可能是一个负面因素，但仔细的决策可以带来良好的最终结果。如果在编码之前将 1080p 视频降低到 720p，则生成的视频会更小，同时具有更高的视觉质量；即使在播放期间按比例放大后，结果也可能比以全尺寸编码原始视频并接受满足你的尺寸要求所需的质量要求更好。

### 降低帧率

同样，你可以完全从视频中删除帧并降低帧速率以进行补偿。这有两个好处：它使整个视频更小，并且更小的尺寸允许运动补偿带来更好的效果。例如，不是计算由于帧间运动而相隔两个像素的两个帧的运动差异，而是每隔一帧跳过一次可能会导致计算得出四个运动像素的差异。这使得相机的整体运动可以用更少的剩余帧来表示。

视频在其内容不再被人眼感知为运动之前可以达到的绝对最小帧速率约为每秒 12 帧。少于这个临界值，视频就变成了一系列静止图像。电影胶片通常是每秒 24 帧，而标准清晰度电视大约是每秒 30 帧（稍微少一点，但足够接近），而高清电视是每秒 24 到 60 帧。任何从 24 FPS 以上的图像通常看起来都会很平滑；30 或 60 FPS 是理想的帧率，具体的取决于需求。

最后，做出哪些牺牲完全取决于你和你的设计团队。

编解码器详细信息
--------

### AV1

**AOMedia Video 1**（**AV1**）编解码器是由 Alliance for Open Media 专门为互联网视频设计的开放格式。它实现了比 VP9 和 H.265/HEVC 更高的数据压缩率，比 AVC 高出多达 50%。AV1 完全免版税，专为 `<video>` 元素和 WebRTC 使用而设计。

AV1 目前提供三种配置文件：**main**、**high** 和 **professional**，并增加了对颜色深度和色度子采样的支持。此外，还指定了一系列**级别**，每个级别都定义了视频属性范围的限制。这些属性包括帧尺寸、以像素为单位的图像区域、显示和解码率、平均和最大比特率，以及编码/解码过程中使用的瓦片和瓦片列的数量限制。

例如，AV1 2.0 级提供的最大帧宽度为 2048 像素，最大高度为 1152 像素，但其最大帧大小（以像素为单位）为 147,456，因此你实际上无法在 2.0 级获得 2048x1152 视频。然而值得注意的是，至少对于 Firefox 和 Chrome，在执行软件解码时实际上忽略了级别，并且解码器在提供的设置下尽其所能播放视频。但是，为了以后的兼容性，你应该保持在你选择的级别的范围内。

目前 AV1 的主要缺点是它非常新，并且大多数的浏览器还未完全支持该编码方式。此外，编码器和解码器仍在针对性能进行优化，硬件编码器和解码器仍主要处于开发阶段而不是生产阶段。因此，将视频编码为 AV1 格式需要很长时间，因为所有工作都是在软件中完成的。

目前，由于这些因素，AV1 还没有准备好成为你的首选视频编解码器，但你应该注意它以备将来使用。

|  |  |
| --- | --- |
| 支持的比特率 | 视视频级别而异；理论最大值在 6.3 级达到 800 Mbps
请参阅 AV1 规范的级别表，其中描述了每个级别的最大分辨率和速率。 |
| 支持的帧率 | 因级别而异；例如 2.0 级最高 30 FPS 而 6.3 级可以达到 120 FPS |
| 压缩 | 基于有损 DCT 的算法 |
| 支持的帧大小 |
 8 x 8 像素到 65,535 x 65535 像素，每个尺寸允许
 取这些之间的任何值
  |
| 支持的颜色模式 |

| 配置 | 颜色深度 | 色度二次采样 |
| --- | --- | --- |
| Main | 8 or 10 | 4:0:0（灰度）或 4:2:0 |
| High | 8 or 10 | 4:0:0（灰度）、4:2:0 或 4:4:4 |
| Professional | 8, 10, or 12 | 4:0:0 (greyscale), 4:2:0, 4:2:2, or 4:4:4 |

 |
| HDR 支持 | 支持 |
| 可变帧速率 (VFR) 支持 | 支持 |
| 浏览器兼容性 |

| 特征 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| AV1 支持 | 70 | 75 | 67 | 不支持 | 57 | 不支持 |

 |
| 容器支持 | ISOBMFF、 MPEG-TS、MP4、WebM |
| RTP (en-US) / WebRTC 兼容 | 支持 |
| 支持/维护组织 | 开放媒体联盟 |
| 规范 | https://aomediacodec.github.io/av1-spec/av1-spec.pdf |
| 许可 | 免版税、开放标准 |

### AVC (H.264)

MPEG-4 规范套件的**高级视频编码**（**AVC**）标准由相同的 ITU H.264 规范和 MPEG-4 Part 10 规范指定。它是一种基于运动补偿的编解码器，如今广泛用于各种媒体，包括广播电视、RTP (en-US) 视频会议以及蓝光光盘的视频编解码器。

AVC 高度灵活，具有许多不同功能的配置文件；例如，Constrained Baseline Profile 设计用于视频会议和移动场景，使用的带宽少于 Main Profile（在某些地区用于标清数字电视）或 High Profile（用于蓝光光盘视频） .大多数配置文件使用 8 位颜色分量和 4:2:0 色度二次采样；High 10 Profile 增加了对 10 位颜色的支持，High 10 的高级形式增加了 4:2:2 和 4:4:4 色度二次采样。

AVC 还具有特殊功能，例如支持同一场景的多个视图（多视图视频编码），它允许制作立体视频等。

然而，AVC 是一种专有格式，其技术的众多专利由多方拥有。AVC 媒体的商业使用需要许可证，但 MPEG LA 专利池不需要为以 AVC 格式流式传输的互联网视频收取许可证费用，只要视频对最终用户免费即可。

WebRTC 的非 Web 浏览器实现（任何不包括 JavaScript API 的实现）都*需要*支持 AVC 作为 WebRTC 调用中的编解码器。虽然 Web 浏览器不需要这样做，但有些需要这样做。

在 Web 浏览器的 HTML 内容中，AVC 具有广泛的兼容性，并且许多平台支持 AVC 媒体的硬件编码和解码。但是，在你的项目中选择使用 AVC 之前，请注意其许可要求！

|  |  |
| --- | --- |
| 支持的比特率 | Varies by level |
| 支持的帧率 | Varies by level; up to 300 FPS is possible |
| 压缩 | Lossy 基于 DCT 的算法，虽然可以在图像中创建无损宏块 |
| 支持的帧大小 | 最大 8,192 x 4,320 像素 |
| 支持的颜色模式 | 一些更常用或者你可能会感兴趣的配置：

| 配置 | 颜色深度 | 色度二次采样 |
| --- | --- | --- |
| Constrained Baseline (CBP) | 8 | 4:2:0 |
| Baseline (BP) | 8 | 4:2:0 |
| Extended (XP) | 8 | 4:2:0 |
| Main (MP) | 8 | 4:2:0 |
| High (HiP) | 8 | 4:0:0（灰度）和 4:2:0 |
| Progressive High (ProHiP) | 8 | 4:0:0（灰度）和 4:2:0 |
| High 10 (Hi10P) | 8 to 10 | 4:0:0（灰度）和 4:2:0 |
| High 4:2:2 (Hi422P) | 8 to 10 | 4:0:0（灰度）、4:2:0 和 4:2:2 |
| High 4:4:4 Predictive | 8 to 14 | 4:0:0（灰度）、4:2:0、4:2:2 和 4:4:4 |

 |
| HDR 支持 | 支持; 混合对数伽玛或高级 HDR/SL-HDR；两者都是 ATSC 的一部分。 |
| 可变帧速率 (VFR) 支持 | 支持 |
| 浏览器兼容性 |

| 特征 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| AVC/H.264 支持 | 4 | 12 | 35 | 9 | 25 | 3.2 |

Firefox 对 AVC 的支持取决于操作系统内置或预装的 AVC 编解码器及其容器，以避免专利问题。 |
| 容器支持 | 3GP、MP4 |
| RTP (en-US) /
 WebRTC兼容
  | 支持 |
| 支持/维护组织 | MPEG /
 ITU |
| 规范 | https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-codinghttps://www.itu.int/rec/T-REC-H.264 |
| 许可 | 拥有多项专利。商业用途需要许可证。请注意，可能适用多个专利池。 |

### H.263

ITU 的 **H.263** 编解码器主要设计用于低带宽情况。特别是，它的重点是 PSTN（公共交换电话网络）、RTSP (en-US) 和 SIP（基于 IP 的视频会议）系统上的视频会议。尽管针对低带宽网络进行了优化，但它相当占用 CPU，并且可能无法在低端计算机上充分执行。数据格式类似于 MPEG-4 Part 2。

H.263 从未在网络上广泛使用。H.263 的变体已被用作其他专有格式的基础，例如 Flash 视频或 Sorenson 编解码器。但是，没有任何主流浏览器默认包含 H.263 支持。某些媒体插件已启用对 H.263 媒体的支持。

与大多数编解码器不同，H.263 以每帧（图片）的最大比特率或 **BPPmaxKb** 来定义编码视频的基本原理。编码时为 BPPmaxKb 选择一个值，然后视频每帧不能超过这个值。最终比特率将取决于此、帧速率、压缩以及选择的分辨率和块格式。

H.263 已被 H.264 取代，因此被视为一种传统媒体格式，你通常应该尽可能避免使用。在新项目中使用 H.263 的唯一真正原因是，如果你需要支持非常旧的设备，而 H.263 是你的最佳选择。

H.263 是一种专有格式，专利 由包括 Telenor、富士通在内的许多组织和公司持有、摩托罗拉、三星、日立、宝利通、高通等。要使用 H.263，你有法律义务获得相应的许可证。

|  |  |
| --- | --- |
| 支持的比特率 | 不受限制，但通常低于 64 Kbps |
| 支持的帧率 | Any |
| 压缩 | 基于有损 DCT 的算法 |
| 支持的帧大小 | 最大 1408 x 1152 像素。
H.263 版本 1 指定了一组受支持的图片尺寸。更高版本可能支持其他分辨率。 |
| 支持的颜色模式 | YCbCr;每种图片格式（sub-QCIF、QCIF、CIF、4CIF 或 16CIF）定义帧大小（以像素为单位）以及每个帧使用的亮度和色度样本的行数 |
| HDR 支持 | 不支持 |
| 可变帧速率 (VFR) 支持 | 不支持 |
| 浏览器兼容性 |

| 特征 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| H.263 support | 不支持 | 不支持 | 不支持 | 不支持 | 不支持 | 不支持 |

 |
| 容器支持 | 3GP、MP4、QuickTime |
| RTP (en-US) / WebRTC兼容 | 不支持 |
| 支持/维护组织 | ITU |
| 规范 | https://www.itu.int/rec/T-REC-H.263/ |
| 许可 | 专利限制;需要适当的许可证或许可证。请注意，可能适用多个专利池。 |

### HEVC (H.265)

**高效视频编码**（**HEVC**）编解码器由 ITU 的 **H.265** 以及 MPEG-H 第 2 部分（MPEG-4 仍在开发中的后续版本）。HEVC 旨在支持对包括超高分辨率（包括 8K 视频）在内的视频进行高效编码和解码，其结构专为让软件利用现代处理器而设计。从理论上讲，HEVC 可以达到 AVC 一半的压缩文件大小，但图像质量相当。

例如，每个编码树单元（CTU）——类似于以前编解码器中使用的宏块——由每个样本的亮度值树以及在同一编码树单元中使用的每个色度样本的色度值树组成，以及任何必需的语法元素。这种结构支持多核轻松处理。

HEVC 的一个有趣特性是主配置文件仅支持每个分量颜色 8 位和 4:2:0 色度子采样。同样有趣的是 4:4:4 视频经过特殊处理。这三个通道没有使用亮度样本（以灰度表示图像的像素）以及 Cb 和 Cr 样本（指示如何更改灰度以创建彩色像素），而是将三个通道视为三个单色图像，每种颜色一个，然后在渲染过程中组合以产生全彩图像。

HEVC 是一种专有格式，受多项专利保护。许可由 MPEG LA 管理；费用向开发者收取，而不是向内容生产者和发行商收取。在决定是否在你的应用或网站中使用 HEVC 之前，请务必查看最新的许可条款和要求！

|  |  |
| --- | --- |
| 支持的比特率 | Up to 800,000 Kbps |
| 支持的帧率 | Varies by level; up to 300 FPS is possible |
| 压缩 | Lossy 基于 DCT 的算法 |
| 支持的帧大小 | 128 x 96 至 8,192 x 4,320 像素；因配置文件和级别而异 |
| 支持的颜色模式 | 以下信息适用于主要配置文件。还有许多其他可用的配置文件未包括在此处。

| 配置 | 颜色深度 | 色度二次采样 |
| --- | --- | --- |
| Main | 8 | 4:2:0 |
| Main 10 | 8 to 10 | 4:2:0 |
| Main 12 | 8 to 12 | 4:0:0 和 4:2:0 |
| Main 4:2:2 10 | 8 to 10 | 4:0:0, 4:2:0, 和 4:2:2 |
| Main 4:2:2 12 | 8 to 12 | 4:0:0, 4:2:0, 和 4:2:2 |
| Main 4:4:4 | 8 | 4:0:0, 4:2:0, 4:2:2, 和 4:4:4 |
| Main 4:4:4 10 | 8 to 10 | 4:0:0, 4:2:0, 4:2:2, 和 4:4:4 |
| Main 4:4:4 12 | 8 to 12 | 4:0:0, 4:2:0, 4:2:2, 和 4:4:4 |
| Main 4:4:4 16 Intra | 8 to 16 | 4:0:0, 4:2:0, 4:2:2, 和 4:4:4 |

 |
| HDR 支持 | 支持 |
| 可变帧速率（VFR）支持 | 支持 |
| 浏览器兼容性 |

| 特征 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| HEVC / H.265 support | 107 | 18 | 不支持 | 11 | 94 | 11 |

Chrome 在具有硬件解码器的 Windows 8+、Linux、ChromeOS 设备上支持 HEVC，在所有 macOS Big Sur+ 和 Android 5.0+ 的设备上支持 HEVC。
Edge（Chromium）在具有硬件解码器的 Windows 10 1709+ 设备上支持 HEVC（需要安装 HEVC 视频扩展插件），在其他操作系统上的支持情况和 Chrome 一致。Edge（旧版）仅支持 HEVC 硬解码。
由于 HEVC 受到专利保护，Mozilla 不会支持 HEVC。
Internet Explorer 在具有硬件解码器的设备上支持 HEVC。
Opera 和其他基于 Chromium 内核的浏览器，支持情况和 Chrome 一致。
Safari 在所有 macOS High Sierra+ 设备上支持 HEVC。 |
| 容器支持 | ISOBMFF、MPEG-TS、MP4、QuickTime |
| RTP (en-US) /
 WebRTC兼容
  | 不支持 |
| 支持/维护组织 | ITU /
 MPEG |
| 规范 | http://www.itu.int/rec/T-REC-H.265https://www.iso.org/standard/69668.html |
| 许可 | 专利限制;确认你遵守许可要求。请注意，可能适用多个专利池。 |

### MP4V-ES

**MPEG-4 Video Elemental Stream**（**MP4V-ES**）格式是 MPEG-4 Part 2 视觉标准的一部分。虽然一般来说，MPEG-4 第 2 部分视频没有被任何人使用，因为它缺乏与其他编解码器相关的引人注目的价值，但 MP4V-ES 在移动设备上确实有一些用途。MP4V 本质上是 MPEG-4 容器中的 H.263 编码。

它的主要目的是用于通过 RTP (en-US) 会话流式传输 MPEG-4 音频和视频。但是，MP4V-ES 也用于使用 3GP 通过移动连接传输 MPEG-4 音频和视频。

你几乎肯定不想使用这种格式，因为任何主流浏览器都不以有意义的方式支持它，而且已经过时了。这种类型的文件应该有扩展名“.mp4v”，但有时被错误地标记为“.mp4”。

|  |  |
| --- | --- |
| 支持的比特率 | 5 Kbps 至 1 Gbps 及更多 |
| 支持的帧率 | 没有具体限制；仅受数据速率限制 |
| 压缩 | Lossy 基于 DCT 的算法 |
| 支持的帧大小 | 最大 4,096 x 4,096 像素 |
| 支持的颜色模式 | 支持具有色度二次采样（4:2:0、4:2:2 和 4:4:4）的 YCrCb；每个组件最多 12 位 |
| HDR 支持 | 不支持 |
| 可变帧速率 (VFR) 支持 | 支持 |
| 浏览器兼容性 |

| 特征 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| MP4V-ES support | 不支持 | 不支持 | 支持 | 不支持 | 不支持 | 不支持 |

Firefox 仅在3GP容器中支持 MP4V-ES。
Chrome 不支持 MP4V-ES；但是，ChromeOS 可以。 |
| 容器支持 | 3GP、MP4 |
| RTP (en-US) / WebRTC兼容 | 不支持 |
| 支持/维护组织 | MPEG |
| 规范 | RFC 6416 |
| 许可 | 专利限制;根据需要通过MPEG LA和/或AT&T获得许可证 |

### MPEG-1 Part 2 Video

**MPEG-1 Part 2 Video** 于 1990 年代初推出。与后来的 MPEG 视频标准不同，MPEG-1 完全由 MPEG 创建，没有 ITU's (en-US) 参与。

因为任何 MPEG-2 解码器也可以播放 MPEG-1 视频，所以它与各种软件和硬件设备兼容。没有与 MPEG-1 视频相关的有效专利，因此可以在没有任何许可问题的情况下使用它。但是，很少有 Web 浏览器在不支持插件的情况下支持 MPEG-1 视频，并且随着 Web 浏览器中不推荐使用插件，这些通常不再可用。这使得 MPEG-1 在网站和 Web 应用程序中成为一个糟糕的选择。

|  |  |
| --- | --- |
| 支持的比特率 | 最大 1.5 Mbps |
| 支持的帧率 | 23.976 FPS, 24 FPS, 25 FPS, 29.97 FPS, 30 FPS, 50 FPS, 59.94 FPS, and 60 FPS |
| 压缩 | 基于有损 DCT 的算法 |
| 支持的帧大小 | Up to 4,095 x 4,095 pixels |
| 支持的颜色模式 | 具有 4:2:0 色度二次采样的 Y'CbCr，每个分量最多 12 位 |
| HDR 支持 | 不支持 |
| 可变帧速率 (VFR) 支持 | 不支持 |
| 浏览器兼容性 |

| 特征 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| MPEG-1 support | 不支持 | 不支持 | 不支持 | 不支持 | 不支持 | 支持 |

 |
| 容器支持 | MPEG |
| RTP (en-US) / WebRTC兼容 | 不支持 |
| 支持/维护组织 | MPEG |
| 规范 | https://www.iso.org/standard/22411.html |
| 许可 | Proprietary; however, all patents have expired, so MPEG-1 may be used freely |

### MPEG-2 Part 2 Video

**MPEG-2 Part 2** 是 MPEG-2 规范定义的视频格式，也偶尔会被提及通过其 ITU (en-US) 名称，H.262。它与 MPEG-1 视频非常相似——事实上，任何 MPEG-2 播放器都可以自动处理 MPEG-1，而无需任何特殊工作——除了它已扩展为支持更高的比特率和增强的编码技术。

目标是允许 MPEG-2 压缩标清电视，因此也支持隔行扫描视频。标准清晰度压缩率和生成的视频质量需要足够好，MPEG-2 是用于 DVD 视频媒体的主要视频编解码器。

MPEG-2 有几个具有不同功能的配置文件。然后每个配置文件有四个级别可用，每个级别都会增加视频的属性，例如帧速率、分辨率、比特率等。大多数配置文件使用具有 4:2:0 色度二次采样的 Y'CbCr，但更高级的配置文件也支持 4:2:2。此外，还有四个级别，每个级别都支持更大的帧尺寸和比特率。例如，北美使用的电视 ATSC 规范使用高级主配置文件支持高清 MPEG-2 视频，允许 4:2:0 视频，1920 x 1080 (30 FPS) 和 1280 x 720 (60 FPS)，最大比特率为 80 Mbps。

但是，很少有 Web 浏览器在使用插件的情况下支持 MPEG-2，并且随着 Web 浏览器中逐渐弃用插件，这些通常不再可用。这使得 MPEG-2 在网站和 Web 应用程序中成为一个糟糕的选择。

|  |  |
| --- | --- |
| 支持的比特率 | 最高 100 Mbps；因等级和配置而异 |
| 支持的帧率 |

| 缩写 | 等级名称 | 支持的帧率 |
| --- | --- | --- |
| LL | Low Level | 23.9, 24, 25, 29.97, 30 |
| ML | Main Level | 23.976, 24, 25, 29.97, 30 |
| H-14 | High 1440 | 23.976, 24, 26, 29.97, 30, 50, 59.94, 60 |
| HL | High Level | 23.976, 24, 26, 29.97, 30, 50, 59.94, 60 |

 |
| 压缩 | 基于有损 DCT 的算法 |
| 支持的帧大小 |

| 缩写 | 等级名称 | Maximum frame size |
| --- | --- | --- |
| LL | Low Level | 352 x 288 pixels |
| ML | Main Level | 720 x 576 pixels |
| H-14 | High 1440 | 1440 x 1152 pixels |
| HL | High Level | 1920 x 1152 pixels |

 |
| 支持的颜色模式 | Y'CbCr 在大多数配置文件中具有 4:2:0 色度二次采样； “High”和“4:2:2”配置文件也支持 4:2:2 色度二次采样。 |
| HDR 支持 | 不支持 |
| 可变帧速率 (VFR) 支持 | 不支持 |
| 浏览器兼容性 |

| 特征 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| MPEG-2 support | 不支持 | 不支持 | 不支持 | 不支持 | 不支持 | 支持 |

 |
| 容器支持 | MPEG、MPEG-TS（MPEG 传输流）、MP4、QuickTime |
| RTP (en-US) / WebRTC兼容 | 不支持 |
| 支持/维护组织 | MPEG /
 ITU |
| 规范 | https://www.itu.int/rec/T-REC-H.262https://www.iso.org/standard/61152.html |
| 许可 | 专利限制;截至 2019 年 4 月 1 日，除马来西亚和菲律宾外，所有专利均已在全球范围内到期，因此 MPEG-2 可以在这两个国家之外自由使用。专利由MPEG LA授权。 |

### Theora

**Theora**，由 Xiph.org 开发，是一个开放且免费的视频编解码器，可以无需版税或许可即可使用。Theora 在质量和压缩率上可与 MPEG-4 Part 2 Visual 和 AVC 相媲美，即使不是顶级的视频编码选择，它也是一个非常好的选择。但它不受任何许可问题的影响以及相对较低的 CPU 资源要求使其成为许多软件和 Web 项目的热门选择。低 CPU 占用影响特别有用，因为没有可用于 Theora 的硬件解码器。

Theora 最初基于 On2 Technologies 的 VC3 编解码器。该编解码器及其规范是在 LGPL 许可下发布的，并委托给 Xiph.org，后者随后将其开发为 Theora 标准。

Theora 的一个缺点是它仅支持每个颜色分量 8 位，无法选择使用 10 位或更多位以避免色带。也就是说，每个组件 8 位仍然是当今最常用的颜色格式，因此在大多数情况下，这只是一个小小的不便。此外，Theora 只能在 Ogg 容器中使用。然而，最大的缺点是 Safari 不支持它，这使得 Theora 不仅在 macOS 上不可用，而且在数以百万计的 iPhone 和 iPad 上都无法使用。

Theora Cookbook 提供了有关 Theora 以及它在其中使用的 Ogg 容器格式的更多详细信息。

|  |  |
| --- | --- |
| 支持的比特率 | Up to 2 Gbps |
| 支持的帧率 | 无限制;支持任何非零值。帧速率指定为 32 位分子和 32 位分母，以允许非整数帧速率。 |
| 压缩 | 基于有损 DCT 的算法 |
| 支持的帧大小 | Any combination of width and height up to 1,048,560 x 1,048,560 pixels |
| 支持的颜色模式 | 具有 4:2:0、4:2:2 和 4:4:4 色度二次采样的 Y'CbCr，每个分量 8 位 |
| HDR 支持 | 不支持 |
| 可变帧速率 (VFR) 支持 | Yes
虽然 Theora 不支持单个流中的可变帧速率 (VFR)，但多个流可以在单个文件中链接在一起，并且每个流都可以有自己的帧速率，从而允许本质上是 VFR。但是，如果帧速率需要频繁更改，这是不切实际的。 |
| 浏览器兼容性 |

| 特征 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| Theora support | 3 | 支持 | 3.5 | 不支持 | 10.5 | 不支持 |

Edge 通过可选的 Web 媒体扩展插件支持 Theora。 |
| 容器支持 | Ogg |
| RTP (en-US) / WebRTC兼容 | 不支持 |
| 支持/维护组织 | Xiph.org |
| 规范 | https://www.theora.org/doc/ |
| 许可 | 开放且免版税和任何其他许可要求 |

### VP8

**Video Processor 8**（**VP8**）编解码器最初由 On2 Technologies 创建。在收购 On2 之后，Google 发布了 VP8 作为一种开放且免版税的视频格式，并承诺不强制执行相关专利。在质量和压缩率方面，VP8 可与 AVC 媲美。

如果浏览器支持，VP8 允许带有 Alpha 通道的视频，允许视频播放的背景可以通过视频看到，达到每个像素的 Alpha 分量指定的程度。

HTML 内容中的 VP8 有很好的浏览器支持，尤其是在 WebM 文件中。这使得 VP8 成为你的内容的理想候选者，尽管如果你可以使用 VP9，它是一个更好的选择。Web 浏览器是*需要*支持 WebRTC 的 VP8，但并非所有这样做的浏览器都支持 HTML 音频和视频元素。

|  |  |
| --- | --- |
| 支持的比特率 | 无限制;除非强制执行基于级别的限制，否则没有最大值 |
| 支持的帧率 | 无限制 |
| 压缩 | 基于有损 DCT 的算法 |
| 支持的帧大小 | Up to 16,384 x 16,384 pixels |
| 支持的颜色模式 | Y'CbCr 4:2:0 色度二次采样，每个分量 8 位 |
| HDR 支持 | 不支持 |
| 可变帧速率 (VFR) 支持 | 支持 |
| 浏览器兼容性 |

| 特征 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| VP8 support | 25 | 14 | 4 | 9 | 16 | 12.1 |
| MSE 兼容性 |  |  | 支持 |  |  |  |

对 VP8 的边缘支持需要使用媒体源扩展。
macOS：Safari 14.1 在 WebRTC、MSE 和视频元素中支持 VP8。Safari 12.2 仅支持 WebRTC 连接中的 VP8。
iOS：Safari 12.1 及更高版本仅在 WebRTC 连接中支持 VP8。
当没有 H.264 硬件解码器可用时，Firefox 仅在 MSE 中支持 VP8。使用 `MediaSource.isTypeSupported()` 检查可用性。 |
| 容器支持 | 3GP、Ogg、WebM |
| RTP (en-US) / WebRTC 兼容 | 支持; VP8 是 WebRTC 规范要求的编解码器之一 |
| 支持/维护组织 | Google |
| 规范 | RFC 6386 |
| 许可 | 开放且免版税和任何其他许可要求 |

### VP9

**Video Processor 9**（**VP9**）是 Google 开发的旧 VP8 标准的继承者。与 VP8 一样，VP9 是完全开放且免版税的。其编解码性能与 AVC 相当或略快，但质量更好。VP9 的编码视频质量在相似比特率下可与 HEVC 相媲美。

VP9 的主要配置文件仅支持 4:2:0 色度子采样级别的 8 位色深，但其配置文件包括对更深颜色的支持和全范围的色度子采样模式。它支持多种 HDR 实现，并在选择帧速率、纵横比和帧大小方面提供了很大的自由度。

VP9 被浏览器广泛支持，并且编解码器的硬件实现相当普遍。VP9 是 WebM 规定的两个视频编解码器之一（另一个是 VP8）。但请注意，Safari 对 WebM 和 VP9 的支持仅在 14.1 版中引入，因此如果你选择使用 VP9，请考虑为 iPhone、iPad 和 Mac 用户提供备用格式，例如 AVC 或 HEVC。

如果你能够使用 WebM 容器（并且可以在需要时提供后备视频），VP9 是一个不错的选择。如果你希望使用开放编解码器而不是专有编解码器，则尤其如此。

|  |  |
| --- | --- |
| 支持的比特率 | 无限制；除非强制执行基于级别的限制，否则没有最大值 |
| 支持的帧率 | 无限制 |
| 压缩 | 基于有损 DCT 的算法 |
| 支持的帧大小 | Up to 65,536 x 65,536 pixels |
| 支持的颜色模式 |

| 配置 | 颜色深度 | 色度二次采样 |
| --- | --- | --- |
| Profile 0 | 8 | 4:2:0 |
| Profile 1 | 8 | 4:2:0, 4:2:2, and 4:4:4 |
| Profile 2 | 10 to 12 | 4:2:0 |
| Profile 3 | 10 to 12 | 4:2:0, 4:2:2, and f:4:4 |

 色彩空间支持：Rec. 601、Rec. 709、Rec. 2020、SMPTE C、MPTE-240M（已过时；由 Rec. 709 取代），以及
 sRGB。
  |
| HDR 支持 |
 支持；HDR10+、HLG 和
 PQ |
| 可变帧速率（VFR）支持 | 支持 |
| 浏览器兼容性 |

| 特征 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| VP9 支持 | 29 | 14 | 28 | 不支持 | 10.6 | 14 (macOS), 15 (iOS) |
| MSE 兼容性 |  |  | 支持 |  |  | 14 (macOS 11.3+), 15 (iOS) |

当没有 H.264 硬件解码器可用时，Firefox 仅在 MSE 中支持 VP8。使用 `MediaSource.isTypeSupported()` 检查可用性。* Safari 14：（macOS、iOS）在 WebM 中支持 VP9 for WebRTC。
* Safari 14：(macOS) 从 MacOS 11.3 开始支持MSE中的 VP9。
* Safari 14.1：（macOS）支持“无处不在”包含 VP9 视频轨道的 WebM 文件。
* Safari 15：（macOS）在 MSE 的 WebM 中支持 VP9。
 |
| 容器支持 | MP4、Ogg、WebM |
| RTP (en-US) / WebRTC 兼容 | 支持 |
| 支持/维护组织 | Google |
| 规范 | https://www.webmproject.org/vp9/ |
| 许可 | 开放且免版税和任何其他许可要求 |

选择视频编解码器
--------

在决定使用那种编码器之前请先确定以下问题的答案：

* 你希望使用开放格式，还是要考虑专有格式？
* 你是否有资源为你的每个视频制作不止一种格式？提供后备选项的能力极大地简化了决策过程。有没有你愿意牺牲兼容性的浏览器？
* 你需要支持的最旧的网络浏览器版本是多少？例如，你是否需要在过去五年内发布的每个浏览器上工作，还是仅在过去一年内工作？

在以下部分中，我们为特定用例提供推荐的编解码器选择。对于每个用例，你最多可以找到两个建议。如果被认为最适合用例的编解码器是专有的或可能需要支付版税，则提供两个选项：第一个是开放且免版税的选项，然后是专有选项。

如果你只能为每个视频提供一个版本，则可以选择最适合你需求的格式。第一个建议是质量、性能和兼容性的良好组合。第二种选择将是最广泛兼容的选择，但会牺牲一些质量、性能和/或大小。

### 日常视频推荐

首先，让我们看看在典型网站上展示的视频的最佳选择，例如博客、信息网站、使用视频来展示产品的小型企业网站（但不是视频本身就是产品的地方）等等。

1. **WebM** 容器，使用 **VP9** 视频编解码器和 **Opus (en-US)** 音频编解码器。这些都是开放的、免版税的格式，通常都得到很好的支持，尽管只是在最近的浏览器中，这就是为什么需要准备一个备用视频。

```html
<video controls src="filename.webm"></video>
```

2. **MP4** 容器和 **AVC**（**H.264**）视频编解码器，最好使用 **AAC (en-US)** 作为你的音频编解码器。这是因为带有 AVC 和 AAC 编解码器的 MP4 容器是一种广泛支持的组合——事实上，每个主流浏览器都支持它——而且质量通常对大多数用例都很好。但是，请确保验证你是否符合许可证要求。

```html
<video controls>
  <source type="video/webm" src="filename.webm" />
  <source type="video/mp4" src="filename.mp4" />
</video>
```

**备注：** 无论 `<video>` 元素中是否有任何 `<source>` 元素，`<video>` 元素都是需要闭合的 `</video>` 标签。

### 高质量视频演示的建议

如果你的任务是以尽可能高的质量呈现视频，你可能会从提供尽可能多的格式中受益，因为能够提供最佳质量的编解码器往往也是最新的，因此最有可能在浏览器中出现空白兼容性。

1. 一个 WebM 容器，视频使用 AV1，音频使用 Opus。如果你在编码 AV1 时能够使用 High 或 Professional 配置文件，在 6.3 等高级别，你可以在 4K 或 8K 分辨率下获得非常高的比特率，同时保持出色的视频质量。使用 Opus 的 Fullband 配置文件以 48 kHz 采样率对音频进行编码可最大限度地提高捕获的音频带宽，几乎可以捕获人类听觉范围内的整个频率范围。

```html
<video controls src="filename.webm"></video>
```

2. 使用 HEVC 编解码器的 MP4 容器，使用高级 Main 配置文件之一，例如具有 10 或 12 位色深的 Main 4:2:2，甚至是 Main 4:4:4 个配置文件，每个组件最多 16 位。在高比特率下，这提供了出色的图形质量和出色的色彩再现。此外，你可以选择包含 HDR 元数据以提供高动态范围视频。对于音频，请以高采样率（至少 48 kHz，但理想情况下为 96 kHz）使用 AAC 编解码器，并使用复杂编码而不是快速编码进行编码。

```html
<video controls>
  <source type="video/webm" src="filename.webm" />
  <source type="video/mp4" src="filename.mp4" />
</video>
```

### 归档、编辑或混音建议

目前在 Web 浏览器中通常没有任何无损（甚至接近无损）的视频编解码器。原因很简单：视频太大。根据定义，无损压缩不如有损压缩有效。例如，具有 4:2:0 色度二次采样的未压缩 1080p 视频（1920 x 1080 像素）至少需要 1.5 Gbps。使用诸如 FFV1（Web 浏览器不支持）之类的无损压缩可能会将其降低到 600 Mbps 左右，具体取决于内容。这仍然是每秒通过连接泵送的大量比特，并且目前对于任何实际使用都不实用。

即使某些有损编解码器具有可用的无损模式，情况也是如此；当前的任何网络浏览器都没有实现无损模式。你可以做的最好的事情是选择使用有损压缩的高质量编解码器并将其配置为执行尽可能少的压缩。一种方法是将编解码器配置为使用“快速”压缩，这本质上意味着实现的压缩更少。

#### 在外部准备视频

要从你的网站或应用程序外部为存档目的准备视频，请使用对原始未压缩视频数据执行压缩的实用程序。例如，免费的 x264 实用程序可用于使用非常高的比特率对 AVC 格式的视频进行编码：

```bash
x264 --crf 18 -preset ultrafast --output outfilename.mp4 infile
```

虽然其他编解码器在大幅压缩视频时在最佳情况下可能能获得更好的质量，但通常这些编解码器的速度都很慢，因此，在总体质量相似的情况下，这种近乎无损的压缩方式要快很多。

#### 录制视频

考虑到你可以获得多接近无损的限制，你可以考虑使用 AVC 或 AV1。例如，如果你使用 MediaStream Recording API 录制视频，则在创建 `MediaRecorder` 时可能会使用如下代码目的：

```js
const kbps = 1024;
const Mbps = kbps \* kbps;

const options = {
  mimeType: 'video/webm; codecs="av01.2.19H.12.0.000.09.16.09.1, flac"',
  bitsPerSecond: 800 \* Mbps,
};

let recorder = new MediaRecorder(sourceStream, options);
```

此示例创建一个 12 位色彩及使用 4:4:4 色度二次采样的 BT.2100 HDR 配置，并且通过 FLAC (en-US) 录制无损音频的 `MediaRecorder`。生成的文件的视频和音频轨道之间共享的比特率不超过 800Mbps。你可能需要根据硬件性能、需求和你选择使用的特定编解码器来调整这些值。这种比特率对于网络传输显然不现实，可能只在本地使用。

将 `codecs` 参数的值分解为其点描述的属性，我们看到以下内容：

| Value | Description |
| --- | --- |
| `av01` | The four-character code (4CC) designation identifying the AV1 codec. |
| `2` | The profile. A value of 2 indicates the Professional profile. A value of 1 is the High profile, while a value of 0 would specify the Main profile. |
| `19H` | The level and tier. This value comes from the table in section A.3 of the AV1 specification, and indicates the high tier of Level 6.3. |
| `12` | The color depth. This indicates 12 bits per component. Other possible values are 8 and 10, but 12 is the highest-accuracy color representation available in AV1. |
| `0` | The monochrome mode flag. If 1, then no chroma planes would be recorded, and all data should be strictly luma data, resulting in a greyscale image. We've specified 0 because we want color. |
| `000` | The chroma subsampling mode, taken from section 6.4.2 in the AV1 specification. A value of 000, combined with the monochrome mode value 0, indicates that we want 4:4:4 chroma subsampling, or no loss of color data. |
| `09` | The color primaries to use. This value comes from section 6.4.2 in the AV1 specification; 9 indicates that we want to use BT.2020 color, which is used for HDR. |
| `16` | The transfer characteristics to use. This comes from section 6.4.2 as well; 16 indicates that we want to use the characteristics for BT.2100 PQ color. |
| `09` | The matrix coefficients to use, from the section 6.4.2 again. A value of 9 specifies that we want to use BT.2020 with variable luminance; this is also known as BT.2010 YbCbCr. |
| `1` | The video "full range" flag. A value of 1 indicates that we want the full color range to be used. |

你选择编解码器的文档可能会提供你在构建 `codecs` 参数时将使用的信息。

参见
--

* 网页音频编码指南 (en-US)
* 媒体容器格式（文件类型）
* 处理 web 内容中的媒体支持问题 (en-US)
* WebRTC 使用的编解码器 (en-US)
* RFC 6381：“Bucket”媒体类型的“编解码器”和“配置文件”参数
* RFC 5334：Ogg 媒体类型
* RFC 3839：3GPP 多媒体文件的 MIME 类型注册
* RFC 4381：3GPP2 多媒体文件的 MIME 类型注册
* RFC 4337：MPEG-4 多媒体文件的 MIME 类型注册
* Opera 浏览器中的视频编解码器
* IE 浏览器中的视频（video）和音频（audio）编解码器
* Chrome 浏览器中的视频和音频解码器


图像文件类型与格式指南 - Web 媒体技术

图像文件类型与格式指南
===========

在本指南中，我们将介绍 web 浏览器普遍支持的图像文件类型，并提供一些关于它们的信息与见解，帮助你为你的网站选择最合适的图像格式。

常见图像文件类型
--------

下面列出了网络上最常用的图像文件格式。

| 缩写 | 文件格式 | MIME 类型 | 文件扩展名 | 摘要 |
| --- | --- | --- | --- | --- |
| APNG | 动态可移植网络图形 | `image/apng` | `.apng` | 是无损动画序列的良好选择（GIF 性能较差）。AVIF 和 WebP 性能更好，但浏览器支持较少。**以下浏览器支持**：Chrome、Edge、Firefox、Opera、Safari。 |
| AVIF | AV1 图像档案格式 | `image/avif` | `.avif` | 由于其性能高，且无需版税，是图像和动画图像的理想选择。与 PNG 或 JPEG 相比，它的压缩效果更好，支持更高的色深、动画帧、透明度等。请注意，在使用 AVIF 时，应包含浏览器支持更好的回退格式（也就是说，要使用 `<picture>` 元素）。**以下浏览器支持**：Chrome、Firefox（只支持静态图，动态图尚未实现）、Opera、Safari。 |
| GIF | 图像互换格式 | `image/gif` | `.gif` | 是简单图像和动画的不错选择。无损*和*有索引的静态图像首选 PNG，动画序列可考虑 WebP、AVIF 或 APNG。**以下浏览器支持**：Chrome、Edge、Firefox、IE、Opera、Safari。 |
| JPEG | 联合图像专家小组图像 | `image/jpeg` | `.jpg`、`.jpeg`、`.jfif`、`.pjpeg`、`.pjp` | 静态图像有损压缩的理想选择（目前最流行）。如果需要更精确地再现图像，则首选 PNG；如果需要更好的再现效果和更高的压缩率，则首选 WebP/AVIF。**以下浏览器支持**：Chrome、Edge、Firefox、IE、Opera、Safari。 |
| PNG | 便携式网络图形 | `image/png` | `.png` | 与 JPEG 相比，PNG 能更精确地再现源图像，或在需要透明的情况下更受青睐。WebP/AVIF 可提供更好的压缩和再现效果，但浏览器的支持比较有限。**以下浏览器支持**：Chrome、Edge、Firefox、IE、Opera、Safari。 |
| SVG | 可缩放矢量图形 | `image/svg+xml` | `.svg` | 矢量图像格式；适用于用户界面元素、图标、图表等，必须以不同尺寸精确绘制。**以下浏览器支持**：Chrome、Edge、Firefox、IE、Opera、Safari。 |
| WebP | Web 图像格式 | `image/webp` | `.webp` | 是静止图像和动画图像的绝佳选择。WebP 的压缩效果比 PNG 或 JPEG 好得多，而且支持更高的色深、动画帧和透明度等。AVIF 的压缩效果稍好，但在浏览器中的支持度不高，而且不支持渐进式渲染。**以下浏览器支持**：Chrome、Edge、Firefox、Opera、Safari。 |

**备注：** 与 WebP 和 AVIF 等较新的格式相比，PNG、JPEG 和 GIF 等较老的格式性能较差，但却能获得更广泛的“历史”浏览器支持。较新的图像格式越来越受欢迎，因为不支持这些格式的浏览器变得越来越无关紧要（即市场份额几乎为零）。

下面列出了 web 上出现的图像格式，但 web 内容应避免使用这些格式（通常是因为这些格式没有广泛的浏览器支持，或者有更好的替代格式）。

| 缩写 | 文件格式 | MIME 类型 | 文件扩展名 | 支持的浏览器 |
| --- | --- | --- | --- | --- |
| BMP | 位图文件 | `image/bmp` | `.bmp` | Chrome、Edge、Firefox、IE、Opera、Safari |
| ICO | Microsoft 图标 | `image/x-icon` | `.ico`、`.cur` | Chrome、Edge、Firefox、IE、Opera、Safari |
| TIFF | 标签图像文件格式 | `image/tiff` | `.tif`、`.tiff` | Safari |

**备注：** 每种图像格式的缩写可链接到有关该格式的较长描述、其功能和详细的浏览器兼容性信息（包括哪些版本引入了支持以及后来可能引入的特定特殊功能）。

**备注：** Safari 11.1 新增了使用视频格式替代 gif 动画的功能，而其他浏览器没有添加这方面的支持。详见 Chromium bug 和 Firefox bug 以了解更多信息。

图像文件类型详介
--------

下文将简要介绍 web 浏览器支持的每种图像文件类型。

在下表中，**每分量比特**是指用于表示每种色彩分量的比特数。例如，RGB 颜色深度为 8 表示红、绿、蓝三原色各用 8 位数值表示。另一方面，**比特深度**是指用于表示内存中每个像素的总比特数。

### APNG（动态可移植网络图形）

APNG 是 Mozilla 首次推出的一种文件格式，它扩展了 PNG 标准，增加了对动画图像的支持。在概念上，APNG 与已经使用了几十年的动画 GIF 格式相似，但 APNG 的功能更强，它支持多种颜色深度，而动画 GIF 只支持 8 位索引颜色。

APNG 适用于无需与其他活动或音轨同步的基本动画，如进度指示器、活动加载器和其他动画序列。例如，APNG 是苹果 iMessage 应用程序（和 iOS 上的“信息”应用程序）创建动画贴纸时支持的格式之一。它们也常用于 web 浏览器用户界面的动画部分。

|  |  |
| --- | --- |
| MIME 类型 | `image/apng` |
| 文件拓展名 | `.apng` |
| 规范 | wiki.mozilla.org/APNG\_Specification |
| 浏览器兼容性 | Chrome 59、Edge 12、Firefox 3、Opera 46、Safari 8 |
| 最高分辨率 | 2,147,483,647×2,147,483,647 像素 |
| 支持的颜色模式 |

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | 1、2、4、8 和 16 | 每个像素由一个 *D* 位值组成，表示灰度像素的亮度。 |
| 真彩色 | 8 和 16 | 每个像素由三个 *D* 位值表示，分别代表红、绿、蓝三色的色阶。 |
| 索引颜色 | 1、2、4 和 8 | 每个像素都是一个 *D* 位值，表示调色板的索引，调色板包含在 APNG 文件的 `PLTE` 块中；调色板中的颜色都使用 8 位深度。 |
| 带有透明度的灰度值 | 8 和 16 | 每个像素由两个 *D* 位值表示：灰度像素的强度和表示像素不透明程度的 alpha 样本。 |
| 带有透明度的真彩色 | 8 和 16 | 每个像素由四个 *D* 像素颜色成分组成：红色、绿色、蓝色和表示像素不透明程度的 alpha 样本。 |

 |
| 压缩 | 无损 |
| 许可 | 根据创作共用署名-相同方式共享许可（CC-BY-SA）3.0 或更高版本免费开放。 |

### AVIF 图像

AV1 图像文件格式（AVIF）是一种功能强大、开源、免版税的文件格式，它在高效图像文件格式（HEIF）容器中对 AV1 比特流进行编码。

**备注：** AVIF 有可能成为在 web 内容中共享图像的“下一件大事”。它具有最先进的特性和性能，却没有阻碍同类替代产品发展的复杂许可和专利使用费的束缚。

AV1 是一种编码格式，最初设计用于在互联网上传输视频。该格式得益于近年来视频编码技术的长足进步，并有可能受益于对硬件渲染的相关支持。不过，在某些情况下它也有缺点，因为视频和图像编码有一些不同的要求。

该格式可以提供：

* 与 JPG 和 PNG 相比，在视觉上相似的压缩水平下，有损压缩效果极佳（例如，有损 AVIF 图像比 JPEG 图像小 50%）。
* 一般来说，AVIF 比 WebP 有更好的压缩效果。对于相同的 JPG 图像集，中值压缩率为 50%，而 WebP 为 30%（资料来源：AVIF 与 WebP 的对比（CTRL 博客））。
* 无损压缩。
* 动画/多图像存储（类似于 GIF 动画，但压缩效果更好）
* 支持 Alpha 通道（即透明）。
* *高动态范围（HDR）*：支持存储图像，使图像最亮和最暗部分之间的对比度更大。
* 宽色域：支持包含更大色彩范围的图像。

AVIF 不支持渐进式渲染，因此文件必须完全下载后才能显示。这通常对真实世界的用户体验影响不大，因为 AVIF 文件比同等的 JPEG 或 PNG 文件小得多，因此下载和显示的速度也快得多。文件大小越大，影响就越大，因此应考虑使用支持渐进式渲染的格式。

Chrome、Opera、Safari 和 Firefox 支持 AVIF（Firefox 支持静态图像，但不支持动画），但 Edge 和 IE 不支持。由于支持尚不全面（而且没有什么历史深度），应使用 `<picture>` 元素（或其他方法）提供 WebP、JPEG 或 PNG 格式的回退。

|  |  |
| --- | --- |
| MIME 类型 | `image/avif` |
| 文件扩展名 | `.avif` |
| 规范 | AV1 图像文件格式（AVIF） |
| 浏览器兼容性 | Chrome 85、Opera 71、Firefox 93 和 Safari 16.1
 * Firefox 93 支持静态图像，色彩空间支持全色和有限范围色彩，图像变换支持镜像和旋转。偏好设置 image.avif.compliance\_strictness 可用于调整符合规范的严格程度。不支持动态图像。
* Firefox 77~92 版本需要将首选项 `image.avif.enable` 设置为 `true`。更早期版本仅提供基本支持。
 |
| 最大尺寸 | 2,147,483,647×2,147,483,647 像素 |
| 支持的颜色模式 | AV1 比特流 & 解码过程规范，第 6.4.2 节中提供了色彩模式支持信息：颜色配置语义。
不完全的摘要：* 颜色模式：YUV444、YUV422、YUV420
* 灰度支持：YUV400
* 位数：8/10/12-bit
* 透明度支持
* ICC 配置项支持
* NCLX 支持：sRGB、linear sRGB、linear Rec2020、PQ Rec2020、HLG Rec2020、PQ P3、HLG P3 等
* Tiling 支持
 |
| 压缩 | 有损压缩和无损压缩 |
| 许可 | 免版税。有关许可信息，请访问版权页面。 |

### BMP（位图文件）

**BMP**（**位图图像**）文件类型在 Windows 计算机上最为常见，一般只用于 web 应用程序和内容中的特殊情况。

**警告：** 网站内容通常应避免使用 BMP 文件。最常见的 BMP 文件格式将数据表示为未压缩的光栅图像，与 png 或 jpg 图像类型相比，文件大小较大。目前有更高效的 BMP 格式，但并未广泛使用，web 浏览器也很少支持。

BMP 理论上支持多种内部数据表示。最简单也是最常用的 BMP 文件形式是一种未压缩的光栅图像，每个像素占 3 个字节，分别代表其红、绿、蓝三部分，每行用 `0x00` 字节填充，宽度为 4 字节的倍数。

虽然规范中定义了其他数据表示方式，但它们并没有被广泛使用，通常完全没有实现。这些功能包括：支持不同的位深度、索引颜色、alpha 通道和不同的像素顺序（默认情况下，BMP 从左下角向右上角写入，而不是从左上角向右下角写入）。

从理论上讲，BMP 文件支持多种压缩算法，图像数据也可以使用 JPEG 或 PNG 格式存储。

|  |  |
| --- | --- |
| MIME 类型 | `image/bmp` |
| 文件扩展名 | `.bmp` |
| 规范 | 没有规范；不过，微软在 learn.microsoft.com/zh-cn/windows/win32/gdi/bitmap-storage 提供了格式的通用文档。 |
| 浏览器兼容性 | Chrome、Edge、Firefox、Internet Explorer、Opera 和 Safari 的所有版本。 |
| 最大尺寸 | 32,767×32,767 像素或 2,147,483,647×2,147,483,647 像素，取决于格式版本 |
| 支持的颜色模式 |

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | 1 | 每个比特代表一个像素，可以是黑色或白色。 |
| 真彩色 | 8 和 16 | 每个像素由三个值表示，分别代表红色、绿色和蓝色，每个值为 *D* 位。 |
| 索引颜色 | 2、4 和 8 | 每个像素由一个 2、4 或 8 位的值表示，作为色彩表的索引。 |
| 带有灰度的真彩色 | *n/a* | BMP 没有明显的灰度格式。 |
| 带有透明度的真彩色 | 8 和 16 | 每个像素由四个值表示，分别代表红、绿、蓝和 alpha 颜色成分；每个值为 *D* 位。 |

 |
| 压缩 | 支持多种压缩方法，包括有损或无损算法 |
| 许可 | 由 Microsoft Open Specification Promise 记载，虽然微软拥有针对 BMP 的专利，但他们已公布了一项承诺，只要满足特定条件，他们就不会主张其专利权。但这并不等同于许可。BMP 包含在 Windows 元文件格式（`.wmf`）中。 |

### GIF（图像互换格式）

1987 年，CompuServe 在线服务提供商推出了 **GIF**（**图像互换格式**）图像文件格式，为其服务的所有成员提供一种可使用的压缩图形格式。GIF 使用 Lempel-Ziv-Welch（LZW）算法对 8 位索引彩色图形进行无损压缩。GIF 和 XBM 是 HTML 最早支持的两种图形格式之一。

GIF 中的每个像素都由一个 8 位值表示，作为 24 位颜色（红、绿、蓝各 8 位）调色板的索引。颜色表的长度总是 2 的幂次（即每个调色板有 2、4、8、16、32、64 或 256 个条目）。要模拟 255 或 256 色以上的颜色，一般使用抖动。技术上可以对多个图像块进行平铺，每个图像块都有自己的调色板，以创建真彩色图像，但在实践中很少这样做。

像素是不透明的，除非特定的颜色指数被指定为透明，在这种情况下，染上该值的像素是完全透明的。

GIF 支持简单的动画，即在最初的全尺寸帧之后，提供一系列反映每帧图像变化部分的图像。

几十年来，GIF 因其简洁性和兼容性而广受欢迎。在社交媒体时代，GIF 动画开始被广泛用于制作短“视频”、备忘录和其他简单的动画序列。

GIF 的另一个流行特性是支持隔行扫描，即像素行的存储顺序会被打乱，因此部分接收的文件可以较低的质量显示。这在网络连接速度较慢时尤其有用。

GIF 是简单图像和动画的不错选择，不过将全彩图像转换为 GIF 可能会导致不理想的抖动。通常情况下，现代内容应使用 PNG 制作无损*和*索引静态图像，并应考虑使用 APNG 制作无损动画序列。

|  |  |
| --- | --- |
| MIME 类型 | `image/gif` |
| 文件扩展名 | `.gif` |
| 规范 | GIF87a 规范GIF89a 规范 |
| 浏览器兼容性 | Chrome、Edge、Firefox、Internet Explorer、Opera 和 Safari 浏览器的所有版本 |
| 最大尺寸 | 65,536×65,536 像素 |
| 支持的颜色模式 |

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | *n/a* | GIF 不包括专用的灰度格式。 |
| 真彩色 | *n/a* | GIF 不支持真彩色像素。 |
| 索引颜色 | 8 | GIF 调色板中的每种颜色定义为红、绿、蓝各 8 位（每个像素共 24 位）。 |
| 带有灰度的真彩色 | *n/a* | GIF 不提供专用的灰度格式。 |
| 带有透明度的真彩色 | *n/a* | GIF 不支持真彩色像素。 |

 |
| 压缩 | 无损 (LZW) |
| 许可 | 虽然 GIF 格式本身是开放的，但 LZW 压缩算法在本世纪初之前一直受专利保护。截至 2004 年 7 月 7 日，所有相关专利都已过期，GIF 格式可以自由使用。 |

### ICO（Microsoft Windows 图标）

ICO（Microsoft Windows 图标）文件格式是微软为 Windows 系统的桌面图标而设计的。不过，早期版本的 Internet Explorer 允许网站在其根目录中提供名为 `favicon.ico` 的 ICO 文件，以指定一个 **favicon**——一个显示在收藏夹菜单和其他对网站图标有用的地方的图标。

一个 ICO 文件可以包含多个图标，文件开头有一个目录，列出每个图标的详细信息。目录之后是图标的数据。每个图标的数据既可以是不带文件头的 BMP 图像，也可以是完整的 PNG 图像（包括文件头）。如果使用 ICO 文件，则应使用 BMP 格式，因为直到 Windows Vista 才添加了对 ICO 文件内的 PNG 的支持，而且这种支持可能并不完善。

**警告：** ICO 文件*不应*用于网页内容。此外，如为不同的使用环境提供图标所述，它们作为网站图标的使用已经减少，转而使用 PNG 文件和 `<link>` 元素。

|  |  |
| --- | --- |
| MIME 类型 | `image/vnd.microsoft.icon`（官方格式），`image/x-icon`（由 Microsoft 使用） |
| 文件扩展名 | `.ico` |
| 规范 |  |
| 浏览器兼容性 | Chrome、Edge、Firefox、Internet Explorer、Opera 和 Safari 浏览器的所有版本 |
| 最大尺寸 | 256×256 像素 |
| 支持的颜色模式 |

BMP 格式的图标| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | 1 | 每个比特代表一个像素，可以是黑色或白色。 |
| 真彩色 | 8 和 16 | 每个像素由三个值表示，分别代表红色、绿色和蓝色，每个值为 *D* 位。 |
| 索引颜色 | 2、4 和 8 | 每个像素由一个 2、4 或 8 位的值表示，作为色彩表的索引。 |
| 带有灰度的真彩色 | *n/a* | BMP 没有明显的灰度格式。 |
| 带有透明度的真彩色 | 8 和 16 | BMP 没有明显的灰度格式。每个像素由四个值表示，分别代表红、绿、蓝和 Alpha 颜色分量；每个值为 *D* 位。 |

PNG 格式的图标| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | 1、2、4、8 和 16 | 每个像素由一个 *D* 位值组成，表示灰度像素的亮度。 |
| 真彩色 | 8 和 16 | 每个像素由三个*D*位值表示，分别代表红、绿、蓝三色的色阶。 |
| 索引颜色 | 1、2、4 和 8 | 每个像素都是一个 *D* 位值，表示调色板的索引，调色板包含在 APNG 文件的 `PLTE` 块中；调色板中的颜色都使用 8 位深度。 |
| 带有灰度的真彩色 | 8 和 16 | 每个像素由两个 *D* 位值表示：灰度像素的强度和表示像素不透明程度的 Alpha 样本。 |
| 带有透明度的真彩色 | 8 和 16 | 每个像素由四个 *D* 像素颜色成分组成：红色、绿色、蓝色和表示像素不透明程度的 alpha 样本。 |

 |
| 压缩 | BMP 格式的图标几乎总是使用无损压缩，但也有有损压缩方法。PNG 图标始终使用无损压缩。 |
| 许可 | — |

### JPEG（联合图像专家小组图像）

JPEG（通常发音为“**jay-peg**”）图像格式是目前最广泛使用的静态图像有损压缩格式。它尤其适用于照片；将有损压缩应用于需要清晰度的内容，如图表，可能会产生令人不满意的效果。

JPEG 实际上是一种压缩照片的数据格式，而不是一种文件类型。JFIF（**J**PEG **F**ile **I**nterchange **F**format）规范描述了我们认为的“JPEG”图像的文件格式。

|  |  |
| --- | --- |
| MIME 类型 | `image/jpeg` |
| 文件扩展名 | `.jpg`、`.jpeg`、`.jpe`、`.jif`、`.jfif` |
| 规范 | jpeg.org/jpeg/ |
| 浏览器兼容性 | Chrome、Edge、Firefox、Internet Explorer、Opera 和 Safari 浏览器的所有版本 |
| 最大尺寸 | 65,535×65,535 像素 |
| 支持的颜色模式 |

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | *n/a* | 使用单 Luma 通道（Y）可支持真正的灰度。 |
| 真彩色 | 8 | 每个像素由红、蓝、绿三种颜色分量描述，每种颜色分量为 8 位。 |
| 索引颜色 | *n/a* | JPEG 不提供索引颜色模式。 |
| 带有灰度的真彩色 | *n/a* | JPEG 不支持透明度通道。 |
| 带有透明度的真彩色 | *n/a* | JPEG 不支持透明度通道。 |

 |
| 压缩 | 有损；基于离散余弦变换 |
| 许可 | 截至 2006 年 10 月 27 日，所有美国专利均已过期。 |

### PNG（便携式网络图形）

PNG（读作“**ping**”）图像格式使用无损压缩，同时支持比 GIF 更高的颜色深度，效率更高，并具有完全支持 alpha 透明度的特点。

PNG 受广泛支持，所有主要浏览器都完全支持其特性。Internet Explorer 在第 4-5 版中引入了对 PNG 的支持，但直到 IE 9 才完全支持该特性，并且在其间的许多年里出现了许多臭名昭著的错误，包括在曾经风靡一时的 Internet Explorer 6 中。这减缓了 PNG 的应用，但现在它已被普遍使用，尤其是在需要精确复制源图像时。

|  |  |
| --- | --- |
| MIME 类型 | `image/png` |
| 文件扩展名 | `.png` |
| 规范 | w3.org/TR/PNG |
| 浏览器兼容性 |

| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| 基本支持 | 1 | 12 | 1 | 5 | 3.5.1（Presto）15（Blink） | 1 |
| Alpha 通道 | 1 | 12 | 1 | 5 | 6（Presto）所有（Blink） | 1 |
| 伽玛校正 | 否 | 是 | 1 | 8 | 1 | 损坏的 |
| 颜色校正 | 否 | 是 | 3 | 9 | 否 | 否 |
| 插帧 | 否 | ? | 1 | 损坏的 | 3.5.1 | 否 |

 |
| 最大尺寸 | 2,147,483,647×2,147,483,647 像素 |
| 支持的颜色模式 |

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | 1、2、4、8 和 16 | 每个像素由一个 *D* 位值组成，表示灰度像素的亮度。 |
| 真彩色 | 8 和 16 | 每个像素由三个*D*位值表示，分别代表红、绿、蓝三色的色阶。 |
|
| 索引颜色 | 1、2、4 和 8 | 每个像素都是一个 *D* 位值，表示调色板的索引，调色板包含在 APNG 文件的 `PLTE` 块中；调色板中的颜色都使用 8 位深度。 |
| 带有灰度的真彩色 | 8 和 16 | 每个像素由两个 *D* 位值表示：灰度像素的强度和表示像素不透明程度的 Alpha 样本。 |
| 带有透明度的真彩色 | 8 和 16 | 每个像素由四个 *D* 像素颜色成分组成：红色、绿色、蓝色和表示像素不透明程度的 alpha 样本。 |

 |
| 压缩 | 无损，可选择索引颜色，如 GIF |
| 许可 |
 ©2003 W3C（MIT、ERCIM、Keio)，保留所有权利。W3C
 免责声明、商标、文档使用和软件授权适用。没有已知的专利使用费。
  |

### SVG（可缩放矢量图形）

SVG 是一种基于 XML 的矢量图形格式，它将图像的内容指定为一系列绘图命令，这些命令可以创建形状、线条、应用颜色、滤镜等。SVG 文件非常适合用于图表、图标和其他可精确绘制任何尺寸的图像。因此，SVG 在现代网页设计的用户界面元素中很受欢迎。

SVG 文件是包含源代码的文本文件，解释后可绘制所需的图像。例如，此示例定义了一个初始大小为 100 x 100 单位的绘图区域，其中包含一条斜穿方框的线：

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>
```

在网页内容中使用 SVG 有两种方式：

1. 你可以直接在 HTML 中写入 `<svg>` 元素，包含 SVG 元素来绘制图像。
2. 你可以在任何可以使用其他图像类型的地方显示 SVG 图像，包括使用 `<img>` 和 `<picture>` 元素、`background-image` CSS 属性等。

对于可以使用一系列绘图命令来表示的图像来说，SVG 是一个理想的选择，尤其是当图像的渲染尺寸未知或可能变化时，因为 SVG 可以平滑地缩放到所需的尺寸。对于严格意义上的位图或照片图像，SVG 通常并不适用，尽管可以在 SVG 中包含位图图像。

|  |  |
| --- | --- |
| MIME 类型 | `image/svg+xml` |
| 文件扩展名 | `.svg` |
| 规范 | w3.org/TR/SVG2 |
| 浏览器兼容性 |

| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| SVG 支持 | 4 | 12 | 3 | 9 | 10（Presto）15（Blink） | 3.2 |
| SVG 作为图像（`<img>` 等） | 28 | 12 | 4 | 9 | 10（Presto）15（Blink） | 9 |

 |
| 最大尺寸 | 无限制 |
| 支持的颜色模式 | SVG 中的颜色是使用 CSS 颜色语法指定的。 |
| 压缩 | SVG 源可以在传输过程中使用 HTTP 压缩技术进行压缩，也可以在磁盘上以 `.svgz` 文件的形式进行压缩。 |
| 许可 |
 ©2018 W3C（MIT、ERCIM、Keio、Beihang），保留所有权利。W3C
 责任、商标、文档使用和软件授权适用。没有已知的专利使用费。
  |

### TIFF（标签图像文件格式）

TIFF 是一种光栅图形文件格式，用于存储扫描照片，但也可以是任何类型的图像。这是一种有点“重”的格式，因为 TIFF 文件往往比其他格式的图像要大。这是因为通常包含元数据，而且大多数 TIFF 图像要么未经压缩，要么使用压缩算法，压缩后的文件仍然相当大。

TIFF 支持多种压缩方法，但最常用的是传真软件使用的 CCITT 第 4 组（对于较早的传真系统，则为第 3 组）压缩系统，以及 LZW 和有损 JPEG 压缩。

TIFF 文件中的每个值都使用其**标签**（表示信息的类型，如图像的宽度）和**类型**（表示数据的存储格式）来指定，然后是要分配给该标签的数组值的长度（所有属性都存储在数组中，即使是单个值）。这样，相同的属性就可以使用不同的数据类型。例如，图像的宽度 `ImageWidth` 使用标签 `0x0100` 存储，是一个单项数组。通过指定类型 3（`SHORT`），`ImageWidth` 的值将存储为 16 位值：

| 标签 | 类型 | 大小 | 值 |
| --- | --- | --- | --- |
| `0x0100`（`ImageWidth`） | `0x0003`（`SHORT`） | `0x00000001`（1 个条目） | `0x0280`（640 像素） |

指定类型 4（`LONG`）可将宽度存储为 32 位值：

| 标签 | 类型 | 大小 | 值 |
| --- | --- | --- | --- |
| `0x0100`（`ImageWidth`） | `0x0004`（`LONG`） | `0x00000001`（1 个条目） | `0x00000280`（640 像素） |

单个 TIFF 文件可包含多个图像；例如，可用于表示多页文件（如多页扫描文件或收到的传真）。不过，读取 TIFF 文件的软件只需支持第一个图像。

TIFF 不仅支持 RGB，还支持多种色彩空间。这些空间包括 CMYK、YCbCr 等，这使得 TIFF 成为存储用于印刷、电影或电视媒体的图像的良好选择。

很久以前，一些浏览器支持在网页内容中使用 TIFF 图像；但如今，你需要使用特殊的库或浏览器插件才能做到这一点。因此，TIFF 文件在网页内容中并不实用，但在分发照片和其他用于精确编辑或打印的艺术品时，提供可下载的 TIFF 文件是很常见的。

|  |  |
| --- | --- |
| MIME 类型 | `image/tiff` |
| 文件扩展名 | `.tif`、`.tiff` |
| 规范 | https://www.adobe.com/devnet-apps/photoshop/fileformatashtml/#50577413\_pgfId-1035272 |
| 浏览器兼容性 | 没有浏览器集成对 TIFF 的支持；其价值在于作为一种下载格式 |
| 最大尺寸 | 4,294,967,295×4,294,967,295 像素（理论值） |
| 支持的颜色模式 |

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| Bilevel | 1 | 双字节 TIFF 每个字节存储 8 位，每个像素一位。`PhotometricInterpretation` 字段指定 0 和 1 中哪个是黑色，哪个是白色。 |
| 灰度 | 4 和 8 | 每个像素由一个 *D* 位值组成，表示灰度像素的亮度。 |
| 真彩色 | 8 | 所有真彩色 RGB 图像都使用红、绿、蓝各 8 位来存储。 |
| 索引颜色 | 4 和 8 | 每个像素都是 `ColorMap` 记录的索引，该记录定义了图像中使用的颜色。颜色地图列出了所有红色值，然后是所有绿色值，最后是所有蓝色值（而不是 `rgb, rgb, rgb…`）。 |
| 带有灰度的真彩色 | 4 和 8 | 通过在 `SamplesPerPixel` 字段中指定每个像素有 3 个以上的采样点，并指明 Alpha 类型（1 表示关联的、预乘的 Alpha 分量，2 表示非关联的 Alpha（单独的哑光）），可以添加 Alpha 信息；但是，TIFF 文件中很少使用 Alpha 通道，用户的软件可能也不支持。 |
| 带有透明度的真彩色 | 8 | 通过在 `SamplesPerPixel` 字段中指定每个像素有 3 个以上的采样点，并指明 Alpha 类型（1 表示关联的、预乘的 Alpha 分量，2 表示非关联的 Alpha（单独的哑光）），可以添加 Alpha 信息；但是，TIFF 文件中很少使用 Alpha 通道，用户的软件可能也不支持。 |

 |
| 压缩 | 大多数 TIFF 文件未经压缩，但支持无损 PackBits 和 LZW 压缩，以及有损 JPEG 压缩。 |
| 许可 | 无需许可证（除了与你可能使用的库相关的许可证）；所有已知专利均已过期。 |

### WebP 图像

WebP 支持通过基于 VP8 视频编解码器的预测编码进行有损压缩，以及通过替换重复数据进行无损压缩。有损 WebP 图像比视觉上压缩级别相似的 JPEG 图像平均小 25-35%。无损 WebP 图像通常比 PNG 格式的相同图像小 26%。

WebP 还支持动画：在有损 WebP 文件中，图像数据由 VP8 比特流表示，其中可能包含多个帧。无损 WebP 包含描述动画的 `ANIM` 块和表示动画序列一帧的 `ANMF` 块。支持循环播放。

WebP 目前已在主要网络浏览器的最新版本中获得广泛支持，但还没有深入的历史支持。需要提供 JPEG 或 PNG 格式的回退，例如 `<picture>` 元素。

|  |  |
| --- | --- |
| MIME 类型 | `image/webp` |
| 文件扩展名 | `.webp` |
| 规范 | RIFF 容器规范RFC 6386: VP8 Data Format and Decoding Guide（有损压缩）WebP 无损比特流规范 |
| 浏览器兼容性 |

| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| 有损 WebP 支持 | 17 | 18 | 65 | no | 11.10（Presto）15（Blink） | 14 |
| 无损 WebP | Android 2325 | 18 | 65 | 否 | 12.10（Presto）15（Blink） | 14 |
| 动画/th> | 32 | 18 | 65 | 否 | 19（Blink） | 14 |

WebP 还可用于从 Firefox 96 和 Chrome 50 的画布中*导出*图像。（参见 `HTMLCanvasElement.toBlob()` 以获取更详细的支持情况） |
| 最大尺寸 | 16,383×16,383 像素 |
| 支持的颜色模式 | 有损 WebP 以 8 位 Y'CbCr 4:2:0 (YUV420) 格式存储图像。无损 WebP 使用 8 位 ARGB 颜色，每个分量 8 位，每个像素共 32 位。 |
| 压缩 | 无损（Huffman、LZ77 或 color cache codes）或有损（VP8） |
| 许可 | 无需许可证；源代码可公开获取。 |

**备注：** 在 macOS 版 Safari 上，WebP 支持取决于 Safari 和 macOS 的版本。你需要 Safari 14 或更高版本，以及 macOS Big Sur (11) 或更高版本。

### XBM（X Window 系统位图文件）

XBM（X 位图）文件是网络上最早支持的文件，但现在已不再使用，应避免使用，因为其格式存在潜在的安全隐患。现代浏览器多年来一直不支持 XBM 文件，但在处理旧内容时，你可能会发现其中一些仍然存在。

XBM 使用一段 C 代码将图像内容表示为一个字节数组。每个图像由 2 到 4 个 `#define` 指令组成，提供位图的宽度和高度（如果图像设计为光标，还可选择热点），后面是一个 `unsigned char` 数组，其中每个值包含 8 个 1 位单色像素。

图像宽度必须是 8 像素的倍数。例如，以下代码表示一幅 8 像素乘 8 像素的 XBM 图像，这些像素呈黑白棋盘图案：

```cpp
#define square8\_width 8
#define square8\_height 8
static unsigned char square8_bits[] = {
  0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
};
```

|  |  |
| --- | --- |
| MIME 类型 | `image/xbm`、`image-xbitmap` |
| 文件扩展名 | `.xbm` |
| 规范 | 无 |
| 浏览器兼容性 | Firefox 1–3.5 和 Internet Explorer 1–5 |
| 最大尺寸 | 无限制 |
| 支持的颜色模式 |

| 颜色模式 | 每分量比特（*D*） | 描述 |
| --- | --- | --- |
| 灰度 | 1 | 每个字节包含 8 个 1 位像素。 |
| 真彩色 | *n/a* | *n/a* |
| 索引颜色 | *n/a* | *n/a* |
| 带有灰度的真彩色 | *n/a* | *n/a* |
| 带有透明度的真彩色 | *n/a* | *n/a* |

 |
| 压缩 | 无损 |
| 许可 | 开源 |

选择合适的图像格式
---------

选择最适合你的需求的图像格式可能比视频格式更容易，因为支持广泛的选择较少，而且每种格式往往都有一套特定的用例。

### 照片

有损压缩（取决于编码器的配置）通常能很好地压缩照片。这使得 JPEG 和 WebP 成为照片的不错选择，JPEG 的兼容性更好，但 WebP 的压缩效果可能更好。为了最大限度地提高质量和减少下载时间，可以考虑同时提供这两种格式的回退图像，WebP 是首选，JPEG 是次选。否则，为了兼容性，JPEG 是安全的选择。

| 最佳选择 | 回退方案 |
| --- | --- |
| WebP 或 JPEG | JPEG |

### 图标

对于图标等较小的图像，应使用无损格式，以避免在大小受限的图像中丢失细节。虽然无损 WebP 是实现这一目的的理想选择，但其支持尚未普及，因此 PNG 是更好的选择，除非你提供回退选项。如果图像包含的颜色少于 256 种，GIF 也是一种选择，不过 PNG 通过其索引压缩选项（PNG-8）通常可以压缩得更小。

如果图标可以用矢量图形表示，可以考虑使用 SVG，因为它可以在各种分辨率和尺寸下缩放，非常适合响应式设计。虽然 SVG 支持良好，但仍值得为旧版浏览器提供 PNG 回退功能。

| 最佳选择 | 回退方案 |
| --- | --- |
| SVG、无损 WebP 或 PNG | PNG |

### 截图

除非你愿意在质量上妥协，否则应该使用无损格式截图。如果截图中有文字，这一点尤为重要，因为在有损压缩的情况下，文字很容易变得模糊不清。

PNG 可能是最好的选择，但无损 WebP 的压缩效果可能更好。

| 最佳选择 | 回退方案 |
| --- | --- |
| 无损 WebP 或 PNG；如果不担心压缩伪影，则使用 JPEG 文件 | PNG 或 JPEG；GIF 用于颜色数较少的屏幕截图 |

### 示意图、绘图和图表

对于任何可以使用矢量图形表示的图像，SVG 都是最佳选择。否则，应使用 PNG 等无损格式。如果选择有损格式（如 JPEG 或有损 WebP），请仔细权衡压缩级别，以避免导致文本或其他图形变得模糊或不清晰。

| 最佳选择 | 回退方案 |
| --- | --- |
| SVG | PNG |

提供回退图像
------

虽然标准 HTML `<img>` 元素不支持图片的兼容性回退，但 `<picture>` 元素支持。`<picture>` 被用作多个 `<source>` 元素的包装器，每个元素都指定了不同格式或不同媒体条件下的图像版本，以及一个 `<img>` 元素，该元素定义了图像的显示位置以及默认或“最兼容”版本的回退。

例如，如果要显示一个最好使用 SVG 显示的图表，但希望提供一个 PNG 或 GIF 图表的回退选项，可以这样做：

```html
<picture>
  <source srcset="diagram.svg" type="image/svg+xml" />
  <source srcset="diagram.png" type="image/png" />
  <img src="diagram.gif" width="620" height="540" alt="数据通道示意图" />
</picture>
```

你可以指定任意数量的 `<source>`，但通常 2 或 3 个就足够了。

参见
--

* 媒体类型和格式指南
* Web 媒体技术
* web 视频编解码器指南
* HTML `<img>` 和 `<picture>` 元素
* CSS `background-image` 属性
* `Image()` 构造函数和 `HTMLImageElement` 接口


HTMLTableElement - Web API 接口参考

HTMLTableElement
================

**`HTMLTableElement`** 接口在常用的 `HTMLElement` 接口的基础上，提供了专门的属性和方法来处理 HTML 文档中表格的布局与展示。通过继承，它也可以访问父接口 `HTMLElement` 中的成员。

属性
--

*继承自父接口，`HTMLElement`。*

`HTMLTableElement.caption` (en-US)

这是一个 `HTMLTableCaptionElement` (en-US) ，表示作为子元素中的第一个 `<caption>` ，如果找不到则为 `null`。当设置此属性时，如果给出的对象不是一个 `<caption>`，一个带有 `HierarchyRequestError` 名字的异常 `DOMException` 会被抛出。如果设置了正确的对象，它会被作为第一个子元素插入 DOM 树中，同时子元素中的第一个 `<caption>` 会被移除，如果存在的话。

`HTMLTableElement.tHead` (en-US)

这是一个 `HTMLTableSectionElement` (en-US)，表示子元素中的第一个 `<thead>`，如果找不到则为 `null` 。当设置此属性时，如果给出的对象不是一个 `<thead>`，一个带有 `HierarchyRequestError` 名字的异常 `DOMException` 会被抛出。如果设置了正确的对象，它会被立即插入到 DOM 树中既不是 `<caption>` 也不是 `<colgroup>` 的第一个元素之前，或者直接被作为最后一个元素插入（如果找不到上述元素的话），同时子元素中的第一个 `<thead>` 会被移除，如果存在的话。

`HTMLTableElement.tFoot` (en-US)

这是一个 `HTMLTableSectionElement` (en-US)，表示子元素中的第一个 `<tfoot>`，如果找不到则为 `null`。当设置此属性时，如果给出的对象不是一个 `<tfoot>`，一个带有 `HierarchyRequestError` 名字的异常 `DOMException` 会被抛出。如果设置了正确的对象，它会被立即插入到 DOM 树中既不是 `<caption>`、`<colgroup>` 也不是 `<thead>` 的第一个元素之前，或者直接被作为最后一个元素插入（如果找不到上述元素的话），同时子元素中的第一个 `<tfoot>` 会被移除，如果存在的话。

`HTMLTableElement.rows`只读

返回一个实时的 `HTMLCollection`，它包含元素中的所有行，也就是子元素中的所有 `<tr>`，或者是 `<thead>`、`<tbody>` 和 `<tfoot>` 三者子元素中的其中一个子元素。`<thead>` 中的行会按照 DOM 树的顺序出现在首位，`<tbody>` 中的行出现在末位，也会按照 DOM 树的顺序。`HTMLCollection` 对象是实时的，当 `HTMLTableElement` 发生变化时会自动更新。

`HTMLTableElement.tBodies` (en-US)只读

返回一个实时的 `HTMLCollection`，它包含元素中所有的 `<tbody>`。`HTMLCollection` 对象是实时的，当 `HTMLTableElement` 发生变化时会自动更新。

### 过时的属性

**警告：** 以下属性已经过时，应当避免使用它们。

`HTMLTableElement.align` (en-US)
已弃用

Is a `DOMString` containing an enumerated value reflecting the `align` attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are `"left"`, `"right"`, and `"center"`.

`HTMLTableElement.bgColor` (en-US)
已弃用

Is a `DOMString` containing the background color of the cells. It reflects the obsolete `bgcolor` attribute.

`HTMLTableElement.border` (en-US)
已弃用

Is a `DOMString` containing the width in pixels of the border of the table. It reflects the obsolete `border` attribute.

`HTMLTableElement.cellPadding` (en-US)
已弃用

Is a `DOMString` containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders. It reflects the obsolete `cellpadding` attribute.

`HTMLTableElement.cellSpacing` (en-US)
已弃用

Is a `DOMString` containing the width in pixels of the horizontal and vertical separation between cells. It reflects the obsolete `cellspacing` attribute.

`HTMLTableElement.frame` (en-US)
已弃用

Is a `DOMString` containing the type of the external borders of the table. It reflects the obsolete `frame` attribute and can take one of the following values: `"void"`, `"above"`, `"below"`, `"hsides"`, `"vsides"`, `"lhs"`, `"rhs"`, `"box"`, or `"border"`.

`HTMLTableElement.rules` (en-US)
已弃用

Is a `DOMString` containing the type of the internal borders of the table. It reflects the obsolete `rules` attribute and can take one of the following values: `"none"`, `"groups"`, `"rows"`, `"cols"`, or `"all"`.

`HTMLTableElement.summary` (en-US)
已弃用

Is a `DOMString` containing a description of the purpose or the structure of the table. It reflects the obsolete `summary` attribute.

`HTMLTableElement.width` (en-US)
已弃用

Is a `DOMString` containing the length in pixels or in percentage of the desired width fo the entire table. It reflects the obsolete `width` attribute.

方法
--

*继承自父接口，`HTMLElement`*。

`HTMLTableElement.createTHead()` (en-US)

返回一个 `HTMLElement`，表示子元素中的第一个 `<thead>`。如果找不到，则创建一个新的并且立即插入到 DOM 树中既不是 `<caption>` 也不是 `<colgroup>` 的第一个元素之前，或者直接被作为最后一个元素插入（如果找不到上述元素的话）。

`HTMLTableElement.deleteTHead()`

移除子元素中的第一个 `<thead>`。

`HTMLTableElement.createTFoot()` (en-US)

返回一个 `HTMLElement`，表示子元素中的第一个 `<tfoot>`。如果找不到，则创建一个新的并且立即插入到 DOM 树中既不是 `<caption>`、`<colgroup>` 也不是 `<thead>` 的第一个元素之前，或者直接被作为最后一个元素插入（如果找不到上述元素的话）。

`HTMLTableElement.deleteTFoot()` (en-US)

移除子元素中的第一个 `<tfoot>`。

`HTMLTableElement.createCaption()`

返回一个 `HTMLElement`，表示子元素中的第一个 `<caption>`。如果找不到，则创建一个新的并且插入到 DOM 树中作为 `<table>` 的第一个子元素。

`HTMLTableElement.deleteCaption()` (en-US)

移除子元素中的第一个 `<caption>`。

`HTMLTableElement.insertRow()` (en-US)

返回一个 `HTMLTableRowElement` (en-US)，表示表格中的一个新行。它会被立即插入到行集合中给定 `index` 位置所表示的 `<tr>` 元素之前。如果有必要一个 `<tbody>` 会被创建。如果 `index` 值为 `-1`，这个新行会被追加到集合中。如果 `index` 值小于 `-1` 或者大于集合中的行总数，一个带有 `IndexSizeError` 值的异常 `DOMException` 会发生。

`HTMLTableElement.deleteRow()` (en-US)

移除与参数中给定 `index` 值相关的行。如果 `index` 值为 `-1`，最后一行会被移除；如果 `index` 值小于 `-1` 或者大于集合中的行总数，一个带有 `IndexSizeError` 值的异常 `DOMException` 会发生。

规范
--

| Specification |
| --- |
| HTML Standard # htmltableelement |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 实现了这个接口的 HTML 元素：`<table>`。