Skip to content

Commit

Permalink
convert to markdown for some sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@yin1999
yin1999 committed Aug 10, 2022
1 parent 70cbf17 commit 187db3e
Show file tree
Hide file tree
Showing 9 changed files with 1,644 additions and 1,894 deletions.
2,246 changes: 1,068 additions & 1,178 deletions files/zh-tw/web/media/formats/containers/index.md
View file

Large diffs are not rendered by default.

87 changes: 34 additions & 53 deletions files/zh-tw/web/media/formats/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,70 +19,51 @@ tags:
- formats
translation_of: Web/Media/Formats
---
<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</p>
{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}

<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>
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>This guide provides an overview of the media file types, {{Glossary("codec", "codecs")}}, and algorithms that may comprise media used on the web. 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>
This guide provides an overview of the media file types, {{Glossary("codec", "codecs")}}, and algorithms that may comprise media used on the web. 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.

<div class="row topicpage-table">
<div class="section">
<h2 id="References">References</h2>
## References

<h3 id="Images">Images</h3>
### Images

<dl>
<dt> <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>
- [Image file type and format guide](/zh-TW/docs/Web/Media/Formats/Image_types)
- : 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.
- [Image file types for web designers](/zh-TW/docs/Web/Media/Formats/Images_for_web_designers)
- : 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.

<h3 id="Media_file_types_and_codecs">Media file types and codecs</h3>
### Media file types and codecs

<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>
- [Media containers (file types)](/zh-TW/docs/Web/Media/Formats/Containers)
- : 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.
- [Web audio codec guide](/zh-TW/docs/Web/Media/Formats/Audio_codecs)
- : 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.
- [Web video codec guide](/zh-TW/docs/Web/Media/Formats/Video_codecs)
- : 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.
- [The "codecs" parameter in common media types](/zh-TW/docs/Web/Media/Formats/codecs_parameter)
- : When specifying the MIME type describing a media format, you can provide details using the `codecs` parameter as part of the type string. This guide describes the format and possible values of the `codecs` parameter for the common media types.
- [Codecs used by WebRTC](/zh-TW/docs/Web/Media/Formats/WebRTC_codecs)
- : [WebRTC](/zh-TW/docs/Web/API/WebRTC_API) 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.

<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>
## Guides

<div class="section">
<h2 id="Guides">Guides</h2>
### Concepts

<h3 id="Concepts">Concepts</h3>
- [Digital audio concepts](/zh-TW/docs/Web/Media/Formats/Audio_concepts)
- : 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.
- [Digital video concepts](/zh-TW/docs/Web/Media/Formats/Video_concepts)
- : 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.

<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>
### Tutorials and how-tos

