Firefox 不会播放带有 HTML5 的 .webm 和 .ogv 视频答案

【问题标题】：Firefox won't play .webm and .ogv videos with HTML5Firefox 不会播放带有 HTML5 的 .webm 和 .ogv 视频
【发布时间】：2013-02-11 22:56:53
【问题描述】：

我为我的网站准备了 3 种视频格式：

/assets/video/background-purple.ogg
/assets/video/background-purple.webm
/assets/video/background-purple.mp4

在网站上http://tekhy.net/

我使用

<video webkit-playsinline autoplay="autoplay" loop="true" poster="/assets/video/transparent.png">
    <source src="/assets/video/background-purple.ogg" type="video/ogg">
    <source src="/assets/video/background-purple.mp4" type="video/mp4">
    <source src="/assets/video/background-purple.webm" type="video/webm">
</video>

我已将视频的正确 mimetype 设置为 .htaccess：

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

在 Google Chrome 和 Chromium 中都运行良好，在 Firefox Mobile 上也运行良好。在 Firefox Nightly 21.0a 上运行良好。但是在 Elementary OS Luna 上的 Firefox 18.0.1 上它不会工作。

Firebug 告诉我它无法解码 webm 和 ogg/ogv 媒体（Firefox atm 不支持 mp4）。

我也尝试过 background-purple.ogv type="video/ogv" 但问题仍然存在。

我的 webm 视频是：

Google/On2 的 VP8 视频 (VP80)
平面 4:2:0 YUV

目前我真的不知道如何解决这个问题。有什么建议吗？

【问题讨论】：

标签： html firefox video ogg webm

【解决方案1】：

我相信这个问题与一直到 FF 20 的错误有关，其中许多流行的 webm 编码器都插入了负时间戳，而 firefox 在下载整个 webm 文件之前无法播放视频： https://bugzilla.mozilla.org/show_bug.cgi?id=868797

cmets 中提到了该修复：

ffmpeg -i input.webm -codec copy -avoid_negative_ts 1 output.webm

重要的编码标志是 -avoid_negative_ts 1

【讨论】：

【解决方案2】：

看来我找到了解决办法：

我将我的 ogv 编解码器从 VP8 切换到 Theora，现在 Firefox 可以正确播放视频了。

我使用此代码作为源代码：

<source src="/assets/video/background-purple.ogv" type="video/ogg">

MIME 类型是：

AddType video/ogg .ogv .ogg

编解码器是：

Xiph.org's Theora Video (theo)

我猜它也适用于 .webm，但我还没有测试过。

【讨论】：

在 Firefox 20 及以下版本中存在一个错误 (bugzilla.mozilla.org/show_bug.cgi?id=868797)，它无法在下载整个文件之前播放带有负时间戳的 webm 文件。修复方法是使用 ffmpeg 标志：-avoid_negative_ts 1，如错误页面所述。这适用于我使用 Miro Video Converter 编码的 webm 文件，并且可能也会解决您的问题。

【解决方案3】：

Chrome 的 HTML5 视频有点问题。按照 Fez 的建议进行操作，或者直接使用 .mp4 和 .webm。 WEBM 在 Chrome 中更稳定，您只需要这两种格式即可兼容浏览器。这也节省了您渲染视频的时间！

【讨论】：