diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 13:12:08 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 13:12:08 +0100 |
| commit | 43a5cac2eff22c21071800e13bef12af9d3a37d0 (patch) | |
| tree | f6e91f8aa958f15bd0b0aabf7b8dfc09063eceda /files/zh-tw/web/html | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-43a5cac2eff22c21071800e13bef12af9d3a37d0.tar.gz translated-content-43a5cac2eff22c21071800e13bef12af9d3a37d0.tar.bz2 translated-content-43a5cac2eff22c21071800e13bef12af9d3a37d0.zip | |
unslug zh-tw: move
Diffstat (limited to 'files/zh-tw/web/html')
| -rw-r--r-- | files/zh-tw/web/html/forms_in_html/index.html | 83 | ||||
| -rw-r--r-- | files/zh-tw/web/html/supported_media_formats/index.html | 467 |
2 files changed, 0 insertions, 550 deletions
diff --git a/files/zh-tw/web/html/forms_in_html/index.html b/files/zh-tw/web/html/forms_in_html/index.html deleted file mode 100644 index 6d83f5efea..0000000000 --- a/files/zh-tw/web/html/forms_in_html/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Forms in HTML -slug: Web/HTML/Forms_in_HTML -translation_of: Learn/HTML/Forms/HTML5_updates ---- -<div> - {{gecko_minversion_header("2")}}</div> -<h2 id="摘要">摘要</h2> -<p>HTML5的Form元素及其屬性比HTML4提供更大程度的語意標記，也移除了原本許多在HTML4所需要的繁瑣程式碼腳本與樣式控制。HTML5的Form元素讓表單在跨網頁上有更好的一致性，也提供即時的使用者輸入回饋，因為這些特色，HTML5的Form元素在使用者體驗上有更好的表現，甚至，這些體驗依然適用在瀏覽器關閉程式碼腳本執行的情況下。</p> -<p>本文旨在討論Gecko/Firefox, version 4或更新版本在新的或變更後的Form元素特色上的支援。</p> -<h2 id="<input>元素"><input>元素</h2> -<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"><input></a>元素的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type">type</a>屬性新增了一些屬性值。</p> -<ul> - <li><code>search</code>: 代表此為搜尋欄位，換行符號會自動從輸入值中刪除且沒有其他語法是必須的。</li> - <li><code>tel</code>: 代表此為電話編輯欄位，換行符號會自動從輸入值中刪除且沒有其他語法是必須的。基於各國電話號碼不一，你可以利用<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern">pattern</a>和<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength">maxlength</a>屬性來限制輸入。</li> - <li><code>url</code>: 代表此為URL編輯欄位，換行符號與前後空白符號會自動從輸入值中刪除。</li> - <li> - <p><code>email</code>: 代表此為email欄位，換行符號會自動從輸入值中刪除。只有在輸入符合ABNF規範: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )，其中atext定義在<a href="http://tools.ietf.org/html/rfc5322#section-3.2.3" title="http://tools.ietf.org/html/rfc5322#section-3.2.3">RFC 5322 section 3.2.3</a>，而ldh-str定義在<a href="http://tools.ietf.org/html/rfc1034#section-3.5" title="http://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 section 3.5</a>。</p> - <div class="note"> - <strong>Note:</strong> 當有設定<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple">multiple</a>屬性時，可以用逗號分隔email來一次輸入多個email，但目前FireFox不支援此功能。</div> - </li> -</ul> -<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"><input></a>元素同時也新增了一些屬性:</p> -<ul> - <li>{{htmlattrxref("list", "input")}}: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist"><datalist></a>元素的ID，這個元素下的內容，亦即<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option"><option></a>元素的值會顯示在輸入欄位的建議區來用於提示訊息。</li> - <li>{{htmlattrxref("pattern", "input")}}: 一個用來檢查輸入的正規表達式(regular expression)，當type屬性值為text, tel, search, url與email時可以使用。</li> - <li>{{htmlattrxref("form", "input")}}: 指示該<input>隸屬於哪一個<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form"><form></a>元素的一串文字，一個input只能隸屬於一個form下。</li> - <li>{{htmlattrxref("formmethod", "input")}}: 指示使用的HTTP方法(GET或POST)，這個屬性值會取代<form>元素下<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method">method</a>屬性所定義的HTTP方法。這個屬性只有在<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a>屬性出現而且type值為image或submit時才有效。</li> - <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: 當欄位驗證失敗時顯示的訊息，此為Mozilla擴充功能、非標準。</li> -</ul> -<h2 id="<form>元素"><form>元素</h2> -<p>{{HTMLElement("form")}} 元素新增了一些屬性</p> -<ul> - <li>{{htmlattrxref("novalidate", "form")}}: 當表單送出時，阻止表單驗證。</li> -</ul> -<h2 id="The_datalist_element" name="The_datalist_element"> <code><datalist></code>元素</h2> -<p>{{HTMLElement("datalist")}}元素是{{HTMLElement("option")}}元素的列表，{{HTMLElement("option")}}元素會用於提示輸入建議。</p> -<p>可以利用{{HTMLElement("input")}}的{{htmlattrxref("list", "input")}}屬性來連結{{HTMLElement("input")}}元素與{{HTMLElement("datalist")}}</p> -<h2 id="The_output_element" name="The_output_element"><code><output></code>元素</h2> -<p><code>{{HTMLElement("output")}}</code>元素代表運算結果。</p> -<p>可以利用{{htmlattrxref("for", "output")}}屬性來設定<code>{{HTMLElement("output")}}</code>元素和其他影響計算結果的元素(如input或參數)的關係，{{htmlattrxref("for", "output")}}屬性的值為一串以空白分隔的元素ID。</p> -<p>{{non-standard_inline}} Gecko2.0(不一定適用其他瀏覽器引擎)支援自定義{{HTMLElement("output")}}元素的驗證條件和錯誤訊息，所以提供了其{{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}和 {{Cssxref(":-moz-ui-valid")}}的CSS pseudo-class，在以下狀況這個特色將很有用，例如沒有輸入值有問題，但計算結果違反了商業規則(好比說總百分比不可超過100)。</p> -<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">placeholder屬性</h2> -<p><code>{{HTMLElement("input")}}</code>元素和<code>{{HTMLElement("textarea")}}</code>元素的{{htmlattrxref("placeholder", "input")}}屬性會在輸入欄位上顯示輸入提示，這個屬性的值不可以含有回車或換行符號。</p> -<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">autofocus屬性</h2> -<p>{{htmlattrxref("autofocus", "input")}}屬性指示除非使用者另有指定(例如在其他控制項上進行輸入操作)，否則當載入網頁時表單控制項要自動聚焦於特定元素上；autofocus屬性值為布林值(Boolean)，一份文件只能有一份表單設定autofocus屬性。能夠設定這個屬性的元素有<code>{{HTMLElement("input")}}</code>, <code>{{HTMLElement("button")}}</code>, <code>{{HTMLElement("select")}}</code>與<code>{{HTMLElement("textarea")}}</code>，不過當{{htmlattrxref("type", "input")}}屬性為隱藏(hidden)下，autofocus是無效的，也就是說，不能自動聚焦於隱藏元素上。</p> -<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">label.control DOM屬性</h2> -<p><code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM介面提供了<code>{{HTMLElement("label")}}</code>元素一個新的control屬性，control屬性會回傳被標記的控制項，這個控制項便是該label適用的控制項，也就是<label>元素{{htmlattrxref("for", "label")}}屬性指定的元素(如果有的話)或是第一個後代控制項元素。</p> -<h2 id="Constraint_Validation" name="Constraint_Validation">約束驗證</h2> -<p>HTML5提供了客戶端表單驗證的語法和API，基於安全性與資料正確性，雖然這並不能取代伺服器端驗證，但是客戶端驗證可以提拱使用者更好的立即輸入回饋體驗。</p> -<p>當{{HTMLElement("input")}}元素設定了title屬性，其值會作為提示框之內容，若是驗證失敗，提示框的內容會換成相關的錯誤訊息，我們可以利用非標準的{{htmlattrxref("x-moz-errormessage")}}屬性或setCustomValidity()方法來自定義錯誤訊息。</p> -<pre class="brush: html"><input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail"></pre> -<div class="note"> - <strong>Note:</strong> 約束驗證不支援表單的{{HTMLElement("button")}}元素，若是想根據表單驗證果來設定按鈕樣式，可以利用{{cssxref(":-moz-submit-invalid")}} pseudo-class。</div> -<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">約束驗證的HTML語法</h3> -<p>下列是HTML5用來約束表單資料的語法</p> -<ul> - <li>{{HTMLElement("input")}}, {{HTMLElement("select")}},和{{HTMLElement("textarea")}}的{{htmlattrxref("required", "input")}}屬性表示輸入不可為空。{{HTMLElement("input")}}元素在用{{htmlattrxref("required", "input")}}屬性時需要搭配某些特定{{htmlattrxref("type", "input")}}屬性值)</li> - <li>{{HTMLElement("input")}}元素的{{htmlattrxref("pattern", "input")}}屬性規範了輸入必須符合指定的正規表達式。</li> - <li>{{HTMLElement("input")}}元素的{{htmlattrxref("min", "input")}}和{{htmlattrxref("max", "input")}}屬性規範了最小和最大輸入值。</li> - <li>{{HTMLElement("input")}}元素的{{htmlattrxref("step", "input")}}屬性(和{{htmlattrxref("min", "input")}}和{{htmlattrxref("max", "input")}}屬性結合使用)規範了輸入值一次調整的幅度，當輸入值不符合允許的調整幅度即驗證失敗。</li> - <li>{{HTMLElement("input")}}和{{HTMLElement("textarea")}}元素的{{htmlattrxref("maxlength", "input")}}屬性規範了最大輸入字元數(以Unicode編碼計算)。</li> - <li>{{htmlattrxref("type", "input")}}值的url和email表示輸入必須是合格的URL或email格式。</li> -</ul> -<p>另外，我們可以在{{HTMLElement("form")}}元素上設定{{htmlattrxref("novalidate", "form")}}屬性或是在{{HTMLElement("button")}}元素以及{{htmlattrxref("type", "input")}}為submit或image的{{HTMLElement("input")}}元素上設定{{htmlattrxref("formnovalidate", "button")}}屬性來避免輸入約束驗證。這些屬性都會指示表單送出時不要進行驗證。</p> -<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">約束驗證API</h3> -<p>下列是客戶端驗證可用的DOM屬性和方法:</p> -<ul> - <li><code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code>物件有checkValidity()方法會回傳true當表單下所有元素都通過約束驗證，false當任一沒有通過。</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement?redirectlocale=en-US&redirectslug=DOM%2FHTMLFormElement" title="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement?redirectlocale=en-US&redirectslug=DOM%2FHTMLFormElement">表單相關元素:</a> - <ul> - <li><code>willValidate</code> 屬性為false若該元素沒有通過驗證。</li> - <li><code>validity</code> 屬性( <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> 物件)代表該元素目前的驗證結果。</li> - <li><code>validationMessage</code>屬性是驗證失敗時的訊息。</li> - <li><code>checkValidity()</code> 方法會回傳true當表單下所有元素都通過約束驗證，false當任一沒有通過。</li> - <li><code>setCustomValidity()</code> 可以自定義驗證失敗訊息。</li> - </ul> - </li> -</ul> -<h2 id="See_also">See also</h2> -<ul> - <li><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML Forms Guide</a></li> -</ul> diff --git a/files/zh-tw/web/html/supported_media_formats/index.html b/files/zh-tw/web/html/supported_media_formats/index.html deleted file mode 100644 index 455655ba25..0000000000 --- a/files/zh-tw/web/html/supported_media_formats/index.html +++ /dev/null @@ -1,467 +0,0 @@ ---- -title: Media formats supported by the HTML audio and video elements -slug: Web/HTML/Supported_media_formats -translation_of: Web/Media/Formats -translation_of_original: Web/HTML/Supported_media_formats ---- -<p>The {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements provide support for playing audio and video media without requiring plug-ins. Video codecs and audio codecs are used to handle video and audio, and different codecs offer different levels of compression and quality. A container format is used to store and transmit the coded video and audio (both together, the case of a video with a soundtrack). Many combinations of codecs and container formats exist, although only a handful of these are relevant on the Web.</p> - -<p>Different browsers do not support the same media formats in their implementations of HTML5 video and audio, mainly because of patent issues. The area of media formats on the Web has greatly suffered from patent law in many countries - including the USA and EU countries (the notes on patents in this article is provided as-is and without any warranty.) This article discusses the different codec and container combinations relevant to the web, including support in browsers on both desktop and other device types.</p> - -<p>To make an HTML5 video, which works in the newest versions of all major browsers, you can serve your video in both WebM format and MPEG H.264 AAC format, using the <a href="/en/HTML/Element/source" title="En/HTML/Element/Source"><code>source</code></a> element like this:</p> - -<pre class="brush: html"><video controls> - <source src="somevideo.webm" type="video/webm"> - <source src="somevideo.mp4" type="video/mp4"> - I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264. - <!-- You can embed a Flash player here, to play your mp4 video in older browsers --> -</video> -</pre> - -<h2 id="WebM">WebM</h2> - -<p>The <a class="external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> format is based on a restricted version of the <a class="external" href="http://corecodec.com/products/matroska" title="http://corecodec.com/products/matroska">Matroska</a> container format. It always uses the VP8 or VP9 video codec and the Vorbis or Opus audio codec. WebM is natively supported in desktop and mobile Gecko (Firefox), Chrome and Opera, and support for the format can be added to Internet Explorer and Safari (but not on iOS) by installing an add-on.</p> - -<p><a href="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx">Statement from Microsoft on why IE9 does not have native WebM support</a>.</p> - -<p>The WebM format, specifically the VP8 video codec, had been acccused of patent infringment by a group of companies answering a call by the MPEG LA for the formation of a patent pool, but <a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8" title="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8">MPEG LA has agreed to license those patents to Google</a> under a "<a href="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261" title="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261">perpetual, transferable, royalty free license"</a>. This means, effectively, that all known patents on the WebM format are licensed to everyone for free. </p> - -<p>Gecko recognizes the following MIME types as WebM files:</p> - -<dl> - <dt><code>video/webm</code></dt> - <dd>A WebM media file containing video (and possibly audio as well).</dd> - <dt><code>audio/webm</code></dt> - <dd>A WebM media file containing only audio.</dd> -</dl> - -<h2 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h2> - -<p>The Ogg container format with the Theora video codec and the Vorbis audio codec is supported in desktop/mobile Gecko (Firefox), Chrome, and Opera, and support for the format can be added to Safari (but not on iOS) by installing an add-on. The format is not supported in Internet Explorer in any way.</p> - -<p>WebM is generally preferred over Ogg Theora Vorbis when available, because it provides a better compression to quality ratio and is supported in more browsers. The Ogg format can however be used to support older browser versions (for example Firefox 3.5/3.6 don't support WebM, but do support Ogg.)</p> - -<p>The patent situation of Theora is similar to that of WebM.</p> - -<p>You can learn more about creating Ogg media by reading the <a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a>.</p> - -<p>Gecko recognizes the following MIME types as Ogg files:</p> - -<dl> - <dt><code>audio/ogg</code></dt> - <dd>An Ogg file containing only audio.</dd> - <dt><code>video/ogg</code></dt> - <dd>An ogg file containing video (and possibly also audio).</dd> - <dt><code>application/ogg</code></dt> - <dd>An Ogg file with unspecified content. Using one of the other two MIME types is preferred, but you can use this if you don't know what the contents of the file are.</dd> -</dl> - -<h2 id="Ogg_Opus">Ogg Opus</h2> - -<p>The Ogg container can also contain audio encoded using the <a class="external" href="http://www.opus-codec.org/" title="http://www.opus-codec.org/">Opus codec</a>. Support for this is available in Gecko 15.0 {{ geckoRelease("15.0") }} and later, on desktop and mobile browsers.</p> - -<h2 id="MP4_H.264_(AAC_or_MP3)">MP4 H.264 (AAC or MP3)</h2> - -<p>The MP4 container format with the H.264 video codec and the AAC audio codec is natively supported by desktop/mobile Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. IE and Chrome also support the MP3 audio codec in the MP4 container, but Safari does not. Firefox/Firefox for Android/Firefox OS supports the format in some cases, but only when a third-party decoder is available, and the device hardware can handle the profile used to encode the MP4.</p> - -<div class="note"> -<p><strong>Note</strong>: MP4s encoded with a high profile will not run on lower end hardware, such as low end Firefox OS phones.</p> -</div> - -<p>The MPEG media formats are covered by patents, which are not freely licensed. All the necessary licenses can be bought from MPEG LA. Since H.264 is currently not a royalty free format, it is unfit for the open web platform, according to Mozilla [<a class="external" href="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/" title="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/">1</a>, <a class="external" href="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html" title="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html">2</a>], Google [<a class="external" href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html">1</a>, <a class="external" href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" title="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html">2</a>] and Opera. However, since royalty free formats are not supported by Internet Explorer and Safari, <a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">Mozilla has decided to support the format anyway</a>, and Google never fulfilled their promise to <span class="external">remove support for it in Chrome</span>.</p> - -<h2 id="MP3">MP3</h2> - -<p>The MP3 audio format (.mp3, <code>audio/mpeg</code>; distinct from the above MP3 audio in an MP4 container case) is supported in <code><audio></code> by Firefox/Firefox for Android/Firefox OS when the operating system provides an MP3 decoder, and by Internet Explorer, Chrome and Safari.</p> - -<h2 id="WAVE_PCM">WAVE PCM</h2> - -<p>The WAVE container format, with the PCM audio codec (WAVE codec "1") is supported by desktop/mobile Gecko (Firefox) and Safari. Files in the WAVE container format typically end with the ".wav" extension.</p> - -<div class="note"><strong>Note: </strong>See <a class="external" href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt">RFC 2361</a> for the WAVE codec registry.</div> - -<p>Gecko recognizes the following MIME types as WAVE audio files:</p> - -<ul> - <li><code>audio/wave</code> (preferred)</li> - <li><code>audio/wav</code></li> - <li><code>audio/x-wav</code></li> - <li><code>audio/x-pn-wav</code></li> -</ul> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>3.0</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>9.0</td> - <td>10.50</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: PCM in WAVE</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.50</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: Vorbis in WebM</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.60</td> - <td>3.1 (must be installed separately)</td> - </tr> - <tr> - <td><code><audio></code>: Vorbis in Ogg</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.50</td> - <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> - </tr> - <tr> - <td><audio>: MP3</td> - <td>{{ CompatVersionUnknown() }} (Not in Chromium)</td> - <td>Partial (see below)</td> - <td>9.0</td> - <td>{{ CompatNo() }}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: MP3 in MP4</td> - <td> - <p>{{ CompatUnknown() }}</p> - </td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: AAC in MP4</td> - <td> - <p>{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)</p> - </td> - <td> - <p>Partial (see below)</p> - </td> - <td>9.0</td> - <td>{{ CompatNo() }}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: Opus in Ogg</td> - <td>27.0</td> - <td>{{ CompatGeckoDesktop("15.0") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><video></code>: VP8 and Vorbis in WebM</td> - <td>6.0</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>9.0 (<a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/" title="http://tools.google.com/dlpage/webmmf/">WebM MF</a>)</td> - <td>10.60</td> - <td>3.1 (must be installed separately, e.g. <a class="external" href="http://perian.org/" title="http://perian.org/">Perian</a>)</td> - </tr> - <tr> - <td><code><video></code>: VP9 and Opus in WebM</td> - <td>29.0</td> - <td>{{ CompatGeckoDesktop("28.0") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><video></code>: Theora and Vorbis in Ogg</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.50</td> - <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> - </tr> - <tr> - <td><code><video></code>: H.264 and MP3 in MP4</td> - <td> - <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> - </td> - <td>Partial (see below)</td> - <td>9.0</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code><video></code>: H.264 and AAC in MP4</td> - <td> - <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> - </td> - <td>Partial (see below)</td> - <td>9.0</td> - <td>{{ CompatNo() }}</td> - <td>3.1</td> - </tr> - <tr> - <td>any other format</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>3.1 (plays all formats available via QuickTime)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Opera Mini</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>2.3</td> - <td>24.0</td> - <td>1.0.1</td> - <td>10.0</td> - <td>11.0</td> - <td>Partial (see below)</td> - <td>3.2</td> - <td>29.0</td> - </tr> - <tr> - <td><code><audio></code>: PCM in WAVE</td> - <td>{{ CompatUnknown() }}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>Partial (see below)</td> - <td>3.2</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: Vorbis in WebM</td> - <td>{{ CompatUnknown() }}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{ CompatNo() }}</td> - <td>11.0</td> - <td>Partial (see below)</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: Vorbis in Ogg</td> - <td>{{ CompatUnknown() }}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{ CompatNo() }}</td> - <td>11.0</td> - <td>Partial (see below)</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: MP3</td> - <td>{{ CompatUnknown() }}</td> - <td>Partial (see below)</td> - <td>Partial (see below)</td> - <td>10.0</td> - <td>{{ CompatNo() }}</td> - <td>Partial (see below)</td> - <td>3.2</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: MP3 in MP4</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: AAC in MP4</td> - <td>{{ CompatUnknown() }}</td> - <td>Partial (see below)</td> - <td>Partial (see below)</td> - <td>10.0</td> - <td>{{ CompatNo() }}</td> - <td>Partial (see below)</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: Opus in Ogg</td> - <td>{{ CompatNo() }}</td> - <td>24.0</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>Partial (see below)</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code><video></code>: VP8 and Vorbis in WebM</td> - <td>2.3</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{ CompatNo() }}</td> - <td>16.0</td> - <td>Partial (see below)</td> - <td>{{ CompatNo() }}</td> - <td>29.0</td> - </tr> - <tr> - <td><code><video></code>: VP9 and Opus in WebM</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><video></code>: Theora and Vorbis in Ogg</td> - <td>{{ CompatNo() }}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>Partial (see below)</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code><video></code>: H.264 and MP3 in MP4</td> - <td>Partial (see below)</td> - <td>24.0</td> - <td>Partial (see below)</td> - <td>10.0</td> - <td>Partial since 11.0, full since 16.0</td> - <td>Partial (see below)</td> - <td>{{ CompatUnknown() }}</td> - <td>29.0</td> - </tr> - <tr> - <td><code><video></code>: H.264 and AAC in MP4</td> - <td>Partial (see below)</td> - <td>24.0</td> - <td>Partial (see below)</td> - <td>10.0</td> - <td>Partial since 11.0, full since 16.0</td> - <td>Partial (see below)</td> - <td>3.2</td> - <td>29.0</td> - </tr> - <tr> - <td>any other format</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>Notes:</p> - -<ul> - <li>AAC is only supported in the MP4 container.</li> - <li>Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</li> - <li>To get the default Android browser to play H.264 video, you need to jump through some hoops, as <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/">explained by Peter Gasston</a>.</li> - <li>In Firefox OS 1.0.1, when detecting <code><video></code> support for different formats, <code>HTMLMediaElement.prototype.canPlayType</code> incorrectly reports <code>true</code> for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed.</li> - <li>To avoid patent issues, support for MPEG 4, H.264, MP3 and AAC is not built directly into Firefox on desktop and mobile (Android and Firefox OS). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4). Firefox desktop supports these formats on the following platforms:</li> -</ul> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Platform</th> - <th scope="col">Gecko (Firefox) version</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=799315" title="https://bugzilla.mozilla.org/show_bug.cgi?id=799315">Windows 7+</a></td> - <td>21.0</td> - </tr> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153" title="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a></td> - <td>22.0</td> - </tr> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351" title="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a></td> - <td>20.0</td> - </tr> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408" title="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a></td> - <td>15.0</td> - </tr> - <tr> - <td>Linux</td> - <td> - <p>26.0 (relies on GStreamer codecs being installed)</p> - </td> - </tr> - <tr> - <td>OS X 10.7</td> - <td><strong>Not yet </strong>(see <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290" title="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">bug</a>)</td> - </tr> - </tbody> -</table> - -<ul> - <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs" title="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li> - <li><a href="http://www.chromium.org/audio-video" title="http://www.chromium.org/audio-video">Audio & Video codecs in Chrome</a></li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li> - <li><a href="http://bluishcoder.co.nz/2013/08/21/html-media-support-in-firefox.html">HTML media support in Firefox</a></li> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li> - <li><code><a class="internal" href="/en/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li> - <li><a class="internal" href="/en/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> -</ul> |