html5 视频标签 - firefox 和 chrome 中视频质量不同

Question

我有以下代码:

  <div class="span4">

  <video poster="assets/img/poster.jpg" controls="controls" width="420" height="420">
    <source src="assets/videos/152638831.webm" type="video/webm"  />
    <source src="assets/videos/152638831.mp4" type="video/mp4"  />
  </video>

</div>   

该视频在 Firefox 和 chrome 中均有效，但在 Chrome 中非常粗糙。我不认为这是我的视频的问题，因为当我导航到 http://www.w3schools.com/html/html5_video.asp 时使用 Chrome，“DOM 方法和属性”部分下的视频也出现颗粒状。当我说有颗粒感时，我的意思是，我看到视频中散布着黄色、绿色、蓝色和红色的线条/破折号。

你能告诉我我做错了什么吗？

此外，拥有多个源标签的想法是否取决于浏览器，它会选择要播放的文件？就我而言，我知道 firefox 不支持 mp4...我测试过它。但上面的代码在 firefox 中有效。所以我假设它正在播放文件的 webm 版本。它是否正确？

谢谢。

Answer 1

首先，Chrome 应该能够读取 mp4，所以您可能没有使用 h264 压缩。你应该检查一下。

其次，您必须包含视频的压缩 ogv 和 webm 版本。目前每个浏览器都支持不同的视频格式，因此我们必须将它们全部包含在内，以免遗漏任何一个。

这是浏览器视频格式支持的便捷图表: http://www.longtailvideo.com/html5/#media_formats

也不要忘记 Flash 回退，以防万一使用不支持 html5 视频标签的恐龙浏览器的人也需要观看视频。

这是视频标签支持的便捷图表: http://caniuse.com/video

让我们知道您的进展情况。