跨桌面浏览器的HTML 5视频行为不一致

Question

我认识的有人要求我将其网页上的视频转换为使用FlowPlayer转换为使用原生HTML 5视频。

首先，我读到3种格式足以覆盖主要的桌面浏览器（Chrome，Firefox，IE和Opera）。从.avi开始，我使用Miro Video Converter获取.mp4，.ogg和.webm中的视频，如下所示：

为了进一步提高交叉兼容性，我决定使用VideoJS。

标记似乎也很简单：

<video id="example_video_1" class="video-js vjs-default-skin"
       controls preload="auto" width="500px" height="300px"
       poster="something.png">
   <source src="something.mp4" type="video/mp4" />
   <source src="something.webm" type="video/webm" />
   <source src="something.ogv" type="video/ogg" />
</video>

以下是我在浏览器上发现的内容（最新版本）：

• Google Chrome v30.0 ：没有任何问题。它选择了.mp4，这是三种格式中最高质量的。大。
• Opera v12.16 ：再次，有点令人惊讶，没问题。与Chrome相同的行为。
• IE 11 ：从这里开始都是下坡路。 IE 11等待整个视频完成缓冲，然后开始播放仅音频。所以这是音频+海报。
• Firefox v24.0 ：与IE不同，它不会等待整个视频缓冲，但与IE一样，它只播放音频而不播放视频。我在某处读过Firefox确实支持.mp4播放，只要它是Windows 7或更高版本的操作系统。我使用的是Windows 8。

然后我做了一些关于Apache的阅读。标题声明Firefox和IE都认为mp4只是与其他MIME类型相对应。即便如此，我还是在.htaccess添加了以下内容：

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

这没有什么区别。

然后我交换了source代码的顺序，以便.ogv视频排在第一位。现在，视频也在Firefox中播放，但.ogv的质量并不像.mp4那么高。

有问题的页面是：http://keyrecords.com/Artist%20Pages/haggard.html

我链接到上面的页面仅用于说明目的。在上面的页面上，.ogv首先出现，所以是的，我知道它在Firefox中播放。

所以我的问题是：我需要做些什么才能让Firefox和IE 10/11播放.mp4？可以安全地假设这些是运行Windows 7/8计算机的每个浏览器的最新版本。

---

编辑：MediaInfo向我提供了有关该文件的信息（它看起来是否正确？）：

Answer 1

我设法使用HandBrake converter解决了这个问题。

我将现有的.mp4给了它，并要求它给我一个新的.mp4，其中包含以下规格：

这个新的.mp4可以在所有4个浏览器中正常运行：）

关于Miro视频转换器转换文件的方式导致IE和Firefox只能看到音频轨道而不是视频轨道。通过使用HandBrake converter重新转换来纠正此问题。