HTML的媒体支持:audio和video元素 - HTML（超文本标记语言） 编辑
<audio> 和 <video>是浏览器内置的播放音频或视频的元素;视频和音频编解码器用来处理视频和音频，不同的编解码器提供不同级别的压缩率和分辨率；一个容器封装格式（多媒体容器格式）用来存储和传输编码后的视频和音频（如果视频带有音轨则同时；编解码器和多媒体容器格式有非常多的组合；尽管只有很少部分和WEB相关；
由于专利的问题，不同的浏览器对HTML5的video和audio有不同的规范和实现；WEB上的媒体格式领域受到在包括美国、欧盟在内的许多国家的专利法的保护和制约；本文将讨论了不同的编解码器和封装格式在WEB上的各种组合，包括在桌面设备和其他设备上的浏览器的支持情况。
想要在HTML5中播放视频，并且主流浏览器的最新版本中支持良好；可以使用WebM 和 MPEG H.264 AAC 编码格式；像下面一样使用<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.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
Ogg Theora Vorbis
Ogg容器格式使用Theora视频编解码器和 Vorbis音频编解码器。在的桌面和移动端的Gecko(Firefox)，Chrome和Opera；Safari（非IOS）可以通过添加扩展支持；但是不支持IE
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 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"。
See RFC 2361 for the WAVE codec registry.Gecko提供下面4种WAVE文件格式的MIME type：
audio/wave(preferred; does not work in Chrome)audio/wavaudio/x-wavaudio/x-pn-wav
FLAC
FLAC容器格式使用 FLAC 音频编解码器 (FLAC codec)；桌面端受到Gecko Firefox 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48)的支持，文件后缀为 “.flac”
Gecko提供下面4种FLAC文件格式的MIME type：
audio/flac(preferred)audio/x-flac
Media Source Extensions (MSE)
媒体源扩展(MSE)是一个W3C工作草案，计划扩展HTMLMediaElement以允许JavaScript生成用于重放的媒体流。 允许JavaScript生成流以适应各种应用场景，如自适应流和时移实时流。 MSE支持仅限于MP4和WebM容器，但编解码器支持因底层平台而异。
例如：可以使用JavaScript实现MPEG-DASH，同时将解码解压缩到MSE。
For example, you could implement MPEG-DASH using JavaScript while offloading the decoding to MSE.
时间位移(Time shifting) 功能主要是将即时内容，录制在存储器上，可以暂时离开，一定时间回来后，可以从离开的时间通过内部的重播。
浏览器兼容情况
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!| 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) | 未实现 | 10.50 | 3.1 |
<audio>: Vorbis in WebM | (Yes) | 4.0 (2.0) | 未实现 | 10.60 | 3.1[1] |
<audio>: Streaming Vorbis/Opus in WebM via MSE | ? | 36.0 (36.0)[2] | ? | ? | ? |
<audio>: Vorbis in Ogg | (Yes) | 3.5 (1.9.1) | 未实现 | 10.50 | 未实现 |
<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) | 未实现 | 未实现 | 11 |
<audio>: FLAC in Ogg | 56.0 | 51 (51) | 未实现 | 未实现 | 未实现 |
<video>: VP8 and Vorbis in WebM | 6.0 | 4.0 (2.0) | 9.0[8] | 10.60 | 3.1[9] |
<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) | 未实现 | 10.50 | 未实现 |
<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 | 62.0 | 51 (51) | ? | ? | ? |
| any other format | 未实现 | 未实现 | 未实现 | 未实现 | 3.1[12] |
| 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 | 未实现 | 未实现 | (Yes)[14] | 3.2 |
<audio>: Vorbis in WebM | ? | ? | 24.0 | 1.0.1 | 未实现 | 11.0 | (Yes)[15] | 未实现 |
<audio>: Streaming Vorbis in WebM via MSE | ? | ? | ? | ? | ? | ? | ? | ? |
<audio>: Vorbis in Ogg | ? | ? | 24.0 | 1.0.1 | 未实现 | 11.0 | (Yes)[16] | 未实现 |
<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 | 未实现 | 71.0 | 24.0 | 未实现 | 未实现 | 未实现 | (Yes)[23] | 未实现 |
<video>: VP8 and Vorbis in WebM | (Yes) | 29 | 24.0 | 1.0.1 | 未实现 | 16.0 | (Yes)[24] | 未实现 |
<video>: VP9 and Opus in WebM | ? | ? | ? | ? | ? | ? | ? | ? |
<video>: Streaming WebM via MSE | ? | ? | 42.0 (42.0) | ? | ? | ? | ? | ? |
<video>: Theora and Vorbis in Ogg | 未实现 | 未实现 | 24.0 | 1.0.1 | 未实现 | 未实现 | (Yes)[25] | 未实现 |
<video>: H.264 and MP3 in MP4 | (Yes)[26] | 29 | 24.0[33] | (Yes)[27] | 10.0 | 16.0[28] | (Yes)[29] | (Yes) |
<video>: H.264 and AAC in MP4 | (Yes)[30] | 29 | 24.0[34] | (Yes)[31] | 10.0 | 16.0[28] | (Yes)[32] | 3.2 |
<video>: FLAC in MP4 | ? | 62.0 | 58.0 (58) | ? | ? | ? | ? | ? |
| any other format | ? | ? | ? | ? | ? | ? | ? | ? |
[1] Must be installed separately.
[2] In Nightly/Dev Edition only.
[3] Only on platforms that don't support H.264.
[4] AAC is only supported in the MP4 container. Not in Chromium.
[5] To avoid patent issues, support for MP3 is not built directly into Firefox. Instead it relies on support from the OS. Firefox supports this format on the following platforms: Windows Vista+ since Firefox 22.0, Android since Firefox 20.0, Firefox OS since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and OS X 10.7 since Firefox 35.0.
[6] Main only. Not in Chromium. AAC is only supported in the MP4 container.
[7] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4 and AAC is not built directly into Firefox. 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 supports these formats on the following platforms: Windows Vista+ since Firefox 22.0, Android since Firefox 20.0, Firefox OS since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and OS X 10.7 since Firefox 35.0.
[8] must be installed separately, e.g. WebM MF.
[9] Must be installed separately, e.g. Perian.
[10] To avoid patent issues, support for MPEG 4, H.264 and MP3 is not built directly into Firefox. 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 supports these formats on the following platforms: Windows Vista+ since Firefox 22.0, Android since Firefox 20.0, Firefox OS since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and OS X 10.7 since Firefox 35.0.
[11] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4, H.264 and AAC is not built directly into Firefox. 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 supports these formats on the following platforms: Windows Vista+ since Firefox 22.0, Android since Firefox 20.0, Firefox OS since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and OS X 10.7 since Firefox 35.0.
[12] Plays all formats available via QuickTime.
[13] 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.
[14] 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.
[15] 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.
[16] 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.
[17] To avoid patent issues, support for MP3 is not built directly into Firefox Mobile (Android). Instead it relies on support from the OS or hardware.
[18] To avoid patent issues, support for MP3 is not built directly into Firefox OS. Instead it relies on support from the OS or hardware.
[19] 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.
[20] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4 and AAC is not built directly into Firefox Mobile (Android). 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).
[21] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4 and AAC is not built directly into 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).
[22] 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. AAC is only supported in the MP4 container.
[23] 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.
[24] 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.
[25] 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.
[26] To get the default Android browser to play H.264 video, you need to jump through some hoops, as explained by Peter Gasston.
[27] In Firefox OS 1.0.1, when detecting <video> support for different formats, HTMLMediaElement.prototype.canPlayType incorrectly reports true for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed.
To avoid patent issues, support for MPEG 4, H.264 and MP3 is not built directly into Firefox 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).
[28] Partial since 11.0. AAC is only supported in the MP4 container.
[29] 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.
[30] AAC is only supported in the MP4 container. To get the default Android browser to play H.264 video, you need to jump through some hoops, as explained by Peter Gasston.
[31] In Firefox OS 1.0.1, when detecting <video> support for different formats, HTMLMediaElement.prototype.canPlayType incorrectly reports true for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed. AAC is only supported in the MP4 container.
To avoid patent issues, support for MPEG 4, H.264 and ACC is not built directly into 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).
[32] 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. AAC is only supported in the MP4 container.
[33] To avoid patent issues, support for MPEG 4, H.264 and MP3 is not built directly into Firefox Mobile (Android). 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).
[34] To avoid patent issues, support for MPEG 4, H.264 and ACC is not built directly into Firefox Mobile (Android). 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).
[35] VP8/VP9 video codecs are only available in MSE when H.264 hardware decoders are not available. Checking for availability via MediaSource.isTypeSupported() is recommended.
[36] Starting in Firefox 46, when attempting to initiate a WebRTC call using RTCPeerConnection.createOffer() uses VP9 by default; in the past, VP8 was the default video format.
See also
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论