Supported media formats - [ HTML 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

目录搜索

Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp

文字

<audio> 和 <video> 元素为不带插件播放音频和视频提供支持。媒体文件的格式由包含一个或多个数据流的容器组成, 它使用称为编码解码器的压缩格式进行编码。容器的文件扩展名是可识别的。容器中的流有多种类型, 其中可以包括视频、音频、数据或字幕。单个容器 (即媒体文件) 可以容纳同一类型的多个流。在音频和视频流中是编解码器。编码解码器, 简称为 "编码解码器", 是一种用于压缩文件中的数据的算法。每个容器类型只有它所支持的特定的编解码器。

理解为什么 web 需要不同的媒体格式是很重要的。由于各种原因, 主要超出了本文的范围, 不同的浏览器支持不同的媒体格式。此外, 网络上的媒体格式在许多国家, 包括美国和欧盟国家, 都受到专利法的严重影响。(本文中关于专利的说明是按目前的情况提供的, 没有任何保证。本文讨论与 web 最相关的格式, 包括在移动和桌面上的浏览器中的支持。

显示媒体

下面简要回顾了如何在 HTML 中引用媒体元素。有关详细信息, 请参阅每个元素的文章。

HTML5 支持多个媒体元素。<video> 和 <audio> 元素可单独使用, 也可以与 <source> 元素合并。一个简短的例子说明。虽然 <video> 和 <audio> 元素都包含 src 属性, 但此示例使用 <source> 元素以多种格式提供视频文件, 从而允许每个浏览器选择它支持的元素。

<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/VP9 or MP4 with H.264.</video>

文件格式

下面列出的是 HTML 媒体元素支持的文件格式的数字 (尽管不是全部)。要了解哪些浏览器支持哪些格式, 请参阅本页底部的浏览器兼容性部分。

WebM

WebM 格式基于 Matroska 容器格式的受限版本。它总是使用 VP8 或 VP9 视频编解码器和 Vorbis 或天音编解码器。

WebM格式,特别是VP8视频编解码器,被指控的专利侵权由一组公司回答的一个电话由mpegla为形成一个专利水池,但mpegla同意授予那些专利对Google在"永久, 可转让, 免版税许可证 "。这意味着, WebM 格式的所有已知专利都是免费许可的。

Gecko将下列MIME类型识别为WebM文件：

视频/webmA WebM 媒体文件, 包含视频 (也可能是音频). 音频/webmA WebM 媒体文件只包含音频。

Ogg Theora Vorbis

Ogg容器格式使用Theora视频编解码器和 Vorbis音频编解码器。在的桌面和移动端的Gecko(Firefox)，Chrome和Opera；Safari（非IOS）可以通过添加扩展支持；但是不支持Internet Explorer

WebM在可选的情况下是优选项；因为它能提供更高的压缩比，并且被更多的浏览器所支持；而Ogg容器格式主要用于支持低版本的浏览器（比如： Firefox 3.5/3.6就不支持WebM，但是支持Ogg）

Ogg的授权情况和WebM类似

Gecko提供下面3种Ogg文件格式的MIME type：

audio/ogg

一个只包含音频的Ogg文件

video/ogg

一个包含视频或音频的Ogg文件

application/ogg

一个不指定内容的Ogg文件，当你不知道内容的时候可以选择

Ogg Opus

Ogg容器可以通过使用Opus codec包含音频编解码器；用来支持Gecko 15.0 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12) 或更新的版本

Ogg FLAC

Ogg容器可以通过使用FLAC codec包含音频编解码器；用来支持Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) 或更新的版本, 但只适用于桌面浏览器

MP4 H.264 (AAC or MP3)

MP4 的容器格式与 H. 264 视频编解码器和 AAC 音频编解码器是本地支持的桌面/移动互联网浏览器, Safari 和 Chrome, 但铬和歌剧不支持的格式。IE 和 Chrome 也支持 MP4 容器中的 MP3 音频编解码器, 但是 Safari 没有。火狐/火狐操作系统在某些情况下支持这种格式, 但只有当第三方解码器可用时, 设备硬件才能处理用于编码 MP4 的配置文件。

高端编码的MP4不能在低端手机等低端硬件上运行。

MPEG 媒体格式被专利所覆盖, 而这些都不是免费许可的。一些必要的许可证可以从 MPEG 购买。因为 H. 264 当前不是皇族自由格式, 它不适合开放网络平台, 根据 Mozilla [1, 2], Google [1, 2] 并且歌剧。然而, 由于没有版税的格式是不支持的互联网浏览器和 Safari, Mozilla 决定支持的格式无论如何, 和谷歌从来没有兑现他们的承诺, 以消除对它的支持, 在 Chrome。

MP4 FLAC

