HTML5 多媒体的十个常见问题和解答

5迷3道小组发布于
2012 年 08 月 15 日

很多的人都纠结于如何在不同的情况下让音频及视频正常工作，为此，HTML5 Doctor 的作者 Ian Devlin 把一些最普遍的问题和相应的解决方法整理成清单，在这里提供给大家。

当我为了我的书《HTML5 Multimedia: Develop and Design》而研究与 HTML5 多媒体相关内容时，我发现很多的人都纠结于如何在不同的情况下让音频及视频正常工作。从 Twitter 到 Stack Overflow，同样的问题一遍又一遍出现。为此，我把一些最普遍的问题（也有不那么普遍的）和相应的解决方法（如果有的话！）整理成清单，在这里提供给大家。

在大多数情况下，涉及到的问题及解决方法都同时适用于音频和视频。如果有特殊情况，我会专门指出。

一、浏览器支持 #

这是你需要确定的第一件事：你正在使用的浏览器支持你尝试要播放的媒体类型吗？什么浏览器支持什么样的类型，是很容易搞忘记的，所以在这里更新一下你的记忆。

音频 #

Firefox 支持 Ogg Vorbis 和 WAV
Opera 支持 Ogg Vorbis 和 WAV
Safari 支持 MP3、AAC 和 MP4
Chrome 支持 Ogg Vorbis、MP3、WAV, AAC 和 MP4
Internet Explorer 9+ 支持 MP3、AAC 和 MP4
iOS 支持 MP3、AAC 和 MP4
Android 支持 AAC 和 MP3

为了支持以上提到的所有浏览器，建议你的音频文件采用 Ogg Vorbis 和 MP3。例如：

<audio controls>
   <source src="myAudio.ogg"type="audio/ogg">
   <source src="myAudio.mp3"type="audio/mp3">
</audio>

视频 #

Firefox 支持 Theora Ogg 和 WebM
Opera 支持 Theora Ogg 和 WebM
Safari 支持 MP4
Chrome 支持 Theora Ogg、MP4 和 WebM
Internet Explorer 9+ 支持 MP4 和 WebM （需要插件）
iOS 支持 MP4
Android 支持 MP4 和 WebM (2.3+)

为了支持以上提到的所有浏览器，你应该使用 source 元素，对视频文件同时采用 WebM 和 MP4 的格式，如：

<video controls>
   <source src="myVideo.mp4"type="video/mp4">
   <source src="myVideo.webm"type="video/webm">
</video>

二、MIME 类型 #

即使你针对浏览器采用了正确的媒体文件类型，但你的服务器还是有可能没有设置正确的MIME 类型。MIME 类型会告诉服务器如何处理不同的文件类型。如果你使用的是类似 Apache 的东西并且你对它有所了解，可以找到 .htaccess 文件，添加如下的音频支持：

AddType audio/ogg ogg AddType audio/ogg oga AddType audio/wav wav AddType audio/mpeg mp3 AddType audio/mp4 mp4 AddType audio/mp4 mpa

类似地添加视频支持：

AddType video/webm webm AddType video/mp4 mp4 AddType video/ogg ogg AddType video/ogg ogv

如果你没有权限访问服务器的 .htaccess 文件，那么你的控制板应该在某个地方能够允许你查看并添加 MIME 类型。

如果你使用 Windows 服务器，那你需要用 IIS 管理员或是通过 web.config 文件给 IIS 添加 MIME 类型。

三、文件转换 #

很可能你的客户给你发了一个媒体文件，你也从文件的后缀判断出它的 MIME 类型。不过，文件的编码不一定是正确的。比如，它可能是一个没有问题的 MP4 文件，但不知什么原因，有的浏览器就是不能正确播放。如果这种情况发生，你最好自己用像 Miro Video Converter 或 Media Converter 这样的工具来检查或重新编码以确保编码的正确。

