diff options
author | A1lo <yin199909@aliyun.com> | 2022-03-18 21:53:46 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-18 21:53:46 +0800 |
commit | 8824afb494e5398bc0efcf5f7eb78782096fc90c (patch) | |
tree | 92fd44c01908cc7b39da131bcac6a0cae024bb6f /files/zh-cn/web/media/formats | |
parent | e48f0a637c058b51a6268e0c2c384957e03d2b60 (diff) | |
download | translated-content-8824afb494e5398bc0efcf5f7eb78782096fc90c.tar.gz translated-content-8824afb494e5398bc0efcf5f7eb78782096fc90c.tar.bz2 translated-content-8824afb494e5398bc0efcf5f7eb78782096fc90c.zip |
Replace marco `anch` with `<a>` tag for `zh-CN` (#4668)
* replace anch with tag `<a>`
* auto replace anch with scripts
* fix: resolve some incorrect anchors
* replace anch with markdown link in markdown files
* sync with english version for `Properties`
* fix: resolve some incorrect anchors
* using `Specifications` marco to replace `<table>`
* fix: resolve some incorrect anchors
* remove the `noteCard` and add a `h2` head
* fix: resolve some incorrect anchors
* remove the duplicated content
* fix: resolve some incorrect anchors
* fix: resolve some incorrect anchors
* revert the content change and replace anch
* revert the content change and replace anch
* revert the content chang
* fix: correct the `href`
* revert content changes and replace the anch
* fix: resolve some incorrect anchors
* fix: resolve some incorrect anchors
* fix: resolve some incorrect anchors
Diffstat (limited to 'files/zh-cn/web/media/formats')
-rw-r--r-- | files/zh-cn/web/media/formats/containers/index.html | 16 | ||||
-rw-r--r-- | files/zh-cn/web/media/formats/image_types/index.html | 44 | ||||
-rw-r--r-- | files/zh-cn/web/media/formats/video_codecs/index.html | 34 |
3 files changed, 47 insertions, 47 deletions
diff --git a/files/zh-cn/web/media/formats/containers/index.html b/files/zh-cn/web/media/formats/containers/index.html index 0821e05a3d..5e0a5cd9b2 100644 --- a/files/zh-cn/web/media/formats/containers/index.html +++ b/files/zh-cn/web/media/formats/containers/index.html @@ -29,42 +29,42 @@ translation_of: Web/Media/Formats/Containers </thead> <tbody> <tr> - <th scope="row">{{anch("3GP")}}</th> + <th scope="row"><a href="#3gp">3GP</a></th> <td>Third Generation Partnership</td> <td>Firefox for Android</td> </tr> <tr> - <th scope="row">{{anch("ADTS")}}</th> + <th scope="row"><a href="#adts">ADTS</a></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> + <th scope="row"><a href="#flac">FLAC</a></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> + <th scope="row"><a href="#mpegmpeg-2">MPEG / MPEG-2</a></th> <td>Moving Picture Experts Group (1 and 2)</td> <td>—</td> </tr> <tr> - <th scope="row">{{anch("MP4", "MPEG-4 (MP4)")}}</th> + <th scope="row"><a href="#mpeg-4_mp4">MPEG-4 (MP4)</a></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> + <th scope="row"><a href="#ogg">Ogg</a></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> + <th scope="row"><a href="#quicktime">QuickTime (MOV)</a></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> + <th scope="row"><a href="#webm">WebM</a></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> diff --git a/files/zh-cn/web/media/formats/image_types/index.html b/files/zh-cn/web/media/formats/image_types/index.html index 29b8a69cb3..5abcecd58a 100644 --- a/files/zh-cn/web/media/formats/image_types/index.html +++ b/files/zh-cn/web/media/formats/image_types/index.html @@ -33,7 +33,7 @@ translation_of: Web/Media/Formats/Image_types </thead> <tbody> <tr> - <th scope="row">{{anch("APNG")}}</th> + <th scope="row"><a href="#apng_animated_portable_network_graphics">APNG</a></th> <th scope="row">Animated Portable Network Graphics<br> <strong>动态便携式网络图像</strong></th> <td><code>image/apng</code></td> @@ -41,7 +41,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("AVIF")}}</th> + <th scope="row"><a href="#avif">AVIF</a></th> <th scope="row">AV1 Image File Format<br> AV1 图像文件格式</th> <td><code>image/</code>avif</td> @@ -49,7 +49,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Opera, Firefox (feature flag)</td> </tr> <tr> - <th scope="row">{{anch("BMP")}}</th> + <th scope="row"><a href="#bmp_bitmap_file">BMP</a></th> <th scope="row">Bitmap file<br> <strong>位图</strong>文件</th> <td><code>image/bmp</code></td> @@ -57,7 +57,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("GIF")}}</th> + <th scope="row"><a href="#gif_graphics_interchange_format">GIF</a></th> <th scope="row">Graphics Interchange Format<br> 图像互换格式</th> <td><code>image/gif</code></td> @@ -65,7 +65,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("ICO")}}</th> + <th scope="row"><a href="#ico_microsoft_windows_icon">ICO</a></th> <th scope="row">Microsoft Icon<br> 微软图标</th> <td><code>image/x-icon</code></td> @@ -73,7 +73,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("JPEG")}}</th> + <th scope="row"><a href="#jpeg_joint_photographic_experts_group_image">JPEG</a></th> <th scope="row">Joint Photographic Expert Group image<br> 联合影像专家小组图像</th> <td><code>image/jpeg</code></td> @@ -81,7 +81,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("PNG")}}</th> + <th scope="row"><a href="#png_portable_network_graphics">PNG</a></th> <th scope="row">Portable Network Graphics<br> <strong>便携式网络图像</strong></th> <td><code>image/png</code></td> @@ -89,7 +89,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("SVG")}}</th> + <th scope="row"><a href="#svg_scalable_vector_graphics">SVG</a></th> <th scope="row">Scalable Vector Graphics<br> <strong>可缩放矢量图形</strong></th> <td><code>image/svg+xml</code></td> @@ -97,7 +97,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("TIFF")}}</th> + <th scope="row"><a href="#tiff_tagged_image_file_format">TIFF</a></th> <th scope="row">Tagged Image File Format<br> 标签图像文件格式</th> <td><code>image/tiff</code></td> @@ -105,7 +105,7 @@ translation_of: Web/Media/Formats/Image_types <td>Safari</td> </tr> <tr> - <th scope="row">{{anch("WebP")}}</th> + <th scope="row"><a href="#webp_image">WebP</a></th> <th scope="row">Web Picture format<br> 万维网图像格式</th> <td><code>image/webp</code></td> @@ -126,7 +126,7 @@ translation_of: Web/Media/Formats/Image_types <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 a file format first introduced by Mozilla which extends the <a href="#png_portable_network_graphics">PNG</a> 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> @@ -216,7 +216,7 @@ translation_of: Web/Media/Formats/Image_types <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> +<p>Theoretically, several compression algorithms are supported, and the image data can also be stored in <a href="#jpeg_joint_photographic_experts_group_image">JPEG</a> or <a href="#png_portable_network_graphics">PNG</a> format within the BMP file.</p> <table class="standard-table"> <tbody> @@ -294,7 +294,7 @@ translation_of: Web/Media/Formats/Image_types <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>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 <a href="#xbm_x_window_system_bitmap_file">XBM</a>.</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> @@ -306,7 +306,7 @@ translation_of: Web/Media/Formats/Image_types <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> +<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 <a href="#png_portable_network_graphics">PNG</a> for lossless <em>and</em> indexed still images, and should consider using <a href="#apng_animated_portable_network_graphics">APNG</a> for lossless animation sequences.</p> <table class="standard-table"> <tbody> @@ -387,7 +387,7 @@ translation_of: Web/Media/Formats/Image_types <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> +<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 <a href="#bmp_bitmap_file">BMP</a> image without the file header, or a complete <a href="#png_portable_network_graphics">PNG</a> 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> @@ -584,7 +584,7 @@ translation_of: Web/Media/Formats/Image_types <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>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 <a href="#gif_graphics_interchange_format">GIF</a>, 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> @@ -960,7 +960,7 @@ translation_of: Web/Media/Formats/Image_types <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> +<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 <a href="#jpeg_joint_photographic_experts_group_image">JPEG</a> or <a href="#png_portable_network_graphics">PNG</a> 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> @@ -1142,7 +1142,7 @@ static unsigned char square8_bits[] = { <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> +<p>Photographs typically fare well with lossy compression (depending on the encoder's configuration). This makes <a href="#jpeg_joint_photographic_experts_group_image">JPEG</a> and <a href="#webp_image">WebP</a> 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 <a href="#提供后备图像">using a fallback</a> 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> @@ -1161,9 +1161,9 @@ static unsigned char square8_bits[] = { <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>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 <a href="#提供后备图像">fallback</a>. 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> +<p>If the icon can be represented using vector graphics, consider <a href="#svg_scalable_vector_graphics">SVG</a>, 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> @@ -1210,8 +1210,8 @@ static unsigned char square8_bits[] = { <th scope="col">Fallback</th> </tr> <tr> - <td>{{anch("SVG")}}</td> - <td>{{anch("PNG")}}</td> + <td><a href="#svg_scalable_vector_graphics">SVG</a></td> + <td><a href="#png_portable_network_graphics">PNG</a></td> </tr> </thead> </table> diff --git a/files/zh-cn/web/media/formats/video_codecs/index.html b/files/zh-cn/web/media/formats/video_codecs/index.html index b520cca7b6..4c659e89e7 100644 --- a/files/zh-cn/web/media/formats/video_codecs/index.html +++ b/files/zh-cn/web/media/formats/video_codecs/index.html @@ -55,17 +55,17 @@ original_slug: Web/Media/Formats/视频编解码器 <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td> </tr> <tr> - <th scope="row">{{anch("MP4V-ES")}}</th> + <th scope="row"><a href="#mp4v-es">MP4V-ES</a></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> + <th scope="row"><a href="#mpeg-1_part_2_video">MPEG-1</a></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> + <th scope="row"><a href="#mpeg-2_part_2_video">MPEG-2</a></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> @@ -116,7 +116,7 @@ original_slug: Web/Media/Formats/视频编解码器 </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>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 <a href="#reduced_frame_rate">Frame rate</a> 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> @@ -235,7 +235,7 @@ original_slug: Web/Media/Formats/视频编解码器 <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>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 <a href="#mosquito_noise">mosquito noise</a>, 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> @@ -257,7 +257,7 @@ original_slug: Web/Media/Formats/视频编解码器 <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><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 <a href="#ringing">ringing</a>.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/16687/mosquito-effect-sm.png" style="height: 393px; width: 400px;"></p> @@ -316,7 +316,7 @@ original_slug: Web/Media/Formats/视频编解码器 <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>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 <a href="#vp9">VP9</a> and <a href="#hevc_h.265">H.265/HEVC</a>, 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> @@ -689,7 +689,7 @@ original_slug: Web/Media/Formats/视频编解码器 <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>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 <a href="#avc_h.264">AVC</a> 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> @@ -1268,7 +1268,7 @@ original_slug: Web/Media/Formats/视频编解码器 <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>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 <a href="#avc_h.264">AVC</a>.</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> @@ -1375,7 +1375,7 @@ original_slug: Web/Media/Formats/视频编解码器 <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>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 <a href="#vp8">VP8</a>). 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> @@ -1525,13 +1525,13 @@ original_slug: Web/Media/Formats/视频编解码器 <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> + <p>A <strong><a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></strong> container using the <strong><a href="#vp8">VP8</a></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> + <p>An <strong><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></strong> container and the <strong><a href="#avc_h.264">AVC</a></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" @@ -1559,7 +1559,7 @@ original_slug: Web/Media/Formats/视频编解码器 </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> + <p>An MP4 container using the <a href="#hevc_h.265">HEVC</a> 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" @@ -1579,7 +1579,7 @@ original_slug: Web/Media/Formats/视频编解码器 <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> +<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 <a href="#avc_h.264">AVC</a> format using a very high bit rate:</p> <pre>x264 --crf 18 -preset ultrafast --output <em>outfilename.mp4</em> <em>infile</em></pre> @@ -1587,7 +1587,7 @@ original_slug: Web/Media/Formats/视频编解码器 <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> +<p>Given the constraints on how close to lossless you can get, you might consider using <a href="#avc_h.264">AVC</a> or <a href="#av1">AV1</a>. 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; @@ -1599,7 +1599,7 @@ const options = { 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>This example creates a <code>MediaRecorder</code> configured to record <a href="#av1">AV1</a> 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> @@ -1613,7 +1613,7 @@ let recorder = new MediaRecorder(sourceStream, options);</pre> <tbody> <tr> <td><code>av01</code></td> - <td>The four-character code (4CC) designation identifying the {{anch("AV1")}} codec.</td> + <td>The four-character code (4CC) designation identifying the <a href="#av1">AV1</a> codec.</td> </tr> <tr> <td><code>2</code></td> |