<h3 id="Tutorials_and_how-tos">Tutorials and how-tos</h3>
- [Learning: Video and audio content](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
- : This tutorial introduces and details the use of media on the web.
- [Handling media support issues in web content](/zh-TW/docs/Web/Media/Formats/Support_issues)
- : 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.

<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>
## Other topics

<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>
- [Media Capabilities API](/zh-TW/docs/Web/API/Media_Capabilities_API)
- : 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.
87 changes: 35 additions & 52 deletions files/zh-tw/web/media/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,55 +8,38 @@ tags:
- 音效
translation_of: Web/Media
---
<p>這些年來，網頁來表達，創作及運用視訊及音訊以至其他媒介的能力不斷上升。今時今日存在了 大量可供運用的API及HTML元件，DOM介面，及其他不止於 發揮傳統效果，還能與其他網頁層面的技術產生協同效應和真實地令人深刻銘記 的特效。本文列出不同的APIs和連結其詳細資料的超連結，希望你能認為這些資訊能幫你盡快純熟這些技術。</p>

<div class="row topicpage-table">
<div class="section">
<h2 id="References">References</h2>

<h3 id="HTML">HTML</h3>

<p>這些文章包括HTML特效，供ＨＴＭＬ媒體開發者參考。</p>

<dl>
<dt>{{HTMLElement("audio")}}</dt>
<dd><code>&lt;audio&gt;</code> 元件，這是用來在網頁裡播放音效。此元件能 不被看見地運用來 作為一個 供更多其他繁雜的媒介放置的 位置。當然，也能放置一些可看見的控制器予用家來控制是否重播這些音訊。</dd>
<dt>{{HTMLElement("video")}}</dt>
<dd><code>&lt;video&gt;</code> 元件，這是一個為了視訊內容在網頁裡播放的端點(endpoint)．它能被簡單地只用作表現視訊，或者用作一個位置來放置即時視訊內容(streamed video).<code>&lt;video&gt;也能被用作一個途徑來連結媒介APIs和其他HTML及DOM技術,當中包括</code> {{HTMLElement("canvas")}} (這是作 frame grabbing(?) 和其管控).</dd>
</dl>

<h3 id="APIs">APIs</h3>

<dl>
<dt><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></dt>
<dd>這是一個參考資料，關於串流，記錄，管控媒體資料，無論是本地的，透過網路的。這些包括本地的攝錄機及來捕流視訊，音效或圖像的麥克風。</dd>
<dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></dt>
<dd>你可以藉由此API產出、篩選及操作即時的聲音或是預先錄製好的材料，然後將音效送至<code>&lt;audio&gt;</code>元件、影音串流或是儲存起來。</dd>
<dt><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a></dt>
<dd>WebRTC (網頁即時通訊)能夠即時地串流影音，也能夠透過網際網路將兩個人的訊息資料互相傳遞，而不需要任何媒介。</dd>
</dl>
</div>

<div class="section">
<h2 id="指南">指南</h2>

<dl>
<dt><a href="/en-US/docs/Web/Media/Overview">網頁傳播媒體的概述</a></dt>
<dd>支援影音撥放，操作與紀錄的網頁科技與API的概論。如果你不知道該使用哪一個API，請從這裡開始。</dd>
</dl>

<dl>
</dl>

<h2 id="Other_topics">Other topics</h2>

<p>Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.</p>

<dl>
<dt><a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a></dt>
<dd>The Canvas API lets you draw into an {{HTMLElement("canvas")}}, manipulating and changing the contents of an image. This can be used with media in many ways, including by setting a <code>&lt;canvas&gt;</code> element as the destination for video playback or camera capture so that you can capture and manipulate video frames.</dd>
<dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt>
<dd>WebGL provides an OpenGL ES compatible API on top of the existing Canvas API, making it possible to do powerful 3D graphics on the Web. Through a canvas, this can be used to add 3D imagery to media content.</dd>
</dl>
</div>
</div>
這些年來，網頁來表達，創作及運用視訊及音訊以至其他媒介的能力不斷上升。今時今日存在了 大量可供運用的 API 及 HTML 元件，DOM 介面，及其他不止於 發揮傳統效果，還能與其他網頁層面的技術產生協同效應和真實地令人深刻銘記 的特效。本文列出不同的 APIs 和連結其詳細資料的超連結，希望你能認為這些資訊能幫你盡快純熟這些技術。

## References

### HTML

這些文章包括 HTML 特效，供ＨＴＭＬ媒體開發者參考。

- {{HTMLElement("audio")}}
- : `<audio>` 元件，這是用來在網頁裡播放音效。此元件能 不被看見地運用來 作為一個 供更多其他繁雜的媒介放置的 位置。當然，也能放置一些可看見的控制器予用家來控制是否重播這些音訊。
- {{HTMLElement("video")}}
- : `<video>` 元件，這是一個為了視訊內容在網頁裡播放的端點(endpoint)．它能被簡單地只用作表現視訊，或者用作一個位置來放置即時視訊內容(streamed video).`<video>也能被用作一個途徑來連結媒介APIs和其他HTML及DOM技術,當中包括` {{HTMLElement("canvas")}} (這是作 frame grabbing(?) 和其管控).

### APIs

- [Media Capture and Streams API](/zh-TW/docs/Web/API/Media_Streams_API)
- : 這是一個參考資料，關於串流，記錄，管控媒體資料，無論是本地的，透過網路的。這些包括本地的攝錄機及來捕流視訊，音效或圖像的麥克風。
- [Web Audio API](/zh-TW/docs/Web/API/Web_Audio_API)
- : 你可以藉由此 API 產出、篩選及操作即時的聲音或是預先錄製好的材料，然後將音效送至`<audio>`元件、影音串流或是儲存起來。
- [WebRTC](/zh-TW/docs/Web/API/WebRTC_API)
- : WebRTC (網頁即時通訊)能夠即時地串流影音，也能夠透過網際網路將兩個人的訊息資料互相傳遞，而不需要任何媒介。

## 指南

- [網頁傳播媒體的概述](/zh-TW/docs/Web/Media/Overview)
- : 支援影音撥放，操作與紀錄的網頁科技與 API 的概論。如果你不知道該使用哪一個 API，請從這裡開始。

## Other topics

Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.

- [The Canvas API](/zh-TW/docs/Web/API/Canvas_API)
- : The Canvas API lets you draw into an {{HTMLElement("canvas")}}, manipulating and changing the contents of an image. This can be used with media in many ways, including by setting a `<canvas>` element as the destination for video playback or camera capture so that you can capture and manipulate video frames.
- [WebGL](/zh-TW/docs/Web/API/WebGL_API)
- : WebGL provides an OpenGL ES compatible API on top of the existing Canvas API, making it possible to do powerful 3D graphics on the Web. Through a canvas, this can be used to add 3D imagery to media content.
Loading

0 comments on commit 187db3e

Please sign in to comment.