diff options
Diffstat (limited to 'files/zh-cn/web/media')
| -rw-r--r-- | files/zh-cn/web/media/formats/containers/index.html | 1327 | ||||
| -rw-r--r-- | files/zh-cn/web/media/formats/image_types/index.html | 1244 | ||||
| -rw-r--r-- | files/zh-cn/web/media/formats/index.html | 88 | ||||
| -rw-r--r-- | files/zh-cn/web/media/formats/视频编解码器/index.html | 1673 |
4 files changed, 4332 insertions, 0 deletions
diff --git a/files/zh-cn/web/media/formats/containers/index.html b/files/zh-cn/web/media/formats/containers/index.html new file mode 100644 index 0000000000..0821e05a3d --- /dev/null +++ b/files/zh-cn/web/media/formats/containers/index.html @@ -0,0 +1,1327 @@ +--- +title: Media container formats (file types) +slug: Web/Media/Formats/Containers +translation_of: Web/Media/Formats/Containers +--- +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</div> + +<p>一个音频/视频文件包含两部分：编码器（codec）和媒体容器（container）。本文讨论通用的多媒体容器的优点、局限性以及用法。 </p> + +<p><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> does not use a container at all. Instead, it streams the encoded audio and video tracks directly from one peer to another using {{domxref("MediaStreamTrack")}} objects to represent each track. See <a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a> for information about codecs commonly used for making WebRTC calls, as well as browser compatibility information around codec support in WebRTC.</p> + +<h2 id="Common_container_formats">Common container formats</h2> + +<p>最常用的几个媒体容器格式：MPEG-4（MP4）、QuickTime Movie（MOV）、Wavafile Audio File Format（WAV）。当然你也可能听说过：MP3, Ogg, WebM, AVI等等。下面列出了常用的几种媒体容器格式，有些仅支持音频，有些即支持音频又支持视频。</p> + +<p>一个媒体文件的扩展名和MIME类型，与它的容器格式以及它的编码方式没有特定的关系。例如MP3的扩展名是<code>.mp3</code>，MIME类型是<code>audio/mp3</code>，但是它的容器格式是MPEG-1，编码方式是MPEG-1 Audio Layer III。</p> + +<h3 id="Index_of_media_container_formats_file_types" style="font-size: 1.4em;">Index of media container formats (file types)</h3> + +<p>要了解有关特定容器格式的更多信息，请在此列表中找到它并单击查看详细信息，其中包括有关容器通常用于哪些用途、它支持哪些编解码器以及哪些浏览器支持它等详细信息。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Codec name (short)</th> + <th scope="col">Full codec name</th> + <th scope="col">Browser compatibility<sup><a href="#index-foot-1">1</a></sup></th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{anch("3GP")}}</th> + <td>Third Generation Partnership</td> + <td>Firefox for Android</td> + </tr> + <tr> + <th scope="row">{{anch("ADTS")}}</th> + <td>Audio Data Transport Stream</td> + <td>Firefox<sup><a href="#index-foot-2">2</a></sup></td> + </tr> + <tr> + <th scope="row">{{anch("FLAC")}}</th> + <td>Free Lossless Audio Codec</td> + <td>Chrome 56, Edge 16, Firefox 51, Safari 11</td> + </tr> + <tr> + <th scope="row">{{anch("MPEG", "MPEG / MPEG-2")}}</th> + <td>Moving Picture Experts Group (1 and 2)</td> + <td>—</td> + </tr> + <tr> + <th scope="row">{{anch("MP4", "MPEG-4 (MP4)")}}</th> + <td>Moving Picture Experts Group 4</td> + <td>Chrome 3, Edge 12, Firefox, Internet Explorer 9, Opera 24, Safari 3.1</td> + </tr> + <tr> + <th scope="row">{{anch("Ogg")}}</th> + <td>Ogg</td> + <td>Chrome 3, Firefox 3.5, Edge 17<sup><a href="#index-foot-3">3</a></sup> (desktop only), Internet Explorer 9, Opera 10.50</td> + </tr> + <tr> + <th scope="row">{{anch("QuickTime", "QuickTime (MOV)")}}</th> + <td>Apple QuickTime movie</td> + <td>Only older versions of Safari, plus other browsers that supported Apple's QuickTime plugin</td> + </tr> + <tr> + <th scope="row">{{anch("WebM")}}</th> + <td>Web Media</td> + <td>Chrome 6, Edge 17<sup><a href="#index-foot-3">3</a></sup> (desktop only), Firefox 4, Opera 10.6, Safari (WebRTC only)</td> + </tr> + </tbody> +</table> + +<p><a id="index-foot-1" name="index-foot-1">[1]</a> 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.</p> + +<p><a id="index-foot-2" name="index-foot-2">[2]</a> Available only if available on the underlying operating system's media framework.</p> + +<p><a name="index-foot-3">[3]</a> Requires <a href="https://www.microsoft.com/store/productId/9N5TDP8VCMHS">Web Media Extensions</a> to be installed.</p> + +<h3 id="3GP">3GP</h3> + +<p>The <strong>3GP</strong> or <strong>3GPP</strong> 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.</p> + +<p>This media container format is derived from the ISO Base Media File Format and MPEG-4, but is specifically streamlined for lower bandwidth scenarios.</p> + +<table class="standard-table"> + <caption>Base 3GP media MIME types</caption> + <thead> + <tr> + <th scope="col">Audio</th> + <th scope="col">Video</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/3gpp</code></td> + <td><code>video/3gpp</code></td> + </tr> + <tr> + <td><code>audio/3gpp2</code></td> + <td><code>video/3gpp2</code></td> + </tr> + <tr> + <td><code>audio/3gp2</code></td> + <td><code>video/3gp2</code></td> + </tr> + </tbody> +</table> + +<p>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 <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF">add the <code>codecs</code> parameter</a> 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.</p> + +<table class="standard-table"> + <caption>Video codecs supported by 3GP</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AVC (H.264)</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a>,<a href="#3gp-vid-footnote-1">2</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">H.263</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-4 Part 2 (MP4v-es)</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">VP8</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td> + <td></td> + </tr> + </tbody> +</table> + +<p><a id="3gp-vid-footnote-1" name="3gp-vid-footnote-1">[1]</a> Firefox only supports 3GP on <a href="https://www.khronos.org/openmax/">OpenMAX</a>-based devices, which currently means the Boot to Gecko (B2G) platform.</p> + +<p><a id="3gp-vid-footnote-2" name="3gp-vid-footnote-2">[2]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p> + +<table class="standard-table"> + <caption>Audio codecs supported by 3GP</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AMR-NB</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">AMR-WB</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">AMR-WB+</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">AAC-LC</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">HE-AAC v1</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">HE-AAC v2</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">MP3</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td> + <td></td> + </tr> + </tbody> +</table> + +<p><a id="3gp-aud-footnote-1" name="3gp-aud-footnote-1">[1]</a> Firefox only supports 3GP on <a href="https://www.khronos.org/openmax/">OpenMAX</a>-based devices, which currently means the Boot to Gecko (B2G) platform.</p> + +<p><a id="3gp-aud-footnote-2" name="3gp-aud-footnote-2">[2]</a> Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p> + +<h3 id="ADTS">ADTS</h3> + +<p><strong>Audio Data Transport Stream</strong> (<strong>ADTS</strong>) 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.</p> + +<table class="standard-table"> + <caption>ADTS media MIME types</caption> + <thead> + <tr> + <th scope="col">Audio</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/aac</code><sup><a href="#adts-foot-1">[1]</a></sup></td> + </tr> + <tr> + <td><code>audio/mpeg</code><sup><a href="#adts-foot-1">[1]</a></sup></td> + </tr> + </tbody> +</table> + +<p><a id="adts-foot-1" name="adts-foot-1">[1]</a> The MIME type used for ADTS depends on what kind of audio frames are contained within. If ADTS frames are used, the <code>audio/aac</code> 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 <code>audio/mpeg</code>.</p> + +<table class="standard-table"> + <caption>Audio codecs supported by ADTS</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AAC</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#adts-aud-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">MP3</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<p><a id="adts-aud-footnote-1" name="adts-aud-footnote-1">[1]</a> Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p> + +<h3 id="FLAC">FLAC</h3> + +<p>The <strong>Free Lossless Audio Codec</strong> (<strong>FLAC</strong>) 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.</p> + +<table class="standard-table"> + <caption>FLAC media MIME type</caption> + <thead> + <tr> + <th scope="col">Audio</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/flac</code></td> + </tr> + <tr> + <td><code>audio/x-flac</code> (non-standard)</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Audio codecs supported by FLAC</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">FLAC</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="MPEGMPEG-2"><a id="MPEG" name="MPEG">MPEG</a>/MPEG-2</h3> + +<p>The <strong>{{interwiki("wikipedia", "MPEG-1")}}</strong> and <strong>{{interwiki("wikipedia", "MPEG-2")}}</strong> 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.</p> + +<p>On the internet, perhaps the most common use of the MPEG file format is to contain {{interwiki("wikipedia", "MPEG-1", "Layer_III/MP3", "MPEG-1 Audio Layer 3")}} 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.</p> + +<p>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.</p> + +<table class="standard-table"> + <caption>MPEG-1 and MPEG-2 media MIME types</caption> + <thead> + <tr> + <th scope="col">Audio</th> + <th scope="col">Video</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/mpeg</code></td> + <td><code>video/mpeg</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Video codecs supported by MPEG-1 and MPEG-2</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">MPEG-1 Part 2</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-2 Part 2</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Audio codecs supported by MPEG-1 and MPEG-2</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">MPEG-1 Audio Layer I</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-1 Audio Layer II</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-1 Audio Layer III (MP3)</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="MPEG-4_MP4"><a id="MP4" name="MP4">MPEG-4 (MP4)</a></h3> + +<p><strong>{{interwiki("wikipedia", "MPEG-4")}}</strong> (<strong>MP4</strong>) 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.</p> + +<p>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 {{interwiki("wikipedia", "ISO base media file format")}}, which is directly derived from the {{interwiki("wikipedia", "QuickTime file format")}} developed by <a href="https://www.apple.com/">Apple</a>.</p> + +<p>When specifying the MPEG-4 media type (<code>audio/mp4</code> or <code>video/mp4</code>), you can <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF">add the <code>codecs</code> parameter</a> 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.</p> + +<table class="standard-table"> + <caption>Base MPEG-4 media MIME types</caption> + <thead> + <tr> + <th scope="col">Audio</th> + <th scope="col">Video</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/mp4</code></td> + <td><code>video/mp4</code></td> + </tr> + </tbody> +</table> + +<p>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 <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF">add the <code>codecs</code> parameter</a> 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.</p> + +<table class="standard-table"> + <caption>Video codecs supported by MPEG-4</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AVC (H.264)</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#mp4-vid-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">AV1</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#mp4-vid-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">H.263</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-4 Part 2 Visual</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">VP9</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<p><a id="mp4-vid-footnote-1" name="mp4-vid-footnote-1">[1]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p> + +<p><a id="mp4-vid-footnote-2" name="mp4-vid-footnote-2">[2]</a> Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference <code>media.av1.enabled</code> to <code>true</code>.</p> + +<table class="standard-table"> + <caption>Audio codecs supported by MPEG-4</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AAC</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#mp4-aud-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">FLAC</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-1 Audio Layer III (MP3)</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">Opus</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<p><a id="mp4-aud-footnote-1" name="mp4-aud-footnote-1">[1]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p> + +<h3 id="Ogg">Ogg</h3> + +<p>The <strong>{{interwiki("wikipedia", "Ogg")}}</strong> container format is a free and open format maintained by the <a href="https://www.xiph.org/">Xiph.org Foundation</a>. The Ogg framework also defines patent unencumbered media data formats, such as the Theora video codec and the Vorbis and Opus audio codecs. <a href="https://xiph.org/ogg/">Xiph.org documents about the Ogg format</a> are available on their web site.</p> + +<p>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.</p> + +<p>You can get more information about Ogg and its codecs in the <a href="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a>.</p> + +<table class="standard-table"> + <caption>Base Ogg media MIME types</caption> + <thead> + <tr> + <th scope="col">Audio</th> + <th scope="col">Video</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/ogg</code></td> + <td><code>video/ogg</code></td> + </tr> + </tbody> +</table> + +<p>The <code>application/ogg</code> 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 <code>application/ogg</code> if you don't know the content format or formats.</p> + +<p>You can also <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#Ogg">add the <code>codecs</code> parameter</a> 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.</p> + +<table class="standard-table"> + <caption>Video codecs supported by Ogg</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Theora</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">VP8</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">VP9</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Audio codecs supported by Ogg</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">FLAC</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">Opus</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">Vorbis</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="QuickTime">QuickTime</h3> + +<p>The <strong>QuickTime</strong> file format (<strong>QTFF</strong>, <strong>QT</strong>, or <strong>MOV</strong>) was created by Apple for use by its media framework of the same name. The extension for these files, <code>.mov</code>, 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.</p> + +<p>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 <em>should not be used</em>, 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.</p> + +<p>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.</p> + +<p>In addition, a number of third-party components are available for QuickTime, some of which add support for additional codecs.</p> + +<p>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.</p> + +<table class="standard-table"> + <caption>Base QuickTime media MIME type</caption> + <thead> + <tr> + <th scope="col">Video</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>video/quicktime</code></td> + </tr> + </tbody> +</table> + +<p>The <code>video/quicktime</code> 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.</p> + +<p>You can <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF">add the <code>codecs</code> parameter</a> 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.</p> + +<table class="standard-table"> + <caption>Video codecs supported by QuickTime</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AVC (H.264)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Cinepak</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Component Video</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">DV</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">H.261</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">H.263</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-2</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-4 Part 2 Visual</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Motion JPEG</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Sorenson Video 2</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Sorenson Video 3</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Audio codecs supported by QuickTime</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AAC</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">ALaw 2:1</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Apple Lossless (ALAC)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">HE-AAC</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-1 Audio Layer III (MP3)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Microsoft ADPCM</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">µ-Law 2:1 (u-Law)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="WAVE_WAV"><a id="WAVE" name="WAVE">WAVE</a> (WAV)</h3> + +<p>The <strong>Waveform Audio File Format</strong> (<strong>WAVE</strong>), usually referred to simply as WAV due to its filename extension being <code>.wav</code>, is a format developed by Microsoft and IBM to store audio bitstream data.</p> + +<p>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.</p> + +<p>The WAVE format was first released in 1991.</p> + +<table class="standard-table"> + <caption>WAVE media MIME types</caption> + <thead> + <tr> + <th scope="col">Audio</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/wave</code><sup><a href="#wave-foot-1">1</a></sup></td> + </tr> + <tr> + <td><code>audio/wav</code></td> + </tr> + <tr> + <td><code>audio/x-wav</code></td> + </tr> + <tr> + <td><code>audio/x-pn-wav</code></td> + </tr> + </tbody> +</table> + +<p><a id="wave-foot-1" name="wave-foot-1">[1]</a> The <code>audio/wave</code> 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. </p> + +<table class="standard-table"> + <caption>Audio codecs supported by WAVE</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">ADPCM (Adaptive Differential Pulse Code Modulation)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">GSM 06.10</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">LPCM (Linear Pulse Code Modulation)</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-1 Audio Layer III (MP3)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">µ-Law (u-Law)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="WebM">WebM</h3> + +<p><strong>{{interwiki("wikipedia", "WebM")}}</strong> (<strong>Web Media</strong>) is a format based on {{interwiki("wikipedia", "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.</p> + +<p>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.</p> + +<table class="standard-table"> + <caption>WebM media MIME types</caption> + <thead> + <tr> + <th scope="col">Audio</th> + <th scope="col">Video</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/webm</code></td> + <td><code>video/webm</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Video codecs supported by WebM</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AV1</th> + <td>Yes</td> + <td>Yes</td> + <td>Yes<sup><a href="#av1-vid-footnote-1">1</a></sup></td> + <td>Yes</td> + </tr> + <tr> + <th scope="row">VP8</th> + <td>Yes</td> + <td>Yes</td> + <td>Yes</td> + <td>Yes</td> + </tr> + <tr> + <th scope="row">VP9</th> + <td>Yes</td> + <td>Yes</td> + <td>Yes</td> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p><a id="av1-vid-footnote-1" name="av1-vid-footnote-1">[1]</a> 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.</p> + +<table class="standard-table"> + <caption>Audio codecs supported by WebM</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Opus</th> + <td>Yes</td> + <td>Yes</td> + <td>Yes</td> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Vorbis</th> + <td>Yes</td> + <td>Yes</td> + <td>Yes</td> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Choosing_the_right_container">Choosing the right container</h2> + +<p>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.</p> + +<h3 id="Guidelines">Guidelines</h3> + +<p>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.</p> + +<ul> + <li>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.</li> + <li>If you have any specific encoding requirements, make sure the container you choose supports the appropriate codecs.</li> + <li>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).</li> + <li>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).</li> + <li>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.</li> +</ul> + +<p>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.</p> + +<h3 id="Container_selection_advice">Container selection advice</h3> + +<p>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.</p> + +<h4 id="Audio-only_files">Audio-only files</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">If you need...</th> + <th scope="col">Consider using this container format</th> + </tr> + </thead> + <tbody> + <tr> + <td>Compressed files for general-purpose playback</td> + <td>MP3 (MPEG-1 Audio Layer III)</td> + </tr> + <tr> + <td>Losslessly compressed files</td> + <td>FLAC with ALAC fallback</td> + </tr> + <tr> + <td>Uncompressed files</td> + <td>WAV</td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<h4 id="Video_files">Video files</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">If you need...</th> + <th scope="col">Consider using this container format</th> + </tr> + <tr> + <td>General purpose video, preferably in an open format</td> + <td>WebM (ideally with MP4 fallback)</td> + </tr> + <tr> + <td>General purpose video</td> + <td>MP4 (ideally with WebM or Ogg fallback)</td> + </tr> + <tr> + <td>High compression optimized for slow connections</td> + <td>3GP (ideally with MP4 fallback)</td> + </tr> + <tr> + <td>Compatibility with older devices/browsers</td> + <td>QuickTime (ideally with AVI and/or MPEG-2 fallback)</td> + </tr> + </thead> +</table> + +<p>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.</p> + +<h2 id="Maximizing_compatibility_with_multiple_containers">Maximizing compatibility with multiple containers</h2> + +<p>To optimize compatibility, it's worth considering providing more than one version of media files, using the {{HTMLElement("source")}} element to specify each source within the {{HTMLElement("audio")}} or {{HTMLElement("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.</p> + +<p>To do this, you create a <code><video></code> (or <code><audio></code>) element with no {{htmlattrxref("src", "video")}} attribute. Then add child {{HTMLElement("source")}} elements within the <code><video></code> 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.</p> + +<p>In the example shown here, a video is offered to the browser in two formats: WebM and MP4.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>The video is offered first in WebM format (with the {{htmlattrxref("type", "video")}} attribute set to <code>video/webm</code>). If the {{Glossary("user agent")}} can't play that, it moves on to the next option, whose <code>type</code> is specified as <code>video/mp4</code>. If neither of those can be played, the text "This browser does not support the HTML5 video element." is presented.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://portal.3gpp.org/desktopmodules/Specifications/SpecificationDetails.aspx?specificationId=1441">ETSI 3GPP</a></td> + <td>Defines the 3GP container format</td> + </tr> + <tr> + <td><a href="https://www.iso.org/standard/53943.html">ISO/IEC 14496-3</a> (MPEG-4 Part 3 Audio)</td> + <td>Defines MP4 audio including ADTS</td> + </tr> + <tr> + <td><a href="https://xiph.org/flac/format.html">FLAC Format</a></td> + <td>The FLAC format specification</td> + </tr> + <tr> + <td><a href="https://www.iso.org/standard/19180.html">ISO/IEC 11172-1</a> (MPEG-1 Part 1 Systems)</td> + <td>Defines the MPEG-1 container format</td> + </tr> + <tr> + <td><a href="https://www.iso.org/standard/74427.html">ISO/IEC 13818-1</a> (MPEG-2 Part 1 Systems)</td> + <td>Defines the MPEG-2 container format</td> + </tr> + <tr> + <td><a href="https://www.iso.org/standard/75929.html">ISO/IEC 14496-14</a> (MPEG-4 Part 14: MP4 file format)</td> + <td>Defines the MPEG-4 (MP4) version 2 container format</td> + </tr> + <tr> + <td><a href="https://www.iso.org/standard/55688.html">ISO/IEC 14496-1</a> (MPEG-4 Part 1 Systems)</td> + <td>Defines the original MPEG-4 (MP4) container format</td> + </tr> + <tr> + <td>{{RFC(3533)}}</td> + <td>Defines the Ogg container format</td> + </tr> + <tr> + <td>{{RFC(5334)}}</td> + <td>Defines the Ogg media types and file extensions</td> + </tr> + <tr> + <td><a href="https://developer.apple.com/library/archive/documentation/QuickTime/QTFF/QTFFPreface/qtffPreface.html">QuickTime File Format Specification</a></td> + <td>Defines the QuickTime movie (MOV) format</td> + </tr> + <tr> + <td><a href="https://web.archive.org/web/20090417165828/http://www.kk.iij4u.or.jp/~kondo/wave/mpidata.txt">Multimedia Programming Interface and Data Specifications 1.0</a></td> + <td>The closest thing to an official WAVE specification</td> + </tr> + <tr> + <td><a href="https://docs.microsoft.com/en-us/windows/desktop/xaudio2/resource-interchange-file-format--riff-">Resource Interchange File Format</a> (used by WAV)</td> + <td>Defines the RIFF format; WAVE files are a form of RIFF</td> + </tr> + <tr> + <td><a href="https://www.webmproject.org/docs/container/">WebM Container Guidelines</a></td> + <td>Guide for adapting Matroska for WebM</td> + </tr> + <tr> + <td><a href="https://matroska.org/technical/specs/index.html">Matroska Specifications</a></td> + <td>The specification for the Matroska container format upon which WebM is based</td> + </tr> + <tr> + <td><a href="https://w3c.github.io/media-source/webm-byte-stream-format.html">WebM Byte Stream Format</a></td> + <td>WebM byte stream format for use with <a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<table class="standard-table"> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Container format name</th> + <th colspan="3" rowspan="1" scope="col" style="text-align: center; border-right: 2px solid #d4dde4;">Audio</th> + <th colspan="3" rowspan="1" scope="col" style="text-align: center;">Video</th> + </tr> + <tr> + <th scope="col" style="vertical-align: bottom;">MIME type</th> + <th scope="col" style="vertical-align: bottom;">Extension(s)</th> + <th scope="col" style="vertical-align: bottom; border-right: 2px solid #d4dde4;">Browser support</th> + <th scope="col" style="vertical-align: bottom;">MIME type</th> + <th scope="col" style="vertical-align: bottom;">Extension(s)</th> + <th scope="col" style="vertical-align: bottom; border-right: 2px solid #d4dde4;">Browser support</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row" style="vertical-align: bottom;">3GP</th> + <td style="vertical-align: top;"><code>audio/3gpp</code></td> + <td style="vertical-align: top;"><code>.3gp</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;"><code>video/3gpp</code></td> + <td style="vertical-align: top;"><code>.3gp</code></td> + <td style="vertical-align: top;">Firefox</td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">ADTS (Audio Data Transport Stream)</th> + <td style="vertical-align: top;"><code>audio/aac</code></td> + <td style="vertical-align: top;"><code>.aac</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">FLAC</th> + <td style="vertical-align: top;"><code>audio/flac</code></td> + <td style="vertical-align: top;"><code>.flac</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + </tr> + <tr> + <th rowspan="2" scope="row" style="vertical-align: top;">MPEG-1 / MPEG-2 (MPG or MPEG)</th> + <td style="vertical-align: top;"><code>audio/mpeg</code></td> + <td style="vertical-align: top;"><code>.mpg</code><br> + <code>.mpeg</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td rowspan="2" style="vertical-align: top;"><code>video/mpeg</code></td> + <td rowspan="2" style="vertical-align: top;"><code>.mpg</code><br> + <code>.mpeg</code></td> + <td rowspan="2" style="vertical-align: top;">Firefox</td> + </tr> + <tr> + <td style="vertical-align: top;"><code>audio/mp3</code></td> + <td style="vertical-align: top;"><code>.mp3</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">MPEG-4 (MP4)</th> + <td style="vertical-align: top;"><code>audio/mp4</code></td> + <td style="vertical-align: top;"><code>.mp4</code><br> + <code>.m4a</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;"><code>video/mp4</code></td> + <td style="vertical-align: top;"><code>.mp4</code><br> + <code>.m4v</code><br> + <code>.m4p</code></td> + <td style="vertical-align: top;">Firefox</td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">Ogg</th> + <td style="vertical-align: top;"><code>audio/ogg</code></td> + <td style="vertical-align: top;"><code>.oga</code><br> + <code>.ogg</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;"><code>video/ogg</code></td> + <td style="vertical-align: top;"><code>.ogv</code><br> + <code>.ogg</code></td> + <td style="vertical-align: top;">Firefox</td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">QuickTime Movie (MOV)</th> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">—</td> + <td style="vertical-align: top;"><code>video/quicktime</code></td> + <td style="vertical-align: top;"><code>.mov</code></td> + <td style="vertical-align: top;">Safari</td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">WAV (Waveform Audiofile)</th> + <td style="vertical-align: top;"><code>audio/wav</code></td> + <td style="vertical-align: top;"><code>.wav</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">WebM</th> + <td style="vertical-align: top;"><code>audio/webm</code></td> + <td style="vertical-align: top;"><code>.webm</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;"><code>video/webm</code></td> + <td style="vertical-align: top;"><code>.webm</code></td> + <td style="vertical-align: top;">Firefox</td> + </tr> + </tbody> +</table> + +<h2 id="See_also"> See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li> + <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></li> + <li>{{HTMLElement("audio")}} and {{HTMLElement("video")}} elements</li> +</ul> diff --git a/files/zh-cn/web/media/formats/image_types/index.html b/files/zh-cn/web/media/formats/image_types/index.html new file mode 100644 index 0000000000..29b8a69cb3 --- /dev/null +++ b/files/zh-cn/web/media/formats/image_types/index.html @@ -0,0 +1,1244 @@ +--- +title: 图像文件类型与格式指南 +slug: Web/Media/Formats/Image_types +tags: + - 图像 + - 图片 + - 多媒体 + - 指南 + - 文件 + - 文件格式 + - 文件类型 + - 照片 +translation_of: Web/Media/Formats/Image_types +--- +<div>{{QuickLinksWithSubpages("/zh-CN/docs/Web/Media")}}</div> + +<p><span class="seoSummary">在本指南中，我们将介绍网页浏览器普遍支持的图像文件类型，并提供一些关于他们的信息与见解，帮助您为您的网站选择最合适的图像格式。</span></p> + +<h2 id="常见图像文件类型">常见图像文件类型</h2> + +<p>世界上有非常多的图像文件格式。下面列举了网页上常用的格式，其中BMP由于浏览器支持限制而不被推荐，通常应该避免在网页内容中使用。</p> + +<div id="table-of-image-file-types"> +<table class="standard-table"> + <thead> + <tr> + <th scope="row">缩写</th> + <th scope="row">文件格式</th> + <th scope="col">MIME 类型</th> + <th scope="col">文件拓展名</th> + <th scope="col">浏览器兼容性</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{anch("APNG")}}</th> + <th scope="row">Animated Portable Network Graphics<br> + <strong>动态便携式网络图像</strong></th> + <td><code>image/apng</code></td> + <td><code>.apng</code></td> + <td>Chrome, Edge, Firefox, Opera, Safari</td> + </tr> + <tr> + <th scope="row">{{anch("AVIF")}}</th> + <th scope="row">AV1 Image File Format<br> + AV1 图像文件格式</th> + <td><code>image/</code>avif</td> + <td><code>.</code>avif</td> + <td>Chrome, Opera, Firefox (feature flag)</td> + </tr> + <tr> + <th scope="row">{{anch("BMP")}}</th> + <th scope="row">Bitmap file<br> + <strong>位图</strong>文件</th> + <td><code>image/bmp</code></td> + <td><code>.bmp</code></td> + <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> + </tr> + <tr> + <th scope="row">{{anch("GIF")}}</th> + <th scope="row">Graphics Interchange Format<br> + 图像互换格式</th> + <td><code>image/gif</code></td> + <td><code>.gif</code></td> + <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> + </tr> + <tr> + <th scope="row">{{anch("ICO")}}</th> + <th scope="row">Microsoft Icon<br> + 微软图标</th> + <td><code>image/x-icon</code></td> + <td><code>.ico</code>, <code>.cur</code></td> + <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> + </tr> + <tr> + <th scope="row">{{anch("JPEG")}}</th> + <th scope="row">Joint Photographic Expert Group image<br> + 联合影像专家小组图像</th> + <td><code>image/jpeg</code></td> + <td><code>.jpg</code>, <code>.jpeg</code>, <code>.jfif</code>, <code>.pjpeg</code>, <code>.pjp</code></td> + <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> + </tr> + <tr> + <th scope="row">{{anch("PNG")}}</th> + <th scope="row">Portable Network Graphics<br> + <strong>便携式网络图像</strong></th> + <td><code>image/png</code></td> + <td><code>.png</code></td> + <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> + </tr> + <tr> + <th scope="row">{{anch("SVG")}}</th> + <th scope="row">Scalable Vector Graphics<br> + <strong>可缩放矢量图形</strong></th> + <td><code>image/svg+xml</code></td> + <td><code>.svg</code></td> + <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> + </tr> + <tr> + <th scope="row">{{anch("TIFF")}}</th> + <th scope="row">Tagged Image File Format<br> + 标签图像文件格式</th> + <td><code>image/tiff</code></td> + <td><code>.tif</code>, <code>.tiff</code></td> + <td>Safari</td> + </tr> + <tr> + <th scope="row">{{anch("WebP")}}</th> + <th scope="row">Web Picture format<br> + 万维网图像格式</th> + <td><code>image/webp</code></td> + <td><code>.webp</code></td> + <td>Chrome, Edge, Firefox, Opera, Safari</td> + </tr> + </tbody> +</table> + +<p>每一种格式缩写都有一个详细说明，其功能以及详细的浏览器兼容信息， 包括哪个版本引入支持以及以后可能会引入的特殊功能。</p> +</div> + +<h2 id="图像文件格式详介">图像文件格式详介</h2> + +<p>The following sections provide a brief overview of each of the image file types supported by web browsers.</p> + +<p>In the tables below, the term <strong>bits per component</strong> refers to the number of bits used to represent each color component. For example, an RGB color depth of 8 indicates that each of the red, green, and blue components are represented by an 8-bit value. <strong>Bit depth</strong>, on the other hand, is the total number of bits used to represent each pixel in memory.</p> + +<h3 id="APNG_Animated_Portable_Network_Graphics"><a id="APNG" name="APNG">APNG</a> (Animated Portable Network Graphics)</h3> + +<p>APNG is a file format first introduced by Mozilla which extends the {{anch("PNG")}} standard to add support for animated images. Conceptually similar to the animated GIF format which has been in use for decades, APNG is more capable in that it supports a variety of {{interwiki("wikipedia", "color depth", "color depths")}}, whereas animated GIF supports only 8-bit {{interwiki("wikipedia", "indexed color")}}.</p> + +<p>APNG is ideal for basic animations that do not need to synchronize to other activities or to a sound track, such as progress indicators, activity {{interwiki("wikipedia", "throbber", "throbbers")}}, and other animated sequences. For example, APNG is <a href="https://developer.apple.com/stickers/">one of the formats supported when creating animated stickers</a> for Apple's iMessage application (and the Messages application on iOS). They're also commonly used for the animated portions of web browsers' user interfaces.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME 类型</th> + <td><code>image/apng</code></td> + </tr> + <tr> + <th scope="row">文件拓展名</th> + <td><code>.apng</code></td> + </tr> + <tr> + <th scope="row">规范</th> + <td><a href="https://wiki.mozilla.org/APNG_Specification">wiki.mozilla.org/APNG_Specification</a></td> + </tr> + <tr> + <th scope="row">浏览器兼容性</th> + <td>Chrome 59, Edge 12, Firefox 3, Opera 46, Safari 8</td> + </tr> + <tr> + <th scope="row">最高分辨率</th> + <td>2,147,483,647×2,147,483,647 pixels</td> + </tr> + <tr> + <th scope="row">支持的颜色模式</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">颜色模式</th> + <th scope="col">Bits per component (<em>D</em>)</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Greyscale</th> + <td>1, 2, 4, 8, and 16</td> + <td>Each pixel consists of a single <em>D</em>-bit value indicating the brightness of the greyscale pixel.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8 and 16</td> + <td>Each pixel is represented by three <em>D</em>-bit values indicating the level of the red, green, and blue color components.</td> + </tr> + <tr> + <th scope="row">Indexed color</th> + <td>1, 2, 4, and 8</td> + <td>Each pixel is a <em>D</em>-bit value indicating an index into a color palette which is contained within a <code><a href="https://www.w3.org/TR/PNG/#11PLTE">PLTE</a></code> chunk in the APNG file; the colors in the palette all use an 8-bit depth.</td> + </tr> + <tr> + <th scope="row">Greyscale with alpha</th> + <td>8 and 16</td> + <td>Each pixel is represented by two <em>D</em>-bit values: the intensity of the greyscale pixel and an alpha sample, indicating how opaque the pixel is.</td> + </tr> + <tr> + <th scope="row">True color with alpha</th> + <td>8 and 16</td> + <td>Each pixel is comprised of four <em>D</em>-pixel color components: red, green, blue, and the alpha sample indicating how opaque the pixel is.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">压缩</th> + <td>Lossless</td> + </tr> + <tr> + <th scope="row">授权</th> + <td>Free and open under the <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike license</a> (<a href="http://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>) version 3.0 or later.</td> + </tr> + </tbody> +</table> + +<h3 id="BMP_Bitmap_file"><a id="BMP" name="BMP">BMP</a> (Bitmap file)</h3> + +<p>The <strong>BMP</strong> (<strong>Bitmap image</strong>) file type is most prevalent on Windows computers, and is generally used only for special cases in web apps and content.</p> + +<div class="blockIndicator warning"> +<p><strong>Note:</strong> You should typically avoid using BMP for web site content, as it's not a generally-accepted use of the format.</p> +</div> + +<p>BMP theoretically supports a variety of internal data representations. The simplest, and most commonly used, form of BMP file is an uncompressed raster image, with each pixel occupying 3 bytes representing its red, green, and blue components, and each row padded with <code>0x00</code> bytes to a multiple of 4 bytes wide.</p> + +<p>While other data representations are defined in the specification, they are not widely used and often completely unimplemented. These features include: support for different bit depths, indexed color, alpha channels, and different pixel orders (by default, BMP is written from bottom-left corner toward the right and top, rather than from the top-left corner toward the right and bottom).</p> + +<p>Theoretically, several compression algorithms are supported, and the image data can also be stored in {{anch("JPEG")}} or {{anch("PNG")}} format within the BMP file.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME 类型</th> + <td><code>image/bmp</code></td> + </tr> + <tr> + <th scope="row">文件拓展名</th> + <td><code>.bmp</code></td> + </tr> + <tr> + <th scope="row">规范</th> + <td>No specification; however, Microsoft provides general documentation of the format at <a href="https://docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage">docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage</a></td> + </tr> + <tr> + <th scope="row">浏览器兼容性</th> + <td>All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td> + </tr> + <tr> + <th scope="row">最高分辨率</th> + <td>Either 32,767×32,767 or 2,147,483,647×2,147,483,647 pixels, depending on the format version</td> + </tr> + <tr> + <th scope="row">支持的颜色模式</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">颜色模式</th> + <th scope="col">Bits per component (<em>D</em>)</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Greyscale</th> + <td>1</td> + <td>Each bit represents a single pixel, which can be either black or white.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8 and 16</td> + <td>Each pixel is represented by three values representing the red, green, and blue color components; each is <em>D</em> bits.</td> + </tr> + <tr> + <th scope="row">Indexed color</th> + <td>2, 4, and 8</td> + <td>Each pixel is represented by a value which is one 2, 4, or 8 bits, serving as an index into the color table.</td> + </tr> + <tr> + <th scope="row">Greyscale with alpha</th> + <td><em>n/a</em></td> + <td>BMP has no distinct grayscale format.</td> + </tr> + <tr> + <th scope="row">True color with alpha</th> + <td>8 and 16</td> + <td>Each pixel is represented by four values representing the red, green, blue, and alpha color components; each is <em>D</em> bits.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">压缩</th> + <td>Several compression methods are supported, including lossy or lossless algorithms</td> + </tr> + <tr> + <th scope="row">授权</th> + <td>Covered by the <a href="https://docs.microsoft.com/en-us/openspecs/dev_center/ms-devcentlp/1c24c7c8-28b0-4ce1-a47d-95fe1ff504bc">Microsoft Open Specification Promise</a>; while Microsoft holds patents against BMP, they have published a promise not to assert its patent rights as long as specific conditions are met. This is not the same as a license, however. BMP is included under the Windows Metafile Format (<code>.wmf</code>).</td> + </tr> + </tbody> +</table> + +<h3 id="GIF_Graphics_Interchange_Format"><a id="GIF" name="GIF">GIF</a> (Graphics Interchange Format)</h3> + +<p>In 1987, the CompuServe online service provider introduced the <strong>{{interwiki("wikipedia", "GIF")}}</strong> (<strong>Graphics Interchange Format</strong>) image file format to provide a compressed graphics format that all members of their service would be able to use. GIF uses the {{interwiki("wikipedia", "Lempel-Ziv-Welch")}} (LZW) algorithm to losslessly compress 8-bit indexed color graphics. GIF was one of the first two graphics formats supported by {{Glossary("HTML")}}, along with {{anch("XBM")}}.</p> + +<p>Each pixel in a GIF is represented by a single 8-bit value serving as an index into a palette of 24-bit colors (8 bits each of red, green, and blue). The length of a color table is always a power of 2 (that is, each palette has 2, 4, 8, 16, 32, 64, or 256 entries). To simulate more than 255 or 256 colors, {{interwiki("wikipedia", "dithering")}} is generally used. It is <a href="https://gif.ski/">technically possible</a> to tile multiple image blocks, each with its own color palette, to create truecolor images, but in practice this is rarely done.</p> + +<p>Pixels are opaque, unless a specific color index is designated as transparent, in which case pixels colored that value are entirely transparent.</p> + +<p>GIF supports simple animation, in which following an initial full-size frame, a series of images reflecting the parts of the image that change with each frame are provided.</p> + +<p>GIF has been extremely popular for decades, due to its simplicity and compatibility. Its animation support caused a resurgence in its popularity in the social media era, when animated GIFs began to be widely used for short "videos", memes, and other simple animation sequences.</p> + +<p>Another popular feature of GIF is support for {{interwiki("wikipedia", "Interlacing_(bitmaps)", "interlacing")}}, where rows of pixels are stored out of order so that partially-received files can be displayed in lower quality. This is particularly useful when network connections are slow.</p> + +<p>GIF is a good choice for simple images and animations, although converting full color images to GIF can result in unsatisfactory dithering. Typically, modern content should use {{anch("PNG")}} for lossless <em>and</em> indexed still images, and should consider using {{anch("APNG")}} for lossless animation sequences.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME 类型</th> + <td><code>image/gif</code></td> + </tr> + <tr> + <th scope="row">文件拓展名</th> + <td><code>.gif</code></td> + </tr> + <tr> + <th scope="row">规范</th> + <td><a href="https://www.w3.org/Graphics/GIF/spec-gif87.txt">GIF87a specification</a><br> + <a href="https://www.w3.org/Graphics/GIF/spec-gif89a.txt">GIF89a specification</a></td> + </tr> + <tr> + <th scope="row">浏览器兼容性</th> + <td>All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td> + </tr> + <tr> + <th scope="row">最高分辨率</th> + <td>65,536×65,536 pixels</td> + </tr> + <tr> + <th scope="row">支持的颜色模式</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">颜色模式</th> + <th scope="col">Bits per component (<em>D</em>)</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Greyscale</th> + <td><em>n/a</em></td> + <td>GIF does not include a dedicated greyscale format.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td><em>n/a</em></td> + <td>GIF does not support true color pixels.</td> + </tr> + <tr> + <th scope="row">Indexed color</th> + <td>8</td> + <td>Each color in a GIF palette is defined as 8 bits each of red, green, and blue (24 total bits per pixel).</td> + </tr> + <tr> + <th scope="row">Greyscale with alpha</th> + <td><em>n/a</em></td> + <td>GIF does not provide a dedicated greyscale format.</td> + </tr> + <tr> + <th scope="row">True color with alpha</th> + <td><em>n/a</em></td> + <td>GIF does not support true color pixels.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">压缩</th> + <td>Lossless (LZW)</td> + </tr> + <tr> + <th scope="row">授权</th> + <td>While the GIF format itself is open, the LZW compression algorithm was covered by patents until the early 2000s. As of July 7, 2004, all relevant patents have expired and the GIF format may be used freely</td> + </tr> + </tbody> +</table> + +<h3 id="ICO_Microsoft_Windows_icon"><a id="ICO" name="ICO">ICO</a> (Microsoft Windows icon)</h3> + +<p>The ICO (Microsoft Windows icon) file format was designed by Microsoft for desktop icons of Windows systems. However, early versions of Internet Explorer introduced the ability for a web site to provide a ICO file named <code>favicon.ico</code> in a web site's root directory to specify a <strong><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_custom_icons_to_your_site">favicon</a></strong> — an icon to be displayed in the Favorites menu, and other places where an iconic representation of the site would be useful.</p> + +<p>An ICO file can contain multiple icons, and begins with a directory listing details about each. Following the directory comes the data for the icons. Each icon's data can be either a {{anch("BMP")}} image without the file header, or a complete {{anch("PNG")}} image (including the file header). If you use ICO files, you should use the BMP format, as support for PNG inside ICO files wasn't added until Windows Vista and may not be well supported.</p> + +<div class="blockIndicator warning"> +<p>ICO files <em>should not</em> be used in web content. Additionally, their use for favicons has subsided in favor of using a PNG file and the {{HTMLElement("link")}} element, as described in {{SectionOnPage("/en-US/docs/Web/HTML/Element/link", "Providing icons for different usage contexts")}}.</p> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME 类型</th> + <td><code>image/vnd.microsoft.icon</code> (official), <code>image/x-icon</code> (used by Microsoft)</td> + </tr> + <tr> + <th scope="row">文件拓展名</th> + <td><code>.ico</code></td> + </tr> + <tr> + <th scope="row">规范</th> + <td></td> + </tr> + <tr> + <th scope="row">浏览器兼容性</th> + <td>All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td> + </tr> + <tr> + <th scope="row">最高分辨率</th> + <td>256×256 pixels</td> + </tr> + <tr> + <th scope="row">支持的颜色模式</th> + <td> + <table class="standard-table"> + <caption>Icons in BMP format</caption> + <tbody> + <tr> + <th scope="row">颜色模式</th> + <th scope="col">Bits per component (<em>D</em>)</th> + <th scope="col">描述</th> + </tr> + <tr> + <th scope="row">Greyscale</th> + <td>1</td> + <td>Each bit represents a single pixel, which can be either black or white.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8 and 16</td> + <td>Each pixel is represented by three values representing the red, green, and blue color components; each is <em>D</em> bits.</td> + </tr> + <tr> + <th scope="row">Indexed color</th> + <td>2, 4, and 8</td> + <td>Each pixel is represented by a value which is one 2, 4, or 8 bits, serving as an index into the color table.</td> + </tr> + <tr> + <th scope="row">Greyscale with alpha</th> + <td><em>n/a</em></td> + <td>BMP has no distinct grayscale format.</td> + </tr> + <tr> + <th scope="row">True color with alpha</th> + <td>8 and 16</td> + <td>Each pixel is represented by four values representing the red, green, blue, and alpha color components; each is <em>D</em> bits.</td> + </tr> + </tbody> + </table> + + <table class="standard-table"> + <caption>Icons in PNG format</caption> + <tbody> + <tr> + <th scope="row">颜色模式</th> + <th scope="col">Bits per component (<em>D</em>)</th> + <th scope="col">描述</th> + </tr> + <tr> + <th scope="row">Greyscale</th> + <td>1, 2, 4, 8, and 16</td> + <td>Each pixel consists of a single <em>D</em>-bit value indicating the brightness of the greyscale pixel.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8 and 16</td> + <td>Each pixel is represented by three <em>D</em>-bit values indicating the level of the red, green, and blue color components.</td> + </tr> + <tr> + <th scope="row">Indexed color</th> + <td>1, 2, 4, and 8</td> + <td>Each pixel is a <em>D</em>-bit value indicating an index into a color palette which is contained within a <code><a href="https://www.w3.org/TR/PNG/#11PLTE">PLTE</a></code> chunk in the APNG file; the colors in the palette all use an 8-bit depth.</td> + </tr> + <tr> + <th scope="row">Greyscale with alpha</th> + <td>8 and 16</td> + <td>Each pixel is represented by two <em>D</em>-bit values: the intensity of the greyscale pixel and an alpha sample, indicating how opaque the pixel is.</td> + </tr> + <tr> + <th scope="row">True color with alpha</th> + <td>8 and 16</td> + <td>Each pixel is comprised of four <em>D</em>-pixel color components: red, green, blue, and the alpha sample indicating how opaque the pixel is.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">压缩</th> + <td>BMP-format icons nearly always use lossless compression, but lossy methods are available. PNG icons are always compressed losslessly.</td> + </tr> + <tr> + <th scope="row">授权</th> + <td>—</td> + </tr> + </tbody> +</table> + +<h3 id="JPEG_Joint_Photographic_Experts_Group_image"><a id="JPEG" name="JPEG">JPEG</a> (Joint Photographic Experts Group image)</h3> + +<p>The {{Glossary("JPEG")}} (typically pronounced "<strong>jay-peg</strong>") image format is currently the most widely used lossy compression format for still images. It's particulary useful for photographs; applying lossy compression to content requiring sharpness, like diagrams or charts, can produce unsatisfactory results.</p> + +<p>JPEG is actually a data format for compressed photos, rather than a file type. The JFIF (<strong>J</strong>PEG <strong>F</strong>ile <strong>I</strong>nterchange <strong>F</strong>ormat) specification describes the format of the files we think of as "JPEG" images.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME 类型</th> + <td><code>image/jpeg</code></td> + </tr> + <tr> + <th scope="row">文件拓展名</th> + <td><code>.jpg</code>, <code>.jpeg</code>, <code>.jpe</code>, <code>.jif</code>, <code>.jfif</code></td> + </tr> + <tr> + <th scope="row">规范</th> + <td><a href="https://jpeg.org/jpeg/">jpeg.org/jpeg/</a></td> + </tr> + <tr> + <th scope="row">浏览器兼容性</th> + <td>All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td> + </tr> + <tr> + <th scope="row">最高分辨率</th> + <td>65,535×65,535 pixels</td> + </tr> + <tr> + <th scope="row">支持的颜色模式</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">颜色模式</th> + <th scope="col">Bits per component (<em>D</em>)</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Greyscale</th> + <td><em>n/a</em></td> + <td>JPEG has no distinct greyscale mode.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8</td> + <td>Each pixel is described by the red, blue, and green color components, each of which is 8 bits.</td> + </tr> + <tr> + <th scope="row">Indexed color</th> + <td><em>n/a</em></td> + <td>JPEG does not offer an indexed color mode.</td> + </tr> + <tr> + <th scope="row">Greyscale with alpha</th> + <td><em>n/a</em></td> + <td>JPEG does not support an alpha channel.</td> + </tr> + <tr> + <th scope="row">True color with alpha</th> + <td><em>n/a</em></td> + <td>JPEG does not support an alpha channel.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">压缩</th> + <td>Lossy; based on the {{interwiki("wikipedia", "discrete cosine transform")}}</td> + </tr> + <tr> + <th scope="row">授权</th> + <td>As of October 27, 2006, all United States patents have expired.</td> + </tr> + </tbody> +</table> + +<h3 id="PNG_Portable_Network_Graphics"><a id="PNG" name="PNG">PNG</a> (Portable Network Graphics)</h3> + +<p>The {{Glossary("PNG")}} (pronounced "<strong>ping</strong>") image format uses lossless or lossy compression to provide more efficient compression, and supports higher color depths than {{anch("GIF")}}, as well as full alpha transparency support.</p> + +<p>PNG is widely supported, with all major browsers offering full support for its features. Internet Explorer, which introduced PNG support in versions 4–5, did not fully support it until IE 9, and had many infamous bugs for many of the intervening years, including in the once-omnipresent Internet Explorer 6. This slowed PNG adoption, but it is now commonly used, especially when precise reproduction of the source image is needed.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME 类型</th> + <td><code>image/png</code></td> + </tr> + <tr> + <th scope="row">文件拓展名</th> + <td><code>.png</code></td> + </tr> + <tr> + <th scope="row">规范</th> + <td><a href="https://www.w3.org/TR/PNG">w3.org/TR/PNG</a></td> + </tr> + <tr> + <th scope="row">浏览器兼容性</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Basic support</th> + <td>1</td> + <td>12</td> + <td>1</td> + <td>5</td> + <td>3.5.1 (Presto)<br> + 15 (Blink)</td> + <td>1</td> + </tr> + <tr> + <th scope="row">Alpha channel</th> + <td>1</td> + <td>12</td> + <td>1</td> + <td>5</td> + <td>6 (Presto)<br> + All (Blink)</td> + <td>1</td> + </tr> + <tr> + <th scope="row">Gamma correction</th> + <td>no</td> + <td>yes</td> + <td>1</td> + <td>8</td> + <td>1</td> + <td>broken</td> + </tr> + <tr> + <th scope="row">Color correction</th> + <td>no</td> + <td>yes</td> + <td>3</td> + <td>9</td> + <td>no</td> + <td>no</td> + </tr> + <tr> + <th scope="row">Interlacing</th> + <td>no</td> + <td>?</td> + <td>1</td> + <td>broken</td> + <td>3.5.1</td> + <td>no</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">最高分辨率</th> + <td>2,147,483,647×2,147,483,647 pixels</td> + </tr> + <tr> + <th scope="row">支持的颜色模式</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">颜色模式</th> + <th scope="col">Bits per component (<em>D</em>)</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Greyscale</th> + <td>1, 2, 4, 8, and 16</td> + <td>Each pixel consists of a single <em>D</em>-bit value indicating the brightness of the greyscale pixel.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8 and 16</td> + <td>Each pixel is represented by three <em>D</em>-bit values indicating the level of the red, green, and blue color components.</td> + </tr> + <tr> + <th scope="row">Indexed color</th> + <td>1, 2, 4, and 8</td> + <td>Each pixel is a <em>D</em>-bit value indicating an index into a color palette which is contained within a <code><a href="https://www.w3.org/TR/PNG/#11PLTE">PLTE</a></code> chunk in the APNG file; the colors in the palette all use an 8-bit depth.</td> + </tr> + <tr> + <th scope="row">Greyscale with alpha</th> + <td>8 and 16</td> + <td>Each pixel is represented by two <em>D</em>-bit values: the intensity of the greyscale pixel and an alpha sample, indicating how opaque the pixel is.</td> + </tr> + <tr> + <th scope="row">True color with alpha</th> + <td>8 and 16</td> + <td>Each pixel is comprised of four <em>D</em>-pixel color components: red, green, blue, and the alpha sample indicating how opaque the pixel is.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">压缩</th> + <td>Lossless, optionally indexed color like GIF</td> + </tr> + <tr> + <th scope="row">授权</th> + <td>©2003 <a href="https://www.w3.org/">W3C</a><sup>®</sup> (<a href="http://www.lcs.mit.edu/">MIT</a>, <a href="http://www.ercim.org/">ERCIM</a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>, <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a> rules apply. No known royalty-bearing patents.</td> + </tr> + </tbody> +</table> + +<h3 id="SVG_Scalable_Vector_Graphics"><a id="SVG" name="SVG">SVG</a> (Scalable Vector Graphics)</h3> + +<p>SVG is an <a href="/zh-CN/docs/Glossary/XML">XML</a>-based {{interwiki("wikipedia", "vector graphics")}} format that specifies the contents of an image as a set of drawing commands that create shapes, lines, apply colors, filters, and so forth. SVG files are ideal for diagrams, icons, and other images which can be accurately drawn at any size. As such, SVG is popular for user interface elements in modern Web design.</p> + +<p>SVG files are text files containing source code that, when interpreted, draws the desired image. For instance, this example defines an drawing area with initial size 100 by 100 units, containing a line drawn diagonally through the box:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>SVG can be used in web content in two ways:</p> + +<ol> + <li>You can directly write the {{HTMLElement("svg")}} element within the HTML, containing <a href="/zh-CN/docs/Web/SVG/Element">SVG elements</a> to draw the image.</li> + <li>You can display an SVG image anywhere you can use any of the other image types, including with the {{HTMLElement("img")}} and {{HTMLElement("picture")}} elements, the {{cssxref("background-image")}} CSS property, and so forth.</li> +</ol> + +<p>SVG is an ideal choice for images which can be represented using a series of drawing commands, especially if the size at which the image will be rendered is unknown or may vary, since SVG will smoothly scale to the desired size. It's not generally useful for strictly bitmap or photographic images, although it is possible to include bitmap images within an SVG.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME 类型</th> + <td><code>image/svg+xml</code></td> + </tr> + <tr> + <th scope="row">文件拓展名</th> + <td><code>.svg</code></td> + </tr> + <tr> + <th scope="row">规范</th> + <td><a href="https://www.w3.org/TR/SVG2">w3.org/TR/SVG2</a></td> + </tr> + <tr> + <th scope="row">浏览器兼容性</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">SVG support</th> + <td>4</td> + <td>12</td> + <td>3</td> + <td>9</td> + <td>10 (Presto)<br> + 15 (Blink)</td> + <td>3.2</td> + </tr> + <tr> + <th scope="row">SVG as image ({{HTMLElement("img")}} etc)</th> + <td>28</td> + <td>12</td> + <td>4</td> + <td>9</td> + <td>10 (Presto)<br> + 15 (Blink)</td> + <td>9</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">最高分辨率</th> + <td>无限制</td> + </tr> + <tr> + <th scope="row">支持的颜色模式</th> + <td>Colors in SVG are specified using <a href="/zh-CN/docs/Web/CSS/color_value">CSS color syntax</a>.</td> + </tr> + <tr> + <th scope="row">压缩</th> + <td>SVG source may be compressed during transit using <a href="/zh-CN/docs/Web/HTTP/Compression">HTTP compression</a> techniques, or on disk as an <code>.svgz</code> file.</td> + </tr> + <tr> + <th scope="row">授权</th> + <td>©2018 <a href="https://www.w3.org/">W3C</a><sup>®</sup> (<a href="http://www.lcs.mit.edu/">MIT</a>, <a href="http://www.ercim.org/">ERCIM</a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>, <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a> rules apply. No known royalty-bearing patents.</td> + </tr> + </tbody> +</table> + +<h3 id="TIFF_Tagged_Image_File_Format"><a id="TIFF" name="TIFF">TIFF</a> (Tagged Image File Format)</h3> + +<p>{{interwiki("wikipedia", "TIFF")}} is a raster graphics file format which was created to store scanned photos, although it can be any kind of image. It is a somewhat "heavy" format, in that TIFF files have a tendency to be larger than images in other formats. This is because of the metadata often included, as well as the fact that most TIFF images are either uncompressed or use compression algorithms that still leave fairly large files after compression.</p> + +<p>TIFF supports a variety of compression methods, but the most commonly used are the CCITT Group 4 (and, for older fax systems, Group 3) compression systems used for by fax software, as well as LZW and lossy JPEG compression.</p> + +<p>Every value in a TIFF file is specified using its <strong>tag</strong> (indicating what kind of information it is, such as the width of the image) and its <strong>type</strong> (indicating the format the data is stored in), followed by the length of the array of values to assign to that tag (all properties are stored in arrays, even for single values). This allows different data types to be used for the same properties. For example, the width of an image, <code>ImageWidth</code>, is stored using tag <code>0x0100</code>, and is a one-entry array. By specifying type 3 (<code>SHORT</code>), the value of <code>ImageWidth</code> is stored as a 16-bit value:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Type</th> + <th scope="col">Size</th> + <th scope="col">Value</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>0x0100</code><br> + (<code>ImageWidth</code>)</td> + <td><code>0x0003</code><br> + (<code>SHORT</code>)</td> + <td><code>0x00000001</code><br> + (1 entry)</td> + <td><code>0x0280</code><br> + (640 pixels)</td> + </tr> + </tbody> +</table> + +<p>Specifying type 4 (<code>LONG</code>) stores the width as a 32-bit value:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Type</th> + <th scope="col">Size</th> + <th scope="col">Value</th> + </tr> + <tr> + <td><code>0x0100</code><br> + (<code>ImageWidth</code>)</td> + <td><code>0x0004</code><br> + (<code>LONG</code>)</td> + <td><code>0x00000001</code><br> + (1 entry)</td> + <td><code>0x00000280</code><br> + (640 pixels)</td> + </tr> + </thead> +</table> + +<p>A single TIFF file can contain multiple images; this may be used to represent multi-page documents, for example (such as a multi-page scanned document, or a received fax). However, software reading TIFF files is only required to support the first image.</p> + +<p>TIFF supports a variety of color spaces, not just RGB. These include CMYK, YCbCr, and others, making TIFF a good choice for storing images intended for print, film, or television media.</p> + +<p>Long ago, some browsers supported TIFF images in web content; today, however, you need to use special libraries or browser add-ons to do so. As such, TIFF files are not useful within the context of web content, <em>but </em>it's common to provide downloadable TIFF files when distributing photos and other artwork intended for precision editing or printing.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME 类型</th> + <td><code>image/tiff</code></td> + </tr> + <tr> + <th scope="row">文件拓展名</th> + <td><code>.tif</code>, <code>.tiff</code></td> + </tr> + <tr> + <th scope="row">规范</th> + <td><a href="https://www.adobe.io/open/standards/TIFF.html">adobe.io/open/standards/TIFF.html</a></td> + </tr> + <tr> + <th scope="row">浏览器兼容性</th> + <td>No browsers integrate support for TIFF; its value is as a download format</td> + </tr> + <tr> + <th scope="row">最高分辨率</th> + <td>4,294,967,295×4,294,967,295 pixels (theoretical)</td> + </tr> + <tr> + <th scope="row">支持的颜色模式</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">颜色模式</th> + <th scope="col">Bits per component (<em>D</em>)</th> + <th scope="col">描述</th> + </tr> + <tr> + <th scope="row">Bilevel</th> + <td>1</td> + <td>A bilevel TIFF stores 8 bits in each byte, one bit per pixel. The <code>PhotometricInterpretation</code> field specifies which of 0 and 1 are black and which is white.</td> + </tr> + <tr> + <th scope="row">Greyscale</th> + <td>4 and 8</td> + <td>Each pixel consists of a single <em>D</em>-bit value indicating the brightness of the greyscale pixel.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8</td> + <td>All true color RGB images are stored using 8-bits each of red, green, and blue.</td> + </tr> + <tr> + <th scope="row">Indexed color</th> + <td>4 and 8</td> + <td>Each pixel is an index into a <code>ColorMap</code> record, which defines the colors used in the image. The color map lists all of the red values, then all of the green values, then all of the blue values (rather than <code>rgb, rgb, rgb...</code>).</td> + </tr> + <tr> + <th scope="row">Greyscale with alpha</th> + <td>4 and 8</td> + <td>Alpha information is added by specifying that there are more than 3 samples per pixel in the <code>SamplesPerPixel</code> field, and indicating the type of alpha (1 for an associated, pre-multiplied alpha component, and 2 for unassociated alpha (a separate matte); however, alpha channels are rarely used in TIFF files and may be unsupported by the user's software.</td> + </tr> + <tr> + <th scope="row">True color with alpha</th> + <td>8</td> + <td>Alpha information is added by specifying that there are more than 3 samples per pixel in the <code>SamplesPerPixel</code> field, and indicating the type of alpha (1 for an associated, pre-multiplied alpha component, and 2 for unassociated alpha (a separate matte); however, alpha channels are rarely used in TIFF files and may be unsupported by the user's software.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">压缩</th> + <td>Most TIFF files are uncompressed, but lossless PackBits and LZW compression are supported, as is lossy JPEG compression.</td> + </tr> + <tr> + <th scope="row">授权</th> + <td>No license required (aside from any associated with libraries you might use); all known patents have expired.</td> + </tr> + </tbody> +</table> + +<h3 id="WebP_image"><a id="WebP" name="WebP">WebP image</a></h3> + +<p>WebP supports lossy compression via predictive coding based on the VP8 video codec, and lossless compression that uses substitutions for repeating data. Lossy WebP images average 25–35% smaller than JPEG images of visually similar compression levels. Lossless WebP images are typically 26% smaller than the same images in PNG format.</p> + +<p>WebP also supports animation: in a lossy WebP file, the image data is represented by a VP8 bitstream, which may contain multiple frames. Lossless WebP holds the <code>ANIM</code> chunk, which describes the animation, and the <code>ANMF</code> chunk, which represents a frame of an animation sequence. Looping is supported.</p> + +<p>WebP now has broad support in the latest versions of major web browsers, although it does not have deep historical support. Provide a fallback in either {{anch("JPEG")}} or {{anch("PNG")}} format, such as with <a href="/zh-CN/docs/Web/HTML/Element/picture">the <code><picture></code> element</a>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME 类型</th> + <td><code>image/webp</code></td> + </tr> + <tr> + <th scope="row">文件拓展名</th> + <td><code>.webp</code></td> + </tr> + <tr> + <th scope="row">规范</th> + <td> + <p><a href="https://developers.google.com/speed/webp/docs/riff_container">RIFF Container Specification</a><br> + {{RFC(6386, "VP8 Data Format and Decoding Guide")}} (lossy encoding)<br> + <a href="https://developers.google.com/speed/webp/docs/webp_lossless_bitstream_specification">WebP Lossless Bitstream Specification</a></p> + </td> + </tr> + <tr> + <th scope="row">浏览器兼容性</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">Lossy WebP support</th> + <td>17</td> + <td>18</td> + <td>65</td> + <td>no</td> + <td>11.10 (Presto)<br> + 15 (Blink)</td> + <td>no</td> + </tr> + <tr> + <th scope="row">Lossless WebP</th> + <td>23<br> + 25 on Android</td> + <td>18</td> + <td>65</td> + <td>no</td> + <td>12.10 (Presto)<br> + 15 (Blink)</td> + <td>no</td> + </tr> + <tr> + <th scope="row">动画</th> + <td>32</td> + <td>18</td> + <td>65</td> + <td>no</td> + <td>19 (Blink)</td> + <td>no</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">最高分辨率</th> + <td>16,383×16,383 pixels</td> + </tr> + <tr> + <th scope="row">支持的颜色模式</th> + <td>Lossy WebP stores the image in 8-bit Y'CbCr 4:2:0 (YUV420) format. Lossless WebP uses 8-bit ARGB color, with each component taking 8 bits for a total of 32 bits per pixel.</td> + </tr> + <tr> + <th scope="row">压缩</th> + <td>Lossless (Huffman, LZ77, or color cache codes) or lossy (VP8).</td> + </tr> + <tr> + <th scope="row">授权</th> + <td>No license required; source code is openly available.</td> + </tr> + </tbody> +</table> + +<h3 id="XBM_X_Window_System_Bitmap_file"><a id="XBM" name="XBM">XBM</a> (X Window System Bitmap file)</h3> + +<p>XBM (X Bitmap) files were the first to be supported on the Web, but are no longer used and should be avoided, as their format has potential security concerns. Modern browsers have not supported XBM files in many years, but when dealing with older content, you may find some still around.</p> + +<p>XBM uses a snippet of C code to represent the contents of the image as an array of bytes. Each image consists of 2 to 4 <code>#define</code> directives, providing the width and height of the bitmap (and optionally the hotspot, if the image is designed as a cursor), followed by an array of <code>unsigned char</code>, where each value contains 8 1-bit monochrome pixels.</p> + +<p>The image must be a multiple of 8 pixels wide. For example, the following code represents an XBM image which is 8 pixels by 8 pixels, with those pixels in a black-and-white checkerboard pattern:</p> + +<pre class="brush: cpp notranslate">#define square8_width 8 +#define square8_height 8 +static unsigned char square8_bits[] = { + 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55 +}; +</pre> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME 类型</th> + <td><code>image/xbm</code>, <code>image-xbitmap</code></td> + </tr> + <tr> + <th scope="row">文件拓展名</th> + <td><code>.xbm</code></td> + </tr> + <tr> + <th scope="row">规范</th> + <td>None</td> + </tr> + <tr> + <th scope="row">浏览器兼容性</th> + <td>Firefox 1–3.5, Internet Explorer 1–5</td> + </tr> + <tr> + <th scope="row">最高分辨率</th> + <td>无限制</td> + </tr> + <tr> + <th scope="row">支持的颜色模式</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">颜色模式</th> + <th scope="col">Bits per component</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Greyscale</th> + <td>1</td> + <td>Each byte contains eight 1-bit pixels.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td><em>n/a</em></td> + <td><em>n/a</em></td> + </tr> + <tr> + <th scope="row">Indexed color</th> + <td><em>n/a</em></td> + <td><em>n/a</em></td> + </tr> + <tr> + <th scope="row">Greyscale with alpha</th> + <td><em>n/a</em></td> + <td><em>n/a</em></td> + </tr> + <tr> + <th scope="row">True color with alpha</th> + <td><em>n/a</em></td> + <td><em>n/a</em></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">压缩</th> + <td>Lossless</td> + </tr> + <tr> + <th scope="row">授权</th> + <td>Open source</td> + </tr> + </tbody> +</table> + +<h2 id="选择合适的图像格式">选择合适的图像格式</h2> + +<p>Picking the best image format for your needs is likely easier than video formats, as there are fewer options with broad support, and each tends to have a specific set of use-cases.</p> + +<h3 id="Photographs">Photographs</h3> + +<p>Photographs typically fare well with lossy compression (depending on the encoder's configuration). This makes {{anch("JPEG")}} and {{anch("WebP")}} good choices for photographs, with JPEG being more compatible but WebP perhaps offering better compression. To maximize quality and minimize download time, consider providing both {{anch("Providing image fallbacks", "using a fallback")}} with WebP as the first choice and JPEG as the second. Otherwise, JPEG is the safe choice for compatibility.</p> + +<table class="standard-table" style="max-width: 42rem;"> + <thead> + <tr> + <th scope="col" style="width: 50%;">Best choice</th> + <th scope="col">Fallback</th> + </tr> + </thead> + <tbody> + <tr> + <td>WebP or JPEG</td> + <td>JPEG</td> + </tr> + </tbody> +</table> + +<h3 id="Icons">Icons</h3> + +<p>For smaller images such as icons, use a lossless format to avoid loss of detail in a size-constrained image. While lossless WebP is ideal for this purpose, support is not widespread yet, so PNG is a better choice unless you offer a {{anch("Providing image fallbacks", "fallback")}}. If your image contains fewer than 256 colors, GIF is an option, although PNG often compresses even smaller with its indexed compression option (PNG-8).</p> + +<p>If the icon can be represented using vector graphics, consider {{anch("SVG")}}, since it scales across various resolutions and sizes, so it's perfect for responsive design. Although SVG support is good, it may be worth offering a PNG fallback for older browsers.</p> + +<table class="standard-table" style="max-width: 42rem;"> + <thead> + <tr> + <th scope="col" style="width: 50%;">Best choice</th> + <th scope="col">Fallback</th> + </tr> + <tr> + <td>SVG, Lossless WebP, or PNG</td> + <td>PNG</td> + </tr> + </thead> +</table> + +<h3 id="Screenshots">Screenshots</h3> + +<p>Unless you're willing to compromise on quality, you should use a lossless format for screenshots. This is particularly important if there's any text in your screenshot, as text easily becomes fuzzy and unclear under lossy compression.</p> + +<p>PNG is probably your best bet, but lossless WebP is arguably going to be better compressed.</p> + +<table class="standard-table" style="max-width: 42rem;"> + <thead> + <tr> + <th scope="col" style="width: 50%;">Best choice</th> + <th scope="col">Fallback</th> + </tr> + <tr> + <td>Lossless WebP or PNG;<br> + JPEG if compression artifacts aren't a concern</td> + <td>PNG or JPEG;<br> + GIF for screenshots with low color counts</td> + </tr> + </thead> +</table> + +<h3 id="Diagrams_drawings_and_charts">Diagrams, drawings, and charts</h3> + +<p>For any image that can be represented using vector graphics, SVG is the best choice. Otherwise, you should use a lossless format like PNG. If you do choose a lossy format, such as JPEG or lossy WebP, carefully weigh the compression level to avoid causing text or other shapes to become fuzzy or unclear.</p> + +<table class="standard-table" style="max-width: 42rem;"> + <thead> + <tr> + <th scope="col" style="width: 50%;">Best choice</th> + <th scope="col">Fallback</th> + </tr> + <tr> + <td>{{anch("SVG")}}</td> + <td>{{anch("PNG")}}</td> + </tr> + </thead> +</table> + +<h2 id="提供后备图像">提供后备图像</h2> + +<p>While the standard HTML {{HTMLElement("img")}} element doesn't support compatibility fallbacks for images, the {{HTMLElement("picture")}} element does. <code><picture></code> is used as a wrapper for a number of {{HTMLElement("source")}} elements, each specifying a version of the image in a different format or under different <a href="/zh-CN/docs/Web/CSS/@media">media conditions</a>, as well as an <code><img></code> element which defines where to display the image and the fallback to the default or "most compatible" version.</p> + +<p>For example, if you're displaying a diagram best displayed with SVG, but wish to offer a fallback to a PNG or GIF of the diagram, you would do something like this:</p> + +<pre class="brush: html notranslate"><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="Diagram showing the data channels"> +</picture> +</pre> + +<p>You can specify as many <code><source></code>s as you wish, though typically 2 or 3 is all you need.</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/Media/Formats">Guide to media types and formats</a></li> + <li><a href="/zh-CN/docs/Web/Media">Web media technologies</a></li> + <li><a href="/zh-CN/docs/Web/Media/Formats/Video_codecs">Guide to video codecs used on the web</a></li> + <li>The {{Glossary("HTML")}} {{HTMLElement("img")}} and {{HTMLElement("picture")}} elements</li> + <li>The CSS {{cssxref("background-image")}} property</li> + <li>The {{domxref("Image()")}} constructor and the {{domxref("HTMLImageElement")}} interface</li> +</ul> diff --git a/files/zh-cn/web/media/formats/index.html b/files/zh-cn/web/media/formats/index.html new file mode 100644 index 0000000000..a08d7b2faa --- /dev/null +++ b/files/zh-cn/web/media/formats/index.html @@ -0,0 +1,88 @@ +--- +title: Guide to media types and formats on the web +slug: Web/Media/Formats +tags: + - API + - Audio + - Codecs + - Containers + - File Types + - Files + - Filetypes + - Landing + - Media + - NeedsTranslation + - TopicStub + - Types + - Video + - Web + - formats +translation_of: Web/Media/Formats +--- +<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</p> + +<p>Since nearly its beginning, the web has included support for some form of visual media presentation. Originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web. The modern web has powerful features to support the presentation and manipulation of media, with several media-related APIs supporting various types of content. Generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer.</p> + +<p><span class="seoSummary">This guide provides an overview of the media file types, {{Glossary("codec", "codecs")}}, and algorithms that may comprise media used on the web.</span> It also provides browser support information for various combinations of these, and suggestions for prioritization of formats, as well as which formats excel at specific types of content.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="References">References</h2> + +<h3 id="Images">Images</h3> + +<dl> + <dt><span style="display: none;"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt> + <dd>Covers support of image file types and content formats across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.</dd> + <dt><a href="/en-US/docs/Web/Media/Formats/Images_for_web_designers">Image file types for web designers</a></dt> + <dd>Fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.</dd> +</dl> + +<h3 id="Media_file_types_and_codecs">Media file types and codecs</h3> + +<dl> + <dt><a href="/en-US/docs/Web/Media/Formats/Containers">Media containers (file types)</a></dt> + <dd>A guide to the file types that contain media data. Some are audio-specific, while others may be used for either audio or combined audiovisual content such as movies. Includes overviews of each of the file types supported by the major web browsers, along with browser support information and supported features.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Web audio codec guide</a></dt> + <dd>A guide to the audio codecs allowed for by the common media containers, as well as by the major browsers. Includes benefits, limitations, key specifications and capabilities, and use cases. It also covers each browser's support for using the codec in given containers.</dd> + <dt><a href="/en-US/docs/Web/Media/Formats/Video_codecs">Web video codec guide</a></dt> + <dd>This article provides basic information about the video codecs supported by the major browsers, as well as some that are not commonly supported but that you might still run into. It also covers codec capabilities, benefits, limitations, and browser support levels and restrictions.</dd> + <dt><a href="/en-US/docs/Web/Media/Formats/codecs_parameter">The "codecs" parameter in common media types</a></dt> + <dd>When specifying the MIME type describing a media format, you can provide details using the <code>codecs</code> parameter as part of the type string. This guide describes the format and possible values of the <code>codecs</code> parameter for the common media types.</dd> + <dt><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></dt> + <dd><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> doesn't use a container, but instead streams the encoded media itself from peer to peer using {{domxref("MediaStreamTrack")}} objects to represent each audio or video track. This guide discusses the codecs commonly used with WebRTC.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Guides">Guides</h2> + +<h3 id="Concepts">Concepts</h3> + +<dl> + <dt><a href="/en-US/docs/Web/Media/Formats/Audio_concepts">Digital audio concepts</a></dt> + <dd>An introduction to how audio is converted into digital form and stored for use by computers. It explains basic concepts about how audio is sampled, as well as concepts such as sample rate, audio frames, and audio compression.</dd> + <dt><a href="/en-US/docs/Web/Media/Formats/Video_concepts">Digital video concepts</a></dt> + <dd>A guide to fundamental concepts involved with digital video as used on the web, including basics about color formats, chroma subsampling, how human perception influences video coding, and so forth.</dd> +</dl> + +<h3 id="Tutorials_and_how-tos">Tutorials and how-tos</h3> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning: Video and audio content</a></dt> + <dd>This tutorial introduces and details the use of media on the web.</dd> + <dt><a href="/en-US/docs/Web/Media/Formats/Support_issues">Handling media support issues in web content</a></dt> + <dd>In this guide, we look at how to build web content that maximizes quality or performance while providing the broadest possible compatibility, by choosing media formats wisely, and offering fallbacks and alternate formats where it would be helpful.</dd> +</dl> + +<h2 id="Other_topics">Other topics</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt> + <dd>The Media Capabilities API lets you discover the encoding and decoding capabilities of the device your app or site is running on. This lets you make real-time decisions about what formats to use and when.</dd> +</dl> +</div> +</div> diff --git a/files/zh-cn/web/media/formats/视频编解码器/index.html b/files/zh-cn/web/media/formats/视频编解码器/index.html new file mode 100644 index 0000000000..d299975762 --- /dev/null +++ b/files/zh-cn/web/media/formats/视频编解码器/index.html @@ -0,0 +1,1673 @@ +--- +title: 网络视频编解码器指南 +slug: Web/Media/Formats/视频编解码器 +translation_of: Web/Media/Formats/Video_codecs +--- +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</div> + +<p>未经压缩的视频的数据量太大了，我们有必要进行很多压缩处理来存储视频，就更不用说通过网络传输视频的时候了。想象一下我们需要多少数据来存储未经压缩的视频：</p> + +<ul> + <li>全色彩的高清视频（1920x1080）每一帧为 8,294,400 字节。</li> + <li>按照典型的每秒30帧的传播速度，高清视频每秒钟会占用 248,832,000 字节（约 249 MB）。</li> + <li>一分钟的高清视频将需要 1.39GB 的存储空间。</li> + <li>一个相当典型的30分钟视频会议将需要约 47.1GB 的存储空间，而2小时的电影则需要将近 166GB 的存储空间。</li> +</ul> + +<p>不仅仅是需要的存储空间很大的问题，以 249MB 每秒的速度传输这样的未压缩的视频所需要的网络带宽也很大（不包括音频和开销）。这就是为什么我们需要视频编解码器。就像音频编解码器对声音数据所做的处理一样，视频编解码器会压缩视频数据并将其编码为一种格式，以后我们可以对其进行解码，播放或者编辑。</p> + +<p>大多数的视频编解码器是有损的（解码后的视频与原来的视频不完全匹配）。一些细节可能会丢失，丢失的数量取决于编解码器和它的配置方式。通常来说，压缩程度越高，细节丢失的越多，视频失真更严重。虽然现在也有一些无损编解码器，但是通常都是用于存档和存储在本地来进行本地回放的，而不是在网络上使用。</p> + +<p><span class="seoSummary">本指南介绍了一些你可能遇到或者考虑去使用的网络视频编解码器的功能以及一些兼容性和实用性问题。并且帮助您为项目视频选择正确的编解码器提供一些建议。</span></p> + +<h2 id="通用编解码器">通用编解码器</h2> + +<p>以下视频编解码器是网上最常用的视频编解码器。每个编解码器都列出了它们可以支持的文件类型。每个编解码器都提供了一个指向下文相关部分详细内容的快捷链接，包含一些您可能需要了解的特定功能和兼容性问题。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">编解码器名称 (简称)</th> + <th scope="col">编解码器全称</th> + <th scope="col">支持文件类型</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#AV1">AV1</a></th> + <td>AOMedia Video 1</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC (H.264)</a></th> + <td>Advanced Video Coding</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#H.263">H.263</a></th> + <td>H.263 Video</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a></td> + </tr> + <tr> + <th scope="row"><a href="#HEVC">HEVC (H.265)</a></th> + <td>High Efficiency Video Coding</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td> + </tr> + <tr> + <th scope="row">{{anch("MP4V-ES")}}</th> + <td>MPEG-4 Video Elemental Stream</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td> + </tr> + <tr> + <th scope="row">{{anch("MPEG-1")}}</th> + <td>MPEG-1 Part 2 Visual</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MPEGMPEG-2">MPEG</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td> + </tr> + <tr> + <th scope="row">{{anch("MPEG-2")}}</th> + <td>MPEG-2 Part 2 Visual</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MPEGMPEG-2">MPEG</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#Theora">Theora</a></th> + <td>Theora</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a></td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#VP8">VP8</a></th> + <td>Video Processor 8</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#VP9">VP9</a></th> + <td>Video Processor 9</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + </tbody> +</table> + +<h2 id="影响编码视频的因素">影响编码视频的因素</h2> + +<p>和任何编码器一样，有两个会影响到编码视频大小和质量的因素：源视频的格式和内容，以及在对视频进行编码时候使用的编解码器的特性和配置。</p> + +<p>最简单的原则是：如果要让编码视频看起来更像原始的未压缩过的视频，那么通常得到的视频会更大。因此我们始终要在尺寸和质量之间进行权衡。在某些情况下，我们会为了降低数据大小而接受质量的损失。但是其他时候，我们不能接受质量损失，所以我们必须接受会导致文件相应增大的编码器配置。</p> + +<h3 id="源视频格式对编码输出的影响">源视频格式对编码输出的影响</h3> + +<p>源视频格式影响编码输出的程度取决于编解码器及其工作方式。如果编解码器将视频媒体转换为内部像素的格式，或者使用使用简单像素以外的方法表示图像，那么原始图像的格式对编码输出没有什么影响。但是，诸如帧频和分辨率之类始终会对媒体视频的输出大小产生影响。</p> + +<p>Additionally, all codecs have their strengths and weaknesses. Some have trouble with specific kinds of shapes and patterns, or aren't good at replicating sharp edges, or tend to lose detail in dark areas, or any number of possibilities. It all depends on the underlying algorithms and mathematics.</p> + +<table class="standard-table"> + <caption>The potential effect of source video format and contents on the encoded video quality and size</caption> + <thead> + <tr> + <th scope="row">Feature</th> + <th scope="col">对质量的影响</th> + <th scope="col">对尺寸的影响</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Color depth (bit depth)</th> + <td>颜色位深越高，视频中颜色保真度质量就越高。除此之外，在图像饱和部分（颜色纯而强烈的，例如明亮纯红色［rgba(255,0,0,1)），低于每分量10色深(10bits色彩)允许条带化，其中，如果没有可见色阶跃就无法表示渐变。</td> + <td>Depending on the codec, higher color depths may result in larger compressed file sizes. The determining factor is what internal storage format is used for the compressed data.</td> + </tr> + <tr> + <th scope="row">Frame rate</th> + <td>Primarily affects the perceived smoothness of the motion in the image. To a point, the higher the frame rate, the smoother and more realistic the motion will appear. Eventually the point of diminishing returns is reached. See {{anch("Frame rate")}} below for details.</td> + <td>Assuming the frame rate is not reduced during encoding, higher frame rates cause larger compressed video sizes.</td> + </tr> + <tr> + <th scope="row">Motion</th> + <td>Compression of video typically works by comparing frames, finding where they differ, and constructing records containing enough information to update the previous frame to approximate the appearance of the following frame. The more successive frames differ from one another, the larger these differences are, and the less effective the compression is at avoiding the introduction of artifacts into the compressed video.</td> + <td>The complexity introduced by motion results in larger intermediate frames due to the higher number of differences between frames). For this and other reasons, the more motion there is in a video, the larger the output file will typically be.</td> + </tr> + <tr> + <th scope="row">Noise</th> + <td>Picture noise (such as film grain effects, dust, or other grittiness to the image) introduces variability. Variability generally makes compression more difficult, resulting in more lost quality due to the need to drop details to achieve the same level of compression.</td> + <td>The more variability—such as noise—there is in the image, the more complex the compression process and the less success the algorithm is likely to have compressing the image to the same degree. Unless you configure the encoder in a way that ignores some or all of the variations caused by noise, the compressed video will be larger.</td> + </tr> + <tr> + <th scope="row">Resolution (width and height)</th> + <td>Higher resolution video, presented in the same screen size, will typically be able to more accurately portray the original scene, barring effects introduced during compression.</td> + <td>The higher the resolution of a video, the larger it gets. This plays a key role in the final size of the video.</td> + </tr> + </tbody> +</table> + +<p>The degree to which these affect the resulting encoded video will vary depending on the precise details of the situation, including which encoder you use and how it's configured. In addition to general codec options, the encoder could be configured to reduce the frame rate, to clean up noise, and/or to reduce the overall resolution of the video during encoding.</p> + +<h3 id="Effect_of_codec_configuration_on_encoded_output">Effect of codec configuration on encoded output</h3> + +<p>The algorithms used do encode video typically use one or more of a number of general techniques to perform their encoding. Generally speaking, any configuration option that is intended to reduce the output size of the video will probably have a negative impact on the overall quality of the video, or will introduce certain types of artifacts into the video. It's also possible to select a lossless form of encoding, which will result in a much larger encoded file but with perfect reproduction of the original video upon decoding.</p> + +<p>In addition, each encoder utility may have variations in how they process the source video, resulting in differences in the output quality and/or size.</p> + +<table class="standard-table"> + <caption>Video encoder configuration effects on quality and size</caption> + <thead> + <tr> + <th scope="row">Feature</th> + <th scope="col">Effect on quality</th> + <th scope="col">Effect on size</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Lossless compression</th> + <td>No loss of quality</td> + <td>Lossless compression cannot reduce the overall video size nearly as much as lossy compression; the resulting files are likely to still be too large for general usage.</td> + </tr> + <tr> + <th scope="row">Lossy compression</th> + <td>To some degree, artifacts and other forms of quality degradation wil occur, depending on the specific codec and how much compression is being applied</td> + <td>The more the encoded video is allowed to deviate from the source, the easier it is to accomplish higher compression rates</td> + </tr> + <tr> + <th scope="row">Quality setting</th> + <td>The higher the quality configuration, the more like the original media the encoded video will look</td> + <td>In general, higher quality settings will result in larger encoded video files; the degree to which this is true varies depending on the codec</td> + </tr> + <tr> + <th scope="row">Bit rate</th> + <td>Quality generally improves with higher bit rates</td> + <td>Higher bit rates inherently lead to larger output files</td> + </tr> + </tbody> +</table> + +<p>The options available when encoding video, and the values to be assigned to those options, will vary not only from one codec to another but depending on the encoding software you use. The documentation included with your encoding software will help you to understand the specific impact of these options on the encoded video.</p> + +<h2 id="Compression_artifacts">Compression artifacts</h2> + +<p><strong>Artifacts</strong> are side effects of a lossy encoding process in which the lost or rearranged data results in visibly negative effects. Once an artifact has appeared, it may linger for a while, because of how video is displayed. Each frame of video is presented by applying a set of changes to the currently-visible frame. This means that any errors or artifacts will compound over time, resulting in glitches or otherwise strange or unexpected deviations in the image that linger for a time.</p> + +<p>To resolve this, and to improve seek time through the video data, periodic <strong>key frames</strong> (also known as <strong>intra-frames</strong> or <strong>i-frames</strong>) are placed into the video file. The key frames are full frames, which are used to repair any damage or artifact residue that's currently visible.</p> + +<h3 id="Aliasing">Aliasing</h3> + +<p>Aliasing is a general term for anything that upon being reconstructed from the encoded data does not look the same as it did before compression. There are many forms of aliasing; the most common ones you may see include:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td> + <h4 id="Moiré_patterns">Moiré patterns</h4> + + <p>A <strong>{{interwiki("Moiré pattern")}}</strong> is a large-scale spatial interference pattern produced when a pattern in the source image and the manner in which the encoder operates are slightly out of alignment spatially. The artifacts generated by the encoder then introduce strange, swirling effects in the source image's pattern upon decoding.</p> + </td> + <td><a href="https://mdn.mozillademos.org/files/16680/moire-pattern.jpg"><img alt="" src="https://mdn.mozillademos.org/files/16680/moire-pattern.jpg" style="height: 250px; width: 205px;"></a></td> + </tr> + <tr> + <td> + <h4 id="Staircase_effect">Staircase effect</h4> + + <p>The <strong>staircase effect</strong> is a spatial artifact that occurs when diagonal straight or curved edges that should be smooth take on a jagged appearance, looking somewhat like a set of stair steps. This is the effect that is being reduced by "anti-aliasing" filters.</p> + </td> + <td><a href="https://mdn.mozillademos.org/files/16681/staircase-effect.jpg"><img alt="" src="https://mdn.mozillademos.org/files/16681/staircase-effect.jpg" style="height: 250px; width: 206px;"></a></td> + </tr> + <tr> + <td> + <h4 id="Wagon-wheel_effect">Wagon-wheel effect</h4> + + <p>The <strong>wagon-wheel effect</strong> (or <strong>{{interwiki("wikipedia", "stroboscopic effect")}}</strong>) is the visual effect that's commonly seen in film, in which a turning wheel appears to rotate at the wrong speed, or even in reverse, due to an interaction between the frame rate and the compression algorithm. The same effect can occur with any repeating pattern that moves, such as the ties on a railway line, posts along the side of a road, and so forth. This is a temporal (time-based) aliasing issue; the speed of the rotation interferes with the frequency of the sampling performed during compression or encoding.</p> + </td> + <td><a href="https://mdn.mozillademos.org/files/16682/stroboscopic-effect.gif"><img alt="" src="https://mdn.mozillademos.org/files/16682/stroboscopic-effect.gif"></a></td> + </tr> + </tbody> +</table> + +<h3 id="Color_edging">Color edging</h3> + +<p><strong>Color edging</strong> is a type of visual artifact that presents as spurious colors introduced along the edges of colored objects within the scene. These colors have no intentional color relationship to the contents of the frame.</p> + +<h3 id="Loss_of_sharpness"> Loss of sharpness</h3> + +<p>The act of removing data in the process of encoding video requires that some details be lost. If enough compression is applied, parts or potentially all of the image could lose sharpness, resulting in a slightly fuzzy or hazy appearance.</p> + +<p>Lost sharpness can make text in the image difficult to read, as text—especially small text—is very detail-oriented content, where minor alterations can significantly impact legibility.</p> + +<h3 id="Ringing">Ringing</h3> + +<p>Lossy compression algorithms can introduce <strong>{{interwiki("wikipedia", "ringing artifacts", "ringing")}}</strong>, an effect where areas outside an object are contaminated with colored pixels generated by the compression algorithm. This happens when an algorithm that uses blocks that span across a sharp boundary between an object and its background. This is particularly common at higher compression levels.</p> + +<p><a href="https://mdn.mozillademos.org/files/16684/Ringing-effects.png"><img alt="Example of the ringing effect" src="https://mdn.mozillademos.org/files/16684/Ringing-effects.png" style="height: 368px; width: 350px;"></a></p> + +<p>Note the blue and pink fringes around the edges of the star above (as well as the stepping and other significant compression artifacts). Those fringes are the ringing effect. Ringing is similar in some respects to {{anch("Mosquito noise", "mosquito noise")}}, except that while the ringing effect is more or less steady and unchanging, mosquito noise shimmers and moves.</p> + +<p>RInging is another type of artifact that can make it particularly difficult to read text contained in your images.</p> + +<h3 id="Posterizing">Posterizing</h3> + +<p><strong>Posterization</strong> occurs when the compression results in the loss of color detail in gradients. Instead of smooth transitions through the various colors in a region, the image becomes blocky, with blobs of color that approximate the original appearance of the image.</p> + +<p><a href="https://mdn.mozillademos.org/files/16686/posterize-effect.jpg"><img alt="" src="https://mdn.mozillademos.org/files/16686/posterize-effect.jpg" style="height: 440px; width: 400px;"></a></p> + +<p>Note the blockiness of the colors in the plumage of the bald eagle in the photo above (and the snowy owl in the background). The details of the feathers is largely lost due to these posterization artifacts.</p> + +<h3 id="Contouring">Contouring</h3> + +<p><strong>Contouring</strong> or <strong>color banding</strong> is a specific form of posterization in which the color blocks form bands or stripes in the image. This occurs when the video is encoded with too coarse a quantization configuration. As a result, the video's contents show a "layered" look, where instead of smooth gradients and transitions, the transitions from color to color are abrupt, causing strips of color to appear.</p> + +<p><a href="https://mdn.mozillademos.org/files/16685/contouring-effect.jpg"><img alt="Example of an image whose compression has introduced contouring" src="https://mdn.mozillademos.org/files/16685/contouring-effect.jpg" style="height: 300px; width: 400px;"></a></p> + +<p>In the example image above, note how the sky has bands of different shades of blue, instead of being a consistent gradient as the sky color changes toward the horizon. This is the contouring effect.</p> + +<h3 id="Mosquito_noise">Mosquito noise</h3> + +<p><strong>Mosquito noise</strong> is a temporal artifact which presents as noise or <strong>edge busyness</strong> that appears as a flickering haziness or shimmering that roughly follows outside the edges of objects with hard edges or sharp transitions between foreground objects and the background. The effect can be similar in appearance to {{anch("Ringing", "ringing")}}.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16687/mosquito-effect-sm.png" style="height: 393px; width: 400px;"></p> + +<p>The photo above shows mosquito noise in a number of places, including in the sky surrounding the bridge. In the upper-right corner, an inset shows a close-up of a portion of the image that exhibits mosquito noise.</p> + +<p>Mosquito noise artifacts are most commonly found in MPEG video, but can occur whenever a discrete cosine transform (DCT) algorithm is used; this includes, for example, JPEG still images.</p> + +<h3 id="Motion_compensation_block_boundary_artifacts">Motion compensation block boundary artifacts</h3> + +<p>Compression of video generally works by comparing two frames and recording the differences between them, one frame after another, until the end of the video. This technique works well when the camera is fixed in place, or the objects in the frame are relatively stationary, but if there is a great deal of motion in the frame, the number of differences between frames can be so great that compression doesn't do any good.</p> + +<p><strong>{{interwiki("wikipedia", "Motion compensation")}}</strong> is a technique that looks for motion (either of the camera or of objects in the frame of view) and determines how many pixels the moving object has moved in each direction. Then that shift is stored, along with a description of the pixels that have moved that can't be described just by that shift. In essence, the encoder finds the moving objects, then builds an internal frame of sorts that looks like the original but with all the objects translated to their new locations. In theory, this approximates the new frame's appearance. Then, to finish the job, the remaining differences are found, then the set of object shifts and the set of pixel differences are stored in the data representing the new frame. This object that describes the shift and the pixel differences is called a <strong>residual frame</strong>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col" style="width: 216px;">Original frame</th> + <th scope="col" style="width: 216px;">Inter-frame differences</th> + <th scope="col" style="width: 216px;">Difference after motion compensation</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Original frame of video" src="https://mdn.mozillademos.org/files/16688/motion-comp-orig.jpg" style="height: 102px; width: 182px;"></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/16689/motion-comp-diff.jpg" style="height: 102px; width: 182px;"></td> + <td><img alt="Differences between the frames after shifting two pixels right" src="https://mdn.mozillademos.org/files/16690/motion-comp-compensated.jpg" style="height: 102px; width: 182px;"></td> + </tr> + <tr> + <td style="vertical-align: top;">The first full frame as seen by the viewer.</td> + <td style="vertical-align: top;">Here, only the differences between the first frame and the following frame are seen. Everything else is black. Looking closely, we can see that the majority of these differences come from a horizontal camera move, making this a good candidate for motion compensation.</td> + <td style="vertical-align: top;">To minimize the number of pixels that are different, here we take into account the panning of the camera by first shifting the first frame to the right by two pixels, then by taking the difference. This compensates for the panning of the camera, allowing for more overlap between the two frames.</td> + </tr> + <tr> + <th colspan="3" style="font: italic 0.9em Arial, x-locale-body, sans-serif; vertical-align: middle;">Images from <a href="https://en.wikipedia.org/wiki/Motion_compensation#Illustrated_example">Wikipedia</a></th> + </tr> + </tbody> +</table> + +<p>There are two general types of motion compensation: <strong>global motion compensation</strong> and <strong>block motion compensation</strong>. Global motion compensation generally adjusts for camera movements such as tracking, dolly movements, panning, tilting, rolling, and up and down movements. Block motion compensation handles localized changes, looking for smaller sections of the image that can be encoded using motion compensation. These blocks are normally of a fixed size, in a grid, but there are forms of motion compensation that allow for variable block sizes, and even for blocks to overlap.</p> + +<p>There are, however, artifacts that can occur due to motion compensation. These occur along block borders, in the form of sharp edges that produce false ringing and other edge effects. These are due to the mathematics involved in the coding of the residual frames, and can be easily noticed before being repaired by the next key frame.</p> + +<h3 id="Reduced_frame_size">Reduced frame size</h3> + +<p>In certain situations, it may be useful to reduce the video's dimensions in order to improve the final size of the video file. While the immediate loss of size or smoothness of playback may be a negative factor, careful decision-making can result in a good end result. If a 1080p video is reduced to 720p prior to encoding, the resulting video can be much smaller while having much higher visual quality; even after scaling back up during playback, the result may be better than encoding the original video at full size and accepting the quality hit needed to meet your size requirements.</p> + +<h3 id="Reduced_frame_rate">Reduced frame rate</h3> + +<p>Similarly, you can remove frames from the video entirely and decrease the frame rate to compensate. This has two benefits: it makes the overall video smaller, and that smaller size allows motion compensation to accomplish even more for you. For exmaple, instead of computing motion differences for two frames that are two pixels apart due to inter-frame motion, skipping every other frame could lead to computing a difference that comes out to four pixels of movement. This lets the overall movement of the camera be represented by fewer residual frames.</p> + +<p>The absolute minimum frame rate that a video can be before its contents are no longer perceived as motion by the human eye is about 12 frames per second. Less than that, and the video becomes a series of still images. Motion picture film is typically 24 frames per second, while standard definition television is about 30 frames per second (slightly less, but close enough) and high definition television is between 24 and 60 frames per second. Anything from 24 FPS upward will generally be seen as satisfactorily smooth; 30 or 60 FPS is an ideal target, depending on your needs.</p> + +<p>In the end, the decisions about what sacrifices you're able to make are entirely up to you and/or your design team.</p> + +<h2 id="Codec_details">Codec details</h2> + +<h3 id="AV1">AV1</h3> + +<p>The <strong>AOMedia Video 1</strong> (<strong>AV1</strong>) codec is an open format designed by the <a href="https://aomedia.org/">Alliance for Open Media</a> specifically for internet video. It achieves higher data compression rates than {{anch("VP9")}} and {{anch("HEVC", "H.265/HEVC")}}, and as much as 50% higher rates than <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC</a>. AV1 is fully royalty-free and is designed for use by both the {{HTMLElement("video")}} element and by <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>.</p> + +<p>AV1 currently offers three profiles: <strong>main</strong>, <strong>high</strong>, and <strong>professional</strong> with increasing support for color depths and chroma subsampling. In addition, a series of <strong>levels</strong> are specified, each defining limits on a range of attributes of the video. These attributes include frame dimensions, image area in pixels, display and decode rates, average and maximum bit rates, and limits on the number of tiles and tile columns used in the encoding/decoding process.</p> + +<p>For example, level AV1 level 2.0 offers a maximum frame width of 2048 pixels and a maximum height of 1152 pixels, but its maximum frame size in pixels is 147,456, so you can't actually have a 2048x1152 video at level 2.0. It's worth noting, however, that at least for Firefox and Chrome, the levels are actually ignored at this time when performing software decoding, and the decoder just does the best it can to play the video given the settings provided. For compatibility's sake going forward, however, you should stay within the limits of the level you choose.</p> + +<p>The primary drawback to AV1 at this time is that it is very new, and support is still in the process of being integrated into most browsers. Additionally, encoders and decoders are still being optimized for performance, and hardware encoders and decoders are still mostly in development rather than production. For this reason, encoding a video into AV1 format takes a very long time, since all the work is done in software.</p> + +<p>For the time being, because of these factors, AV1 is not yet ready to be your first choice of video codec, but you should watch for it to be ready to use in the future.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Supported bit rates</th> + <td>Varies depending on the video's level; theoretical maximum reaches 800 Mbps at level 6.3<sup><a href="#av1-foot-2">[2]</a></sup></td> + </tr> + <tr> + <th scope="row">Supported frame rates</th> + <td>Varies by level; for example, level 2.0 has a maximum of 30 FPS while level 6.3 can reach 120 FPS</td> + </tr> + <tr> + <th scope="row">Compression</th> + <td>Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-based algorithm</a></td> + </tr> + <tr> + <th scope="row">Supported frame sizes</th> + <td>8 x 8 pixels to 65,535 x 65535 pixels with each dimension allowed to take any value between these</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">Profile</th> + <th scope="col">Color depths</th> + <th scope="col">Chroma subsampling</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Main</th> + <td>8 or 10</td> + <td>4:0:0 (greyscale) or 4:2:0</td> + </tr> + <tr> + <th scope="row">High</th> + <td>8 or 10</td> + <td>4:0:0 (greyscale), 4:2:0, or 4:4:4</td> + </tr> + <tr> + <th scope="row">Professional</th> + <td>8, 10, or 12</td> + <td>4:0:0 (greyscale), 4:2:0, 4:2:2, or 4:4:4</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">HDR support</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Variable Frame Rate (VFR) support</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">AV1 support</th> + <td>70</td> + <td>75</td> + <td>67</td> + <td>No</td> + <td>57</td> + <td>No</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Container support</th> + <td>ISOBMFF<sup><a href="#av1-foot-1">[1]</a></sup>, MPEG-TS, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Supporting/Maintaining organization</th> + <td><a href="https://aomedia.org/">Alliance for Open Media</a></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a href="https://aomediacodec.github.io/av1-spec/av1-spec.pdf">https://aomediacodec.github.io/av1-spec/av1-spec.pdf</a></td> + </tr> + <tr> + <th scope="row">Licensing</th> + <td>Royalty-free, open standard</td> + </tr> + </tbody> +</table> + +<p><a id="av1-foot-1" name="av1-foot-1">[1]</a> {{interwiki("wikipedia", "ISO Base Media File Format")}}</p> + +<p><a name="av1-foot-2">[2]</a> See the AV1 specification's <a href="https://aomediacodec.github.io/av1-spec/#levels">tables of levels</a>, which describe the maximum resolutions and rates at each level.</p> + +<h3 id="AVC_H.264"><a name="AVC">AVC</a> (H.264)</h3> + +<p>The MPEG-4 specification suite's <strong>Advanced Video Coding</strong> (<strong>AVC</strong>) standard is specified by the identical ITU H.264 specification and the MPEG-4 Part 10 specification. It's a motion compensation based codec that is widely used today for all sorts of media, including broadcast television, {{Glossary("RTP")}} videoconferencing, and as the video codec for Blu-Ray discs.</p> + +<p>AVC is highly flexible, with a number of profiles with varying capabilities; for example, the Constrained Baseline Profile is designed for use in videoconferencing and mobile scenarios, using less bandwidth than the Main Profile (which is used for standard definition digital TV in some regions) or the High Profile (used for Blu-Ray Disc video). Most of the profiles use 8-bit color components and 4:2:0 chroma subsampling; The High 10 Profile adds support for 10-bit color, and advanced forms of High 10 add 4:2:2 and 4:4:4 chroma subsampling.</p> + +<p>AVC also has special features such as support for multiple views of the same scene (Multiview Video Coding), which allows, among other things, the production of stereoscopic video.</p> + +<p>AVC is a proprietary format, however, and numerous patents are owned by multiple parties regarding its technologies. Commercial use of AVC media requires a license, though the MPEG LA patent pool does not require license fees for streaming internet video in AVC format as long as the video is free for end users.</p> + +<p>Non-web browser implementations of WebRTC (any implementation which doesn't include the JavaScript APIs) are <em>required</em> to support AVC as a codec in WebRTC calls. While web browsers are not required to do so, some do.</p> + +<p>In HTML content for web browsers, AVC is broadly compatible and many platforms support hardware encoding and decoding of AVC media. However, be aware of its <a href="https://www.mpegla.com/programs/avc-h-264/">licensing requirements</a> before choosing to use AVC in your project!</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Supported bit rates</th> + <td>Varies by level</td> + </tr> + <tr> + <th scope="row">Supported frame rates</th> + <td>Varies by level; up to 300 FPS is possible</td> + </tr> + <tr> + <th scope="row">Compression</th> + <td>Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-based algorithm</a>, though it's possible to create lossless macroblocks within the image</td> + </tr> + <tr> + <th scope="row">Supported frame sizes</th> + <td>Up to 8,192 x 4,320 pixels</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td> + <p>Some of the more common or interesting profiles:</p> + + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Profile</th> + <th scope="col">Color depths</th> + <th scope="col">Chroma subsampling</th> + </tr> + <tr> + <td>Constrained Baseline (CBP)</td> + <td>8</td> + <td>4:2:0</td> + </tr> + <tr> + <td>Baseline (BP)</td> + <td>8</td> + <td>4:2:0</td> + </tr> + <tr> + <td>Extended (XP)</td> + <td>8</td> + <td>4:2:0</td> + </tr> + <tr> + <td>Main (MP)</td> + <td>8</td> + <td>4:2:0</td> + </tr> + <tr> + <td>High (HiP)</td> + <td>8</td> + <td>4:0:0 (greyscale) and 4:2:0</td> + </tr> + <tr> + <td>Progressive High (ProHiP)</td> + <td>8</td> + <td>4:0:0 (greyscale) and 4:2:0</td> + </tr> + <tr> + <td>High 10 (Hi10P)</td> + <td>8 to 10</td> + <td>4:0:0 (greyscale) and 4:2:0</td> + </tr> + <tr> + <td>High 4:2:2 (Hi422P)</td> + <td>8 to 10</td> + <td>4:0:0 (greyscale), 4:2:0, and 4:2:2</td> + </tr> + <tr> + <td>High 4:4:4 Predictive</td> + <td>8 to 14</td> + <td>4:0:0 (greyscale), 4:2:0, 4:2:2, and 4:4:4</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">HDR support</th> + <td>Yes; {{interwiki("wikipedia", "Hybrid Log-Gamma")}} or Advanced HDR/SL-HDR; both are part of ATSC</td> + </tr> + <tr> + <th scope="row">Variable Frame Rate (VFR) support</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">AVC/H.265 support</th> + <td>4</td> + <td>12</td> + <td>35<sup><a href="#avc-foot-1">[1]</a></sup></td> + <td>9</td> + <td>25</td> + <td>3.2</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Container support</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Supporting/Maintaining organization</th> + <td><a href="https://mpeg.chiariglione.org/">MPEG</a> / <a href="https://www.itu.int/">ITU</a></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a href="https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding">https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding</a><br> + <a href="https://www.itu.int/rec/T-REC-H.264">https://www.itu.int/rec/T-REC-H.264</a></td> + </tr> + <tr> + <th scope="row">Licensing</th> + <td>Proprietary with numerous patents. Commercial use <a href="https://www.mpegla.com/programs/avc-h-264/">requires a license</a>. Note that multiple patent pools may apply.</td> + </tr> + </tbody> +</table> + +<p><a id="avc-foot-1" name="avc-foot-1">[1]</a> Firefox support for AVC is dependent upon the operating system's built-in or preinstalled codecs for AVC and its container in order to avoid patent concerns.</p> + +<h3 id="H.263">H.263</h3> + +<p>ITU's <strong>H.263</strong> codec was designed primarily for use in low-bandwidth situations. In particular, its focus is for video conferencing on PSTN (Public Switched Telephone Networks), {{Glossary("RTSP")}}, and SIP (IP-based videoconferencing) systems. Despite being optimized for low-bandwidth networks, it is fairly CPU intensive and may not perform adequately on lower-end computers. The data format is similar to that of MPEG-4 Part 2.</p> + +<p>H.263 has never been widely used on the web. Variations on H.263 have been used as the basis for other proprietary formats, such as Flash video or the Sorenson codec. However, no major browser has ever included H.263 support by default. Certain media plugins have enabled support for H.263 media.</p> + +<p>Unlike most codecs, H.263 defines fundamentals of an encoded video in terms of the maximum bit rate per frame (picture), or <strong>BPPmaxKb</strong>. During encoding, a value is selected for BPPmaxKb, and then the video cannot exceed this value for each frame. The final bit rate will depend on this, the frame rate, the compression, and the chosen resolution and block format.</p> + +<p>H.263 has been superseded by H.264 and is therefore considered a legacy media format which you generally should avoid using if you can. The only real reason to use H.263 in new projects is if you require support on very old devices on which H.263 is your best choice.</p> + +<p>H.263 is a proprietary format, with <a href="https://www.itu.int/ITU-T/recommendations/related_ps.aspx?id_prod=4242">patents</a> held by a number of organizations and companies, including Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm, and so on. To use H.263, you are legally obligated to obtain the appropriate licenses.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Supported bit rates</th> + <td>Unrestricted, but typically below 64 Kbps</td> + </tr> + <tr> + <th scope="row">Supported frame rates</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">Compression</th> + <td>Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-based algorithm</a></td> + </tr> + <tr> + <th scope="row">Supported frame sizes</th> + <td>Up to 1408 x 1152 pixels<sup><a href="#h263-foot-2">[2]</a></sup></td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td>YCbCr; each picture format (sub-QCIF, QCIF, CIF, 4CIF, or 16CIF) defines the frame size in pixels as well as how many rows each of luminance and chrominance samples are used for each frame</td> + </tr> + <tr> + <th scope="row">HDR support</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Variable Frame Rate (VFR) support</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">H.263 support</th> + <td>No</td> + <td>No</td> + <td>No<sup><a href="#h263-foot-1">[1]</a></sup></td> + <td>No</td> + <td>No</td> + <td>No</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Container support</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Supporting/Maintaining organization</th> + <td><a href="https://www.itu.net/">ITU</a></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a href="https://www.itu.int/rec/T-REC-H.263/">https://www.itu.int/rec/T-REC-H.263/</a></td> + </tr> + <tr> + <th scope="row">Licensing</th> + <td>Proprietary; appropriate license or licenses are required. Note that multiple patent pools may apply.</td> + </tr> + </tbody> +</table> + +<p><a id="h263-foot-1" name="h263-foot-1">[1]</a> While Firefox does not generally support H.263, the OpenMax platform implementation (used for the Boot to Gecko project upon which Firefox OS was based) did support H.263 in 3GP files.</p> + +<p><a id="h263-foot-2" name="h263-foot-2">[2]</a> Version 1 of H.263 specifies a set of picture sizes which are supported. Later versions may support additional resolutions.</p> + +<h3 id="HEVC_H.265"><a id="HEVC" name="HEVC">HEVC</a> (H.265)</h3> + +<p>The <strong><a href="http://hevc.info/">High Efficiency Video Coding</a></strong> (<strong>HVEC</strong>) codec is defined by ITU's <strong>H.265</strong> as well as by MPEG-H Part 2 (the still in-development follow-up to MPEG-4). HEVC was designed to support efficient encoding and decoding of video in sizes including very high resolutions (including 8K video), with a structure specifically designed to let software take advantage of modern processors. Theoretically, HEVC can achieve compressed file sizes half that of {{anch("AVC")}} but with comparable image quality.</p> + +<p>For example, each coding tree unit (CTU)—similar to the macroblock used in previous codecs—consists of a tree of luma values for each sample as well as a tree of chroma values for each chroma sample used in the same coding tree unit, as well as any required syntax elements. This structure supports easy processing by multiple cores.</p> + +<p>An interesting feature of HEVC is that the main profile supports only 8 bit per component color with 4:2:0 chroma subsampling. Also interesting is that 4:4:4 video is handled specially. Instead of having the luma samples (representing the image's pixels in grayscale) and the Cb and Cr samples (indicating how to alter the grays to create color pixels), the three channels are instead treated as three monochrome images, one for each color, which are then combined during rendering to produce a full-color image.</p> + +<p>HEVC is a proprietary format and is covered by a number of patents. Licensing is <a href="https://www.mpegla.com/programs/hevc/">managed by MPEG LA</a>; fees are charged to developers rather than to content producers and distributors. Be sure to review the latest license terms and requirements before making a decision on whether or not to use HEVC in your app or web site!</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Supported bit rates</th> + <td>Up to 800,000 Kbps</td> + </tr> + <tr> + <th scope="row">Supported frame rates</th> + <td>Varies by level; up to 300 FPS is possible</td> + </tr> + <tr> + <th scope="row">Compression</th> + <td>Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-based algorithm</a></td> + </tr> + <tr> + <th scope="row">Supported frame sizes</th> + <td>128 x 96 to 8,192 x 4,320 pixels; varies by profile and level</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td> + <p>Information below is provided for the major profiles. There are a number of other profiles available that are not included here.</p> + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Profile</th> + <th scope="col">Color depths</th> + <th scope="col">Chroma subsampling</th> + </tr> + </thead> + <tbody> + <tr> + <td>Main</td> + <td>8</td> + <td>4:2:0</td> + </tr> + <tr> + <td>Main 10</td> + <td>8 to 10</td> + <td>4:2:0</td> + </tr> + <tr> + <td>Main 12</td> + <td>8 to 12</td> + <td>4:0:0 and 4:2:0</td> + </tr> + <tr> + <td>Main 4:2:2 10</td> + <td>8 to 10</td> + <td>4:0:0, 4:2:0, and 4:2:2</td> + </tr> + <tr> + <td>Main 4:2:2 12</td> + <td>8 to 12</td> + <td>4:0:0, 4:2:0, and 4:2:2</td> + </tr> + <tr> + <td>Main 4:4:4</td> + <td>8</td> + <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td> + </tr> + <tr> + <td>Main 4:4:4 10</td> + <td>8 to 10</td> + <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td> + </tr> + <tr> + <td>Main 4:4:4 12</td> + <td>8 to 12</td> + <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td> + </tr> + <tr> + <td>Main 4:4:4 16 Intra</td> + <td>8 to 16</td> + <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">HDR support</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Variable Frame Rate (VFR) support</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">HEVC / H.265 support</th> + <td>No</td> + <td>18<sup><a href="#hevc-foot--1">[1]</a></sup></td> + <td>No<sup><a href="#hevc-foot-2">[2]</a></sup></td> + <td>11<sup><a href="#hevc-foot--1">[1]</a></sup></td> + <td>No</td> + <td>11</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Container support</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Supporting/Maintaining organization</th> + <td><a href="https://www.itu.net/">ITU</a> / <a href="https://mpeg.chiariglione.org/">MPEG</a></td> + </tr> + <tr> + <th scope="row">Specifications</th> + <td><a href="http://www.itu.int/rec/T-REC-H.265">http://www.itu.int/rec/T-REC-H.265</a><br> + <a href="https://www.iso.org/standard/69668.html">https://www.iso.org/standard/69668.html</a></td> + </tr> + <tr> + <th scope="row">Licensing</th> + <td>Proprietary; confirm your compliance with the <a href="https://www.mpegla.com/programs/hevc/">licensing requirements</a>. Note that multiple patent pools may apply.</td> + </tr> + </tbody> +</table> + +<p><a id="hevc-foot--1" name="hevc-foot--1">[1]</a> Internet Explorer and Edge only supports HEVC on devices with a hardware codec.</p> + +<p><a id="hevc-foot-2" name="hevc-foot-2">[2]</a> Mozilla will not support HEVC while it is encumbered by patents.</p> + +<h3 id="MP4V-ES">MP4V-ES</h3> + +<p>The <strong>MPEG-4 Video Elemental Stream</strong> (<strong>MP4V-ES</strong>) format is part of the MPEG-4 Part 2 Visual standard. While in general, MPEG-4 part 2 video is not used by anyone because of its lack of compelling value related to other codecs, MP4V-ES does have some usage on mobile. MP4V is essentially H.263 encoding in an MPEG-4 container.</p> + +<p>Its primary purpose is to be used to stream MPEG-4 audio and video over an {{Glossary("RTP")}} session. However, MP4V-ES is also used to transmit MPEG-4 audio and video over a mobile connection using <a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>.</p> + +<p>You almost certainly don't want to use this format, since it isn't supported in a meaningful way by any major browsers, and is quite obsolete. Files of this type should have the extension <code>.mp4v</code>, but sometimes are inaccurately labeled <code>.mp4</code>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Supported bit rates</th> + <td>5 Kbps to 1 Gbps and more</td> + </tr> + <tr> + <th scope="row">Supported frame rates</th> + <td>No specific limit; restricted only by the data rate</td> + </tr> + <tr> + <th scope="row">Compression</th> + <td>Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-based algorithm</a></td> + </tr> + <tr> + <th scope="row">Supported frame sizes</th> + <td>Up to 4,096 x 4,096 pixels</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td>YCrCb with chroma subsampling (4:2:0, 4:2:2, and 4:4:4) supported; up to 12 bits per component</td> + </tr> + <tr> + <th scope="row">HDR support</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Variable Frame Rate (VFR) support</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">MP4V-ES support</th> + <td>No<sup><a href="#mp4ves-foot-2">[2]</a></sup></td> + <td>No</td> + <td>Yes<sup><a href="#mp4ves-foot-1">[1]</a></sup></td> + <td>No</td> + <td>No</td> + <td>No</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Container support</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Supporting/Maintaining organization</th> + <td><a href="https://mpeg.chiariglione.org/">MPEG</a></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td>{{RFC(6416)}}</td> + </tr> + <tr> + <th scope="row">Licensing</th> + <td>Proprietary; <a href="https://www.mpegla.com/programs/mpeg-4-visual/">obtain a license</a> through <a href="https://www.mpegla.com/">MPEG LA</a> and/or <a href="https://about.att.com/innovation/ip/patents/mpeg-4">AT&T</a> as needed</td> + </tr> + </tbody> +</table> + +<p><a id="mp4ves-foot-1" name="mp4ves-foot-1">[1]</a> Firefox supports MP4V-ES in <a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a> containers only.</p> + +<p><a name="mp4ves-foot-2">[2]</a> Chrome does not support MP4V-ES; however, Chrome OS does.</p> + +<h3 id="MPEG-1_Part_2_Video"><a id="MPEG-1" name="MPEG-1">MPEG-1</a> Part 2 Video</h3> + +<p><strong>MPEG-1 Part 2 Video</strong> was unveiled at the beginning of the 1990s. Unlike the later MPEG video standards, MPEG-1 was created solely by MPEG, without the {{Glossary("ITU", "ITU's")}} involvement.</p> + +<p>Because any MPEG-2 decoder can also play MPEG-1 video, it's compatible with a wide variety of software and hardware devices. There are no active patents remaining in relation to MPEG-1 video, so it may be used free of any licensing concerns. However, few web browsers support MPEG-1 video without the support of a plugin, and with plugin use deprecated in web browsers, these are generally no longer available. This makes MPEG-1 a poor choice for use in web sites and web applications.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Supported bit rates</th> + <td>Up to 1.5 Mbps</td> + </tr> + <tr> + <th scope="row">Supported frame rates</th> + <td>23.976 FPS, 24 FPS, 25 FPS, 29.97 FPS, 30 FPS, 50 FPS, 59.94 FPS, and 60 FPS</td> + </tr> + <tr> + <th scope="row">Compression</th> + <td>Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-based algorithm</a></td> + </tr> + <tr> + <th scope="row">Supported frame sizes</th> + <td>Up to 4,095 x 4,095 pixels</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td>Y'CbCr with 4:2:0 chroma subsampling with up to 12 bits per component</td> + </tr> + <tr> + <th scope="row">HDR support</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Variable Frame Rate (VFR) support</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">MPEG-1 support</th> + <td>No</td> + <td>No</td> + <td>No</td> + <td>No</td> + <td>No</td> + <td>Yes</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Container support</th> + <td>MPEG</td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Supporting/Maintaining organization</th> + <td><a href="https://mpeg.chiariglione.org/">MPEG</a></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a href="https://www.iso.org/standard/22411.html">https://www.iso.org/standard/22411.html</a></td> + </tr> + <tr> + <th scope="row">Licensing</th> + <td>Proprietary; however, all patents have expired, so MPEG-1 may be used freely</td> + </tr> + </tbody> +</table> + +<h3 id="MPEG-2_Part_2_Video"><a id="MPEG-2" name="MPEG-2">MPEG-2</a> Part 2 Video</h3> + +<p><span class="seoSummary"><strong><a href="https://en.wikipedia.org/wiki/H.262/MPEG-2_Part_2">MPEG-2 Part 2</a></strong> is the video format defined by the MPEG-2 specification, and is also occasionally referred to by its {{Glossary("ITU")}} designation, H.262.</span> It is very similar to MPEG-1 video—in fact, any MPEG-2 player can automatically handle MPEG-1 without any special work—except it has been expanded to support higher bit rates and enhanced encoding techniques.</p> + +<p>The goal was to allow MPEG-2 to compress standard definition television, so interlaced video is also supported. The standard definition compression rate and the quality of the resulting video met needs well enough that MPEG-2 is the primary video codec used for DVD video media.</p> + +<p>MPEG-2 has several profiles available with different capabilities. Each profile is then available four levels, each of which increases attributes of the video, such as frame rate, resolution, bit rate, and so forth. Most profiles use Y'CbCr with 4:2:0 chroma subsampling, but more advanced profiles support 4:2:2 as well. In addition, there are four levels, each of which offers support for larger frame dimensions and bit rates. For example, the {{interwiki("wikipedia", "ATSC standards", "ATSC")}} specification for television used in North America supports MPEG-2 video in high definition using the Main Profile at High Level, allowing 4:2:0 video at both 1920 x 1080 (30 FPS) and 1280 x 720 (60 FPS), at a maximum bit rate of 80 Mbps.</p> + +<p>However, few web browsers support MPEG-2 without the support of a plugin, and with plugin use deprecated in web browsers, these are generally no longer available. This makes MPEG-2 a poor choice for use in web sites and web applications.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Supported bit rates</th> + <td>Up to 100 Mbps; varies by level and profile</td> + </tr> + <tr> + <th scope="row">Supported frame rates</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">Abbr.</th> + <th scope="col">Level name</th> + <th scope="col">Frame rates supported</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">LL</th> + <td>Low Level</td> + <td>23.9, 24, 25, 29.97, 30</td> + </tr> + <tr> + <th scope="row">ML</th> + <td>Main Level</td> + <td>23.976, 24, 25, 29.97, 30</td> + </tr> + <tr> + <th scope="row">H-14</th> + <td>High 1440</td> + <td>23.976, 24, 26, 29.97, 30, 50, 59.94, 60</td> + </tr> + <tr> + <th scope="row">HL</th> + <td>High Level</td> + <td>23.976, 24, 26, 29.97, 30, 50, 59.94, 60</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Compression</th> + <td>Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-based algorithm</a></td> + </tr> + <tr> + <th scope="row">Supported frame sizes</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Abbr.</th> + <th scope="col">Level name</th> + <th scope="col">Maximum frame size</th> + </tr> + <tr> + <th scope="row">LL</th> + <td>Low Level</td> + <td>352 x 288 pixels</td> + </tr> + <tr> + <th scope="row">ML</th> + <td>Main Level</td> + <td>720 x 576 pixels</td> + </tr> + <tr> + <th scope="row">H-14</th> + <td>High 1440</td> + <td>1440 x 1152 pixels</td> + </tr> + <tr> + <th scope="row">HL</th> + <td>High Level</td> + <td>1920 x 1152 pixels</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td>Y'CbCr with 4:2:0 chroma subsampling in most profiles; the "High" and "4:2:2" profiles support 4:2:2 chroma subsampling as well.</td> + </tr> + <tr> + <th scope="row">HDR support</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Variable Frame Rate (VFR) support</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">MPEG-2 support</th> + <td>No</td> + <td>No</td> + <td>No</td> + <td>No</td> + <td>No</td> + <td>Yes</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Container support</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MPEGMPEG-2">MPEG</a>, MPEG-TS (MPEG Transport Stream), <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Supporting/Maintaining organization</th> + <td><a href="https://mpeg.chiariglione.org/">MPEG</a> / <a href="https://www.itu.int/">ITU</a></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a href="https://www.itu.int/rec/T-REC-H.262">https://www.itu.int/rec/T-REC-H.262</a><br> + <a href="https://www.iso.org/standard/61152.html">https://www.iso.org/standard/61152.html</a></td> + </tr> + <tr> + <th scope="row">Licensing</th> + <td>Proprietary; all patents have expired worldwide with the exception of in Malaysia and the Philippines as of April 1, 2019, so MPEG-2 can be used freely outside those two countries. Patents are licensed by <a href="https://www.mpegla.com/programs/mpeg-2/">MPEG LA</a>.</td> + </tr> + </tbody> +</table> + +<h3 id="Theora">Theora</h3> + +<p><strong>{{interwiki("wikipedia", "Theora")}}</strong>, developed by <a href="https://xiph.org/">Xiph.org</a>, is an open and free video codec which may be used without royalties or licensing. Theora is comparable in quality and compression rates to MPEG-4 Part 2 Visual and AVC, making it a very good if not top-of-the-line choice for video encoding. But its status as being free from any licensing concerns and its relatively low CPU resource requirements make it a popular choice for many software and web projects. The low CPU impact is particularly useful since there are no hardware decoders available for Theora.</p> + +<p>Theora was originally based upon the VC3 codec by On2 Technologies. The codec and its specification were released under the LGPL license and entrusted to Xiph.org, which then developed it into the Theora standard.</p> + +<p>One drawback to Theora is that it only supports 8 bits per color component, with no option to use 10 or more in order to avoid color banding. That said, 8 bits per component is still the most commonly-used color format in use today, so this is only a minor inconvenience in most cases. Also, Theora can only be used in an Ogg container. The biggest drawback of all, however, is that it is not supported by Safari, leaving Theora unavailable not only on macOS but on all those millions and millions of iPhones and iPads.</p> + +<p>The <a href="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a> offers additional details about Theora as well as the Ogg container format it is used within.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Supported bit rates</th> + <td>Up to 2 Gbps</td> + </tr> + <tr> + <th scope="row">Supported frame rates</th> + <td>Arbitrary; any non-zero value is supported. The frame rate is specified as a 32-bit numerator and a 32-bit denominator, to allow for non-integer frame rates.</td> + </tr> + <tr> + <th scope="row">Compression</th> + <td>Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-based algorithm</a></td> + </tr> + <tr> + <th scope="row">Supported frame sizes</th> + <td>Any combination of width and height up to 1,048,560 x 1,048,560 pixels</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td>Y'CbCr with 4:2:0, 4:2:2, and 4:4:4 chroma subsampling at 8 bits per component</td> + </tr> + <tr> + <th scope="row">HDR support</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Variable Frame Rate (VFR) support</th> + <td>Yes<sup><a href="#theora-foot-1">[1]</a></sup></td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">Theora support</th> + <td>3</td> + <td>Yes<sup><a href="#theora-foot-2">[2]</a></sup></td> + <td>3.5</td> + <td>No</td> + <td>10.5</td> + <td>No</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Container support</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Supporting/Maintaining organization</th> + <td><a href="https://www.xiph.org/">Xiph.org</a></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a href="https://www.theora.org/doc/">https://www.theora.org/doc/</a></td> + </tr> + <tr> + <th scope="row">Licensing</th> + <td>Open and free of royalties and any other licensing requirements</td> + </tr> + </tbody> +</table> + +<p><a id="theora-foot-1" name="theora-foot-1">[1]</a> While Theora doesn't support Variable Frame Rate (VFR) within a single stream, multiple streams can be chained together within a single file, and each of those can have its own frame rate, thus allowing what is essentially VFR. However, this is impractical if the frame rate needs to change frequently.</p> + +<p><a name="theora-foot-2">[2]</a> Edge supports Theora with the optional <a href="https://www.microsoft.com/en-us/p/web-media-extensions/9n5tdp8vcmhs?activetab=pivot:overviewtab">Web Media Extensions</a> add-on.</p> + +<h3 id="VP8">VP8</h3> + +<p>The <strong>Video Processor 8</strong> (<strong>VP8</strong>) codec was initially created by On2 Technologies. Following their purchase of On2, Google released VP8 as an open and royalty-free video format under a promise not to enforce the relevant patents. In terms of quality and compression rate, VP8 is comparable to {{anch("AVC")}}.</p> + +<p>If supported by the browser, VP8 allows video with an alpha channel, allowing the video to play with the background able to be seen through the video to a degree specified by each pixel's alpha component.</p> + +<p>There is good browser support for VP8 in HTML content, especially within <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a> files. This makes VP8 a good candidate for your content, although VP9 is an even better choice if available to you. Web browsers are <em>required</em> to support VP8 for WebRTC, but not all browsers that do so also support it in HTML audio and video elements.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Supported bit rates</th> + <td>Arbitrary; no maximum unless level-based limitations are enforced</td> + </tr> + <tr> + <th scope="row">Supported frame rates</th> + <td>Arbitrary</td> + </tr> + <tr> + <th scope="row">Compression</th> + <td>Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-based algorithm</a></td> + </tr> + <tr> + <th scope="row">Supported frame sizes</th> + <td>Up to 16,384 x 16,384 pixels</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td>Y'CbCr with 4:2:0 chroma subsampling at 8 bits per component</td> + </tr> + <tr> + <th scope="row">HDR support</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Variable Frame Rate (VFR) support</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">VP8 support</th> + <td>25</td> + <td>14<sup><a href="#vp8-foot-1">[1]</a></sup></td> + <td>4</td> + <td>9</td> + <td>16</td> + <td>12.1<sup><a href="#vp8-foot-2">[2]</a></sup></td> + </tr> + <tr> + <th scope="row">MSE compatibility</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#vp8-foot-3">3</a></sup></td> + <td></td> + <td></td> + <td></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Container support</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible</th> + <td>Yes; VP8 is one of the spec-required codecs for WebRTC</td> + </tr> + <tr> + <th scope="row">Supporting/Maintaining organization</th> + <td><a href="https://www.google.com/">Google</a></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td>{{RFC(6386)}}</td> + </tr> + <tr> + <th scope="row">Licensing</th> + <td>Open and free of royalties and any other licensing requirements</td> + </tr> + </tbody> +</table> + +<p><a name="vp8-foot-1">[1]</a> Edge support for VP8 requires the use of <a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions</a>.</p> + +<p><a id="vp8-foot-2" name="vp8-foot-2">[2]</a> Safari only supports VP8 in WebRTC connections.</p> + +<p><a id="vp8-foot-3" name="vp8-foot-3">[3]</a> Firefox only supports VP8 in MSE when no H.264 hardware decoder is available. Use {{domxref("MediaSource.isTypeSupported()")}} to check for availability.</p> + +<h3 id="VP9">VP9</h3> + +<p><strong>Video Processor 9</strong> (<strong>VP9</strong>) is the successor to the older VP8 standard developed by Google. Like VP8, VP9 is entirely open and royalty-free. Its encoding and decoding performance is comparable to or slightly faster than that of AVC, but with better quality. VP9's encoded video quality is comparable to that of HEVC at similar bit rates.</p> + +<p>VP9's main profile supports only 8-bit color depth at 4:2:0 chroma subsampling levels, but its profiles include support for deeper color and the full range of chroma subsampling modes. It supports several HDR imiplementations, and offers substantial freedom in selecting frame rates, aspect ratios, and frame sizes.</p> + +<p>VP9 is widely supported by browsers, and hardware implementations of the codec are fairly common. VP9 is one of the two video codecs mandated by <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a> (the other being {{anch("VP8")}}). Of note, however, is that Safari supports neither WebM nor VP9, so if you choose to use VP9, be sure to offer a fallback format such as AVC or HEVC for iPhone, iPad, and Mac users.</p> + +<p>Aside from the lack of Safari support, VP9 is a good choice if you are able to use a WebM container and are able to provide a fallback video in a format such as AVC or HEVC for Safari users. This is especially true if you wish to use an open codec rather than a proprietary one. If you can't provide a fallback and aren't willing to sacrifice Safari compatibility, VP9 in WebM is a good option. Otherwise, you should probably consider a different codec.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Supported bit rates</th> + <td>Arbitrary; no maximum unless level-based limitations are enforced</td> + </tr> + <tr> + <th scope="row">Supported frame rates</th> + <td>Arbitrary</td> + </tr> + <tr> + <th scope="row">Compression</th> + <td>Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-based algorithm</a></td> + </tr> + <tr> + <th scope="row">Supported frame sizes</th> + <td>Up to 65,536 x 65,536 pixels</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">Profile</th> + <th scope="col">Color depths</th> + <th scope="col">Chroma subsampling</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Profile 0</th> + <td>8</td> + <td>4:2:0</td> + </tr> + <tr> + <th scope="row">Profile 1</th> + <td>8</td> + <td>4:2:0, 4:2:2, and 4:4:4</td> + </tr> + <tr> + <th scope="row">Profile 2</th> + <td>10 to 12</td> + <td>4:2:0</td> + </tr> + <tr> + <th scope="row">Profile 3</th> + <td>10 to 12</td> + <td>4:2:0, 4:2:2, and f:4:4</td> + </tr> + </tbody> + </table> + + <p>Color spaces supported: {{interwiki("wikipedia", "Rec. 601")}}, {{interwiki("wikipedia", "Rec. 709")}}, {{interwiki("wikipedia", "Rec. 2020")}}, {{interwiki("wikipedia", "SMPTE C")}}, SMPTE-240M (obsolete; replaced by Rec. 709), and {{interwiki("wikipedia", "sRGB")}}.</p> + </td> + </tr> + <tr> + <th scope="row">HDR support</th> + <td>Yes; HDR10+, <a href="https://en.wikipedia.org/wiki/Hybrid_Log-Gamma">HLG</a>, and <a href="https://en.wikipedia.org/wiki/Perceptual_Quantizer">PQ</a></td> + </tr> + <tr> + <th scope="row">Variable Frame Rate (VFR) support</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">VP9 support</th> + <td>29</td> + <td>14</td> + <td>28</td> + <td>No</td> + <td>10.6</td> + <td>No</td> + </tr> + <tr> + <th scope="row">MSE compatibility</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#vp9-foot-1">1</a></sup></td> + <td></td> + <td></td> + <td></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Container support</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Supporting/Maintaining organization</th> + <td><a href="https://www.google.com/">Google</a></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a href="https://www.webmproject.org/vp9/">https://www.webmproject.org/vp9/</a></td> + </tr> + <tr> + <th scope="row">Licensing</th> + <td>Open and free of royalties and any other licensing requirements</td> + </tr> + </tbody> +</table> + +<p><a id="vp9-foot-1" name="vp9-foot-1">[1]</a> Firefox only supports VP8 in MSE when no H.264 hardware decoder is available. Use {{domxref("MediaSource.isTypeSupported()")}} to check for availability.</p> + +<h2 id="Choosing_a_video_codec">Choosing a video codec</h2> + +<p>The decision as to which codec or codecs to use begins with a series of questions to prepare yourself:</p> + +<ul> + <li>Do you wish to use an open format, or are proprietary formats also to be considered?</li> + <li>Do you have the resources to produce more than one format for each of your videos? The ability to provide a fallback option vastly simplifies the decision-making process.</li> + <li>Are there any browsers you're willing to sacrifice compatibility with?</li> + <li>How old is the oldest version of web browser you need to support? For example, do you need to work on every browser shipped in the past five yeras, or just the past one year?</li> +</ul> + +<p>In the sections below, we offer recommended codec selections for specific use cases. For each use case, you'll find up to two reccommendations. If the codec which is considered best for the use case is proprietary or may require royalty payments, then two options are provided: first, an open and royalty-free option, followed by the proprietary one.</p> + +<p>If you are only able to offer a single version of each video, you can choose the format that's most appropriate for your needs.The first one is recommended as being a good combnination of quality, performance, and compatibility. The second option will be the most broadly compatible choice, at the expense of some amount of quality, preformance, and/or size.</p> + +<h3 id="Recommendations_for_everyday_videos">Recommendations for everyday videos</h3> + +<p>First, let's look at the best options for videos presented on a typical web site such as a blog, informational site, small business web site where videos are used to demonstrate products (but not where the videos themselves are a product), and so forth.</p> + +<ol> + <li> + <p>A <strong><a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></strong> container using the <strong>{{anch("VP8")}}</strong> codec for video and the <strong><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Opus">Opus</a></strong> codec for audio. These are all open, royalty-free formats which are generally well-supported, although only in quite recent browsers, which is why a fallback is a good idea.</p> + + <pre class="brush: js"><video controls src="filename.webm"></video> +</pre> + </li> + <li> + <p>An <strong><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></strong> container and the <strong>{{anch("AVC")}}</strong> (<strong>H.264</strong>) video codec, ideally with <strong><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#AAC">AAC</a></strong> as your audio codec. This is because the MP4 container with AVC and AAC codecs within is a broadly-supported combination—by every major browser, in fact—and the quality is typically good for most use cases. Make sure you verify your compliance with the license requirements, however.</p> + + <pre class="brush: html"><video controls> + <source type="video/webm" + src="filename.webm"> + <source type="video/mp4" + src="filename.mp4"> +</video> +</pre> + </li> +</ol> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Keep in mind that the {{HTMLElement("<video>")}} element requires a closing <code></video></code> tag, whether or not you have any {{HTMLElement("source")}} elements inside it.</p> +</div> + +<h3 id="Recommendations_for_high-quality_video_presentation">Recommendations for high-quality video presentation</h3> + +<p>If your mission is to present video at the highest possible quality, you will probably benefit from offering as many formats as possible, as the codecs capable of the best quality tend also to be the newest, and thus the most likely to have gaps in browser compatibility.</p> + +<ol> + <li> + <p>A WebM container using AV1 for video and Opus for audio. If you're able to use the High or Professional profile when encoding AV1, at a high level like 6.3, you can get very high bit rates at 4K or 8K resolution, while maintaining excellent video quality. Encoding your audio using Opus's Fullband profile at a 48 kHz sample rate maximizes the audio bandwidth captured, capturing nearly the entire frequency range that's within human hearing.</p> + + <pre class="brush: js"><video controls src="filename.webm"></video> +</pre> + </li> + <li> + <p>An MP4 container using the {{anch("HEVC")}} codec using one of the advanced Main profiles, such as Main 4:2:2 with 10 or 12 bits of color depth, or even the Main 4:4:4 profile at up to 16 bits per component. At a high bit rate, this provides excellent graphics quality with remarkable color reproduction. In addition, you can optionally include HDR metadata to provide high dynamic range video. For audio, use the AAC codec at a high sample rate (at least 48 kHz but ideally 96kHz) and encoded with complex encoding rather than fast encoding.</p> + + <pre class="brush: html"><video controls> + <source type="video/webm" + src="filename.webm"> + <source type="video/mp4" + src="filename.mp4"> +</video> +</pre> + </li> +</ol> + +<h3 id="Recommendations_for_archival_editing_or_remixing">Recommendations for archival, editing, or remixing</h3> + +<p>There are not currently any lossless—or even near-lossless—video codecs generally available in web browsers. The reason for this is simple: video is huge. Lossless compression is by definition less effective than lossy compression. For example, uncompressed 1080p video (1920 by 1080 pixels) with 4:2:0 chroma subsampling needs at least 1.5 Gbps. Using lossless compression such as FFV1 (which is not supported by web browsers) could perhaps reduce that to somewhere around 600 Mbps, depending on the content. That's still a huge number of bits to pump through a connection every second, and is not currently practical for any real-world use.</p> + +<p>This is the case even though some of the lossy codecs have a lossless mode available; the lossless modes are not implemented in any current web browsers. The best you can do is to select a high-quality codec that uses lossy compression and configure it to perform as little compression as possible. One way to do this is to configure the codec to use "fast" compression, which inherently means less compression is achieved.</p> + +<h4 id="Preparing_video_externally">Preparing video externally</h4> + +<p>To prepare video for archival purposes from outside your web site or app, use a utility that performs compression on the original uncompressed video data. For example, the free <a href="https://www.videolan.org/developers/x264.html">x264</a> utility can be used to encode video in {{anch("AVC")}} format using a very high bit rate:</p> + +<pre>x264 --crf 18 -preset ultrafast --output <em>outfilename.mp4</em> <em>infile</em></pre> + +<p>While other codecs may have better best-case quality levels when compressing the video by a significant margin, their encoders tend to be slow enough that the nearly-lossless encoding you get with this compression is vastly faster at about the same overall quality level.</p> + +<h4 id="Recording_video">Recording video</h4> + +<p>Given the constraints on how close to lossless you can get, you might consider using {{anch("AVC")}} or {{anch("AV1")}}. For example, if you're using the <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> to record video, you might use code like the following when creating your {{domxref("MediaRecorder")}} object:</p> + +<pre class="brush: 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);</pre> + +<p>This example creates a <code>MediaRecorder</code> configured to record {{anch("AV1")}} video using BT.2100 HDR in 12-bit color with 4:4:4 chroma subsampling and <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#FLAC">FLAC</a> for lossless audio. The resulting file will use a bit rate of no more than 800 Mbps shared between the video and audio tracks. You will likely need to adjust these values depending on hardware performance, your requirements, and the specific codecs you choose to use. This bit rate is obviously not realistic for network transmission and would likely only be used locally.</p> + +<p>Breaking down the value of the <code>codecs</code> parameter into its dot-delineated properties, we see the following:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Value</th> + <th scope="col">Desccription</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>av01</code></td> + <td>The four-character code (4CC) designation identifying the {{anch("AV1")}} codec.</td> + </tr> + <tr> + <td><code>2</code></td> + <td>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.</td> + </tr> + <tr> + <td><code>19H</code></td> + <td>The level and tier. This value comes from the table in section <a href="https://aomediacodec.github.io/av1-spec/#levels">A.3</a> of the AV1 specification, and indicates the high tier of Level 6.3.</td> + </tr> + <tr> + <td><code>12</code></td> + <td>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.</td> + </tr> + <tr> + <td><code>0</code></td> + <td>The monochrome mode flag. If 1, then no chroma planes would be recorded, and all data should be structly luma data, resulting in a greyscale image. We've specified 0 because we want color.</td> + </tr> + <tr> + <td><code>000</code></td> + <td>The chroma subsampling mode, taken from <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">section 6.4.2</a> 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.</td> + </tr> + <tr> + <td><code>09</code></td> + <td>The color primaries to use. This value comes from <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">section 6.4.2</a> in the AV1 specification; 9 indicates that we want to use BT.2020 color, which is used for HDR.</td> + </tr> + <tr> + <td><code>16</code></td> + <td>The transfer characteristics to use. This comes from <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">section 6.4.2</a> as well; 16 indicates that we want to use the characteristics for BT.2100 PQ color.</td> + </tr> + <tr> + <td><code>09</code></td> + <td>The matrix coefficents to use, from the <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">section 6.4.2</a> again. A value of 9 specifies that we want to use BT.2020 with variable luminance; this is also known as BT.2010 YbCbCr.</td> + </tr> + <tr> + <td><code>1</code></td> + <td>The video "full range" flag. A value of 1 indicates that we want the full color range to be used.</td> + </tr> + </tbody> +</table> + +<p>The documentation for your codec choices will probably offer information you'll use when constructing your <code>codecs</code> parameter.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Web audio codec guide</a></li> + <li><a href="/en-US/docs/Web/Media/Formats/Containers">Media container formats (file types)</a></li> + <li><a href="/en-US/docs/Web/Media/Formats/Support_issues">Handling media support issues in web content</a></li> + <li><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></li> + <li>{{RFC(6381)}}: The "Codecs" and "Profiles" parameters for "Bucket" media types</li> + <li>{{RFC(5334)}}: Ogg Media Types</li> + <li>{{RFC(3839)}}: MIME Type Registrations for 3GPP Multimedia Files</li> + <li>{{RFC(4381)}}: MIME Type Registrations for 3GPP2 Multimedia Files</li> + <li>{{RFC(4337)}}: MIME Type Registrations for MPEG-4</li> + <li><a href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video</a> and <a href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">audio</a> codecs in Internet Explorer</li> + <li><a href="http://www.chromium.org/audio-video">Video and audio codecs in Chrome</a></li> +</ul> |