此外，有些文件（特别是 MP4 文件）并不能总是正确播放，即使是支持该播放类型的浏览器。这是因为 MP4 （或是人们所知的 H.264）可以根据不同的 “profiles” 即配置文件来进行编码。如果有问题的文件是基于该浏览器不支持的 profile 进行编码的，很自然它不会正确播放。如果这种情况发生，尝试检查它是否是用 Baseline profile 进行编码的。采用 Baseline profile 比其它更先进的 profile 更容易得到支持。根据我的经验，使用像 Miro 一类的工具可以保证 MP4 文件可以在支持它的浏览器下正常工作。

如果你需要支持 Firefox 3.6 或更低的版本，你需要把你的音频文件转换为 Ogg 格式，并给 <audio> 元素添加额外的 <source> 源。

四、MP4 文件在完全下载完后才开始播放 #

通常 HTML5 的音视频播放器会允许媒体文件在完全下载之前就开始播放（只要有东西可放）。但有时候 MP4 文件只有等到整个文件下载完成才播放。这还是因为编码的问题。

有时候 MP4 文件在编码过程中将文件的索引（它包含了如时长等信息）放到了媒体文件的尾部而不是头部。索引中包含了浏览器进行渐进式播放所需要的元数据。如果索引信息在文件的尾部，浏览器在获得索引之前便无从处理。

如果你碰到这种情况，有个简单的处理方法，下载一个叫做 QTIndexSwapper 的工具，它可以把文件中的索引移动到文件头部并保存。

五、正确设置属性 #

这看起来是显而易见的，但奇怪的是，我在 Stack Overflow 上还是看到人们多次问到为什么当他们用一些（不再使用的）属性时，有些功能不起作用。一个典型的例子是给 <audio> 和 <video> 元素应用 autobuffer 属性，而这个属性早在从 2010 年 2 月起便被 preload 替代了。

人们看起来忘记了 HTML5 还没有最终定稿（当然大部分都已经相当稳定了），你读到的内容也许已经过时。最好是查一下 W3C HTML5 specification 以及 When Can I Use?（我什么时候可以用）来随时了解浏览器的支持情况。

六、Firefox 11+ 的音量控制 #

这是最近比较突出的一个问题。你可能已经注意到在 Firefox 11+ 下，音频播放器的音量控制消失了。当然，你可以设置静音，也可以用键盘的上下键来控制音量大小，但是音量控制的滑动条因为两个缺陷被移除了。我想它将来肯定会回来，但现在，万一你好奇想知道是怎么回事的时候，你好知道这不是你的错。当然，你也可以用 Media API 来制作你自己的控制部件。

七、需要插件 #

HTML5 在音频和视频方面的最大卖点之一便是你不需要任何第三方插件（如 Flash）便可以播放媒体文件，只要浏览器支持 HTML5。

不幸的是，在严格意义上，这并不正确。因为 Internet Explorer (9+) 和 Safari 分别需要系统中安装了 Microsoft Media Player 和 Apple QuickTime 才能正常播放 HTML5 的音频和视频文件。

八、视频和全屏显示 #

视频播放中，最常见的需求便是全屏播放，但在 HTML5 的功能特性中并未涉及到这一点。不过，一个独立的 Fullscreen API 正在讨论中，一部分主流浏览器会有实验性版本可用。

下列浏览器在一定程度上支持全屏 API，但要用到各自厂商的专用版本：

Chrome 19+
Firefox 12+
Safari 5.1+

还有一个 screenfull.js JavaScript polyfill 可以为一小部分浏览器提供全屏支持功能。

九、Internet Explorer 9+ 忽略了预览图 #

如果你的 HTML5 视频（用 poster 属性）定义了预览图 ( poster image)，你可能会奇怪 IE 9 会完全忽略它，除非你把 preload 的属性设置为 none。

IE 是最后一批支持 HTML5 的浏览器。我们已经适应了其它浏览器对于 poster 属性的处理：如果它已经定义，那么在用户开始播放视频之前会显示该图像。但 IE 9 并不是这么做的。它只有在完全没有内容可播放的情况下才会显示 poster 属性中包含的图像，所以当视频的第一帧被加载后（如果 preload 设置为默认值 auto 或 metadata），它就完全不理会 poster 里面的内容了。

这看来是 IE 在按自己的方式进行处理，和其它的浏览器不一致。IE 10 目前也有同样的现象。