Safari和Firefox中HTML5视频（mp4和ogv）存在问题，但Chrome没问题。

Question

我有以下代码:

<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，其中提到了“错误”事件和“错误”属性。似乎“错误”事件会立即抛出，并且此时没有错误属性。有人知道如何诊断这个问题吗？

- qryss

---

刚试了一下Chrome浏览器（视频播放良好），如果我在地址栏中输入URL，也会下载文件... - qryss

无论我是在本地尝试还是在服务器上尝试，这都是真实的... - qryss

要获取 MIME 类型，请执行以下命令：curl <url>然后在几秒钟后停止它。 它将打印出发送的标头。 这始终有效，而 Firebug 等无法打印下载文件的 MIME。 - Nicholas Wilson

那么，根据答案，可以得出这样一个公正的结论：Firefox和Safari更加重视在头部发送的MIME类型，而Chrome则更注重请求所处的上下文。 - CurtainDog

为了使用curl获取MIME类型，我必须添加详细输出开关。 所以，curl -v [url] > tmp.txt。 - Ian Dunn

Answer 1

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

- hsivonen

---

啊哈。我使用Web Sniffer检查了一下，发现Content-type是application/octet-stream。所以至少对于Firefox来说，这看起来是一个MIME类型的问题。谢谢 - 我会尝试从这里解决它。不过Safari还存在问题... :( - qryss

我遇到了Apache配置问题，而Firefox问题实际上是由于错误的MIME类型被发送造成的。 - qryss

我现在也找到了我的Safari问题 - 另一个错误的配置。所有问题都已解决！谢谢，伙计们。 - qryss

@hsivonen，你到底采用了什么样的视频标签来解决Firefox和Safari的问题？如果你不说明如何解决问题，那么发布解决方案有什么意义呢？ - user600357

如果您正在使用Apache，则解决方案是配置Apache以发送正确的Mime类型，或者只需使用以下行的.htaccess文件：AddType video/ogg .ogv - Nathan Rambeck

解决了我的问题。非常感谢。 - Chris GW Green

Answer 2

将以下这些代码添加到你的 .htaccess 文件中，它可以适用于所有的浏览器。对我来说是有效的。

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

如果你的网站上没有 .htaccess 文件，那就创建一个新的吧 :) 我想这很显然。

- Salman Aslam

---

很遗憾，对我来说它没有起作用。我正在尝试使用m4v视频格式。您能否为它们提供类似于.ogv .mp4 .webm的建议？ - Nagama Inamdar

@NJInamdarдЅїз”ЁAddType video/mp4 .mp4 .m4v作为第二行。 - A F

@AakilFernandes：谢谢回复，但不幸的是它没有起作用。:( - Nagama Inamdar

Answer 3

顺便提一下，.ogv文件是视频格式，因此应使用“video/ogg”类型；.ogg文件是Vorbis音频格式，所以应使用“audio/ogg”类型；而.oga文件是通用Ogg音频格式，同样应使用“audio/ogg”类型。在Firefox中可行。对于所有音频或视频用途，“application/ogg”已被废弃。请参阅http://www.rfc-editor.org/rfc/rfc5334.txt。

- Silvia

Answer 4

我在文档页面上看到了这样的一个例子：

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

也许你应该用"实体代替实际引号来包含codec信息，而用引号代替撇号来包含type属性。

你也可以尝试删除codec信息。

- bogdan

---

谢谢，bogdanvursu。非常感谢。不过很遗憾，两个建议都没有帮到我。 - qryss

如果外部引号是双引号，您需要将内部引号转义为 "。如果外部引号是单引号，则不需要转义内部双引号。 - hsivonen

Answer 5

只需删除内部引号即可 - 它们会使Firefox混淆。您可以使用"video/ogg; codecs=theora,vorbis"。

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

- Silvia

---

内部引号是必需的。 - HandiworkNYC.com

Answer 6

只需要改一个字母：），将640x360.ogv重命名为640x360.ogg，就可以在所有三个浏览器上正常工作。

- Fei

---

不正确，IE不支持ogg格式。 - John