Safari 和 Firefox 中的 HTML5 视频（mp4 和 ogv）问题 - 但 Chrome 都很好答案

【问题标题】：HTML5 video (mp4 and ogv) problems in Safari and Firefox - but Chrome is all goodSafari 和 Firefox 中的 HTML5 视频（mp4 和 ogv）问题 - 但 Chrome 都很好
【发布时间】：2011-02-08 06:19:48
【问题描述】：

我有以下代码：

<video width="640" height="360" controls id="video-player" poster="/movies/poster.png">
 <source src="/movies/640x360.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src="/movies/640x360.ogv" type='video/ogg; codecs="theora, vorbis"'> 
</video>

我正在使用 Rails（开发中使用 Mongrel，生产中使用 Mongrel+Apache）。
Chrome（Mac 和 Win）可以在本地或从我的生产服务器播放任一文件（由一个然后另一个源标签测试）。
Safari（Mac 和 Win）可以在本地正常播放 mp4 文件，但在生产环境中不能。
Firefox 3.6 无法在任一操作系统中播放视频。我只是在视频播放器区域的中间看到一个灰色的十字。
我已确保 Mongrel 和 Apache 在每种情况下都设置了正确的 MIME 类型。
从 Chrome 的结果来看，我知道我的视频文件或请求或传递文件的方式本身没有任何问题。

对于 Firefox，我查看了 https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox，它指的是一个“错误”事件和一个“错误”属性。似乎“错误”事件被直接抛出，并且当时没有错误属性。有谁知道如何诊断问题？

【问题讨论】：

尝试在 Firefox 中打开视频文件本身，看看它是否可以播放。
这可能是一个线索。无论我在本地尝试还是从生产服务器尝试，都会提示我下载文件。听起来可能像 MIME 问题..？但是我已经检查并检查了这些是为 .ogv 设置的。嗯。我将如何检查 Apache 是否注意 MIME 设置..？有什么线索吗？
刚刚在 Chrome 中尝试过（视频播放良好），如果我将 URL 放在位置栏中，这也会下载文件...
无论我在本地尝试还是在服务器上尝试都是如此......
要获取 MIME 类型，请执行 curl 并在几秒钟后停止它。它将打印出发送的标题。这总是有效的，而 Firebug 等不打印下载文件的 MIME。

标签： firefox video safari html ogg-theora

【解决方案1】：

.ogg 的 HTTP Content-Type 应为 application/ogg（.ogv 为 video/ogg），.mp4 应为 video/mp4。您可以使用the Web Sniffer 进行检查。

【讨论】：

啊哈。我使用 Web Sniffer 进行了检查，我得到的 Content-type 为 application/octet-stream。所以对于 Firefox 来说，它看起来像是一个 MIME 类型的问题。谢谢 - 我会看看我是否可以从这里修复它。不过，Safari 仍然存在问题...... :(
我的 Apache 配置错误，而 Firefox 问题确实是由于发送了错误的 MIME 类型。谢谢！
我现在也发现了我的 Safari 问题 - 另一个配置错误。所有问题都解决了！谢谢，伙计们。
@hsivonen 那么您生成的视频标签究竟是什么来解决 Firefox 和 safari 的问题？如果您不费心描述如何解决问题，为什么还要发布您解决问题的信息？
解决方案，如果您使用的是 Apache，则使用配置 Apache 来发送正确的 Mime 类型，或者简单地使用具有以下行的 .htaccess 文件：AddType video/ogg .ogv

【解决方案2】：

在您的 .htaccess 文件中添加这些行，它将适用于所有浏览器。对我有用。

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

如果您的站点中没有 .htaccess 文件，请创建一个新的 :) 我猜这很明显。

【讨论】：

遗憾的是它对我不起作用。我正在尝试 m4v 视频。你能像 .ogv .mp4 .webm 一样为他们推荐吗
@NJInamdar 在第二行使用AddType video/mp4 .mp4 .m4v
@AakilFernandes：感谢您的回复。但遗憾的是它没有奏效。 :(

【解决方案3】：

顺便说一句，.ogv 文件是视频，所以“video/ogg”，.ogg 文件是 Vorbis 音频，所以“audio/ogg”和 .oga 文件是一般的 Ogg 音频，所以也是“audio/ogg”。签入 Firefox 并工作。 “application/ogg”已被所有音频或视频使用弃用。见http://www.rfc-editor.org/rfc/rfc5334.txt

【讨论】：

【解决方案4】：

我在文档页面中看到了这样一个示例：

<source src="foo.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;">

也许您应该用&quot; 实体而不是实际引号将codec 信息括起来，并用引号而不是撇号将type 属性括起来。

您也可以尝试完全删除编解码器信息。

【讨论】：

谢谢，bogdanvursu。非常感激。不过，恐怕这两个建议都没有帮助。 :(
如果外引号是双引号，则需要将内引号转义为"。如果外引号是单引号，则不需要转义内双引号。

【解决方案5】：

只需删除内部引号 - 它们会使 Firefox 感到困惑。您可以只使用“video/ogg；codecs=theora,vorbis”。

此外，该标记在我的 Minefiled 3.7a5pre 中有效，因此如果您的 ogv 文件无法播放，则可能是假文件。你是如何创建它的？您可能想在 Firefox 中注册一个错误。

【讨论】：

内引号是必要的

【解决方案6】：

只需要改变一个字母:), 将 640x360.ogv 重命名为 640x360.ogg，它适用于所有 3 个浏览器。

【讨论】：

NOT TRUE IE 不支持 ogg