2

这是我的代码：

<audio controls preload="auto">
   <source src="audio/batcat.mp3" />
   Your browser doesn't play MP3s. <a href="audio/batcat.mp3">Download the audio instead.</a>
</audio>

在 Chrome 和 IE9 中，浏览器显示本机音频播放器。

在 Firefox 中，我希望它显示后备文本和链接。相反，它显示一个丑陋的灰色框，中间有一个 X，并且不显示后备内容。

这是一个 Firefox 错误，还是我做错了什么？

浏览器制造商实际上是在说包括所有可能的格式，还是根本不使用该元素。这似乎有点苛刻。

编辑 上述问题的答案显然是“是”。我只能说:(

4

3 回答 3

1

正如您所说，Firefox 确实应该回退到音频文件的链接。它遍历源列表，如果找不到它可以播放的，它应该继续。

也许尝试将类型 aatribute 添加到源声明以帮助浏览器确定它无法播放它？

<source src="audio/batcat.mp3" type="audio/mp3">

此外，如果您有一个示例页面，以便我们可以看到它的实际效果（或者视情况而定！），那将很有帮助。

编辑 我自己测试过，确实你是对的，它根本不起作用。多么奇怪，我早就料到了。让它工作的唯一方法是添加一个可以播放的带有 OGG 文件的源。

我建议你使用 Modernizr 之类的东西来检查它是否可以播放 MP3。

于 2011-04-07T16:05:42.840 回答
1

你是对的。这是因为每个浏览器支持不同的“编解码器”。最初，HTML5 将只有一个编解码器，但浏览器供应商无法就哪一个（专利保护与开源）达成一致，因此放弃了这一要求。

例如，对于视频，IE 和 Safari 支持 H264 (MP4)、Chrome、FF 和 Opera WebM/Ogg。为确保它适用于所有浏览器，您可以提供多个源元素并对视频进行三次编码。首先是 Mp4，其次是 WebM 或 Ogg（支持视频的浏览器会尝试每个源元素，直到找到可以播放的元素。注意：目前 iPad 上有一个“错误”，它只能播放第一个源元素）

你甚至可以为你的后备嵌入一个 Flash 对象，这样你的视频也可以在旧版本的 IE (<9) 中运行。你最终会得到这样的东西：

<!—Multiple videos with alternate Flash content-->
<video controls>
 <source src="rocpoc.mp4">
 <source src="rocpoc.ogv"> 
    <object data="videoplayer.swf" type="application/x-shockwave-flash">  
      <param name="movie" value="rocpoc.swf"/>  
    </object>  
    A movie by Rocky Lubbers
</video>

如果您想在浏览器无法播放 MP3 文件的情况下显示文件链接，您可以使用一点 JavaScript 代码来测试浏览器是否可以处理 MP3 格式并显示文件链接而不是视频. 要调用的 JavaScript 方法是 canPlayType。

//Checking for browser support
//canPlayType returns null, maybe, or probably (the best)
//You can check if they are supported in navigator.plugins

var support = videoElement.canPlayType('video/some-format;codecs="some-codec"');

或者，（我认为仅适用于视频）您可以使用 vid.ly (http://m.vid.ly/user/) 之类的服务，从云端提供正确的文件。

于 2011-04-08T07:04:55.187 回答
1

视频也是如此！如果您只嵌入 MP4 文件，Firefox 不会跳转到回退，而是呈现灰色的“我无法播放此格式”框。您必须使用 JavaScript 来检测浏览器能够播放哪些编解码器。

http://praegnanz.de/html5video/firefoxtest

于 2011-07-02T07:28:49.493 回答