从Firefox 51开始，你就可以使用FLAC编解码器播放MP4了，不管你有没有安装 MediaSource Extensions和DRM 扩展支持。

MP3

MP3 audio 编码对应浏览器<audio>的支持。其中Firefox/Firefox for Android/Firefox OS需要操作系统本身提供了MP3的解码器；而IE，Chrome，Safari则原生支持

WAVE PCM

WAVE容器使用PCM音频编解码器；桌面和移动Gecko (Firefox) a、 Safari都支持，WAVE容器中的文件后缀为 ".wav"。

请参阅WAVE编解码器注册表的RFC 2361。

Gecko提供下面4种WAVE文件格式的MIME type：

audio/wave （首选;在Chrome中不起作用）

audio/wav

audio/x-wav

audio/x-pn-wav

FLAC

FLAC容器格式使用 FLAC 音频编解码器 (FLAC codec)；桌面端受到Gecko Firefox 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48)的支持，文件后缀为 “.flac”

Gecko提供下面几种FLAC文件格式的MIME type：

audio/flac （优选）

audio/x-flac

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	3.0	3.5 (1.9.1)	9.0	10.50	3.1
<audio>: PCM in WAVE	(Yes)	3.5 (1.9.1)	No support	10.50	3.1
<audio>: Vorbis in WebM	(Yes)	4.0 (2.0)	No support	10.60	3.11
<audio>: Streaming Vorbis/Opus in WebM via MSE	?	36.0 (36.0)2	?	?	?
<audio>: Vorbis in Ogg	(Yes)	3.5 (1.9.1)	No support	10.50	No support
<audio>: MP3	(Yes)4	(Yes)5	9.0	(Yes)	3.1
<audio>: MP3 in MP4	?	?	?	?	(Yes)
<audio>: AAC in MP4	(Yes)6	(Yes)7	9.0	(Yes)	3.1
<audio>: Opus in Ogg	27.0	15.0 (15.0)	?	?	?
<audio>: FLAC	56.0	51 (51)	No support	No support	No support
<audio>: FLAC in Ogg	56.0	51 (51)	No support	No support	No support
<video>: VP8 and Vorbis in WebM	6.0	4.0 (2.0)	9.08	10.60	3.19
<video>: VP9 and Opus in WebM	29.0	28.0 (28.0)36	?	(Yes)	?
<video>: Streaming WebM via MSE	?	42.0 (42.0)35	?	?	?
<video>: Theora and Vorbis in Ogg	(Yes)	3.5 (1.9.1)	No support	10.50	No support
<video>: H.264 and MP3 in MP4	(Yes)3	(Yes)10	9.0	(Yes)	(Yes)
<video>: H.264 and AAC in MP4	(Yes)4	(Yes)11	9.0	(Yes)	3.1
<video>: FLAC in MP4	?	51 (51)	?	?	?
any other format	No support	No support	No support	No support	3.112

Feature	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	Firefox OS (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic support	(Yes)	29	24.0	1.0.1	10.0	11.0	(Yes)13	3.2
<audio>: PCM in WAVE	?	?	24.0	1.0.1	No support	No support	(Yes)14	3.2
<audio>: Vorbis in WebM	?	?	24.0	1.0.1	No support	11.0	(Yes)15	No support
<audio>: Streaming Vorbis in WebM via MSE	?	?	?	?	?	?	?	?
<audio>: Vorbis in Ogg	?	?	24.0	1.0.1	No support	11.0	(Yes)16	No support
<audio>: MP3	?	?	(Yes)17	(Yes)18	10.0	?	(Yes)19	3.2
<audio>: MP3 in MP4	?	?	?	?	?	?	?	(Yes)
<audio>: AAC in MP4	?	?	(Yes)20	(Yes)21	10.0	?	(Yes)22	(Yes)
<audio>: Opus in Ogg	No support	No support	24.0	No support	No support	No support	(Yes)23	No support
<video>: VP8 and Vorbis in WebM	(Yes)	29	24.0	1.0.1	No support	16.0	(Yes)24	No support
<video>: VP9 and Opus in WebM	?	?	?	?	?	?	?	?
<video>: Streaming WebM via MSE	?	?	42.0 (42.0)	?	?	?	?	?
<video>: Theora and Vorbis in Ogg	No support	No support	24.0	1.0.1	No support	No support	(Yes)25	No support
<video>: H.264 and MP3 in MP4	(Yes)26	29	24.033	(Yes)27	10.0	16.028	(Yes)29	(Yes)
<video>: H.264 and AAC in MP4	(Yes)30	29	24.034	(Yes)31	10.0	16.028	(Yes)32	3.2
<video>: FLAC in MP4	?	?	51.0 (51)	?	?	?	?	?
any other format	?	?	?	?	?	?	?	?