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中，它非常颗粒感。我不认为这是我的视频的问题，因为当我使用Chrome导航到http://www.w3schools.com/html/html5_video.asp时，“DOM方法和属性”部分下的视频也显得粗糙。当我说颗粒状时，我的意思是，我看到黄色，绿色，蓝色和红色的线条/破折号溅在视频上。

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

此外，有多个源标签背后的想法取决于浏览器，它将选择播放哪个文件？在我的情况下，我知道firefox不支持mp4 ...我测试了它。但上面的代码在firefox中有效。所以我假设它正在播放该文件的webm版本。它是否正确？

感谢。

Answer 1

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

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

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

也不要忘记闪回后退，只是想让不支持html5视频标签的恐龙浏览器也需要看到该视频。

以下是视频标记支持的便捷图表： http://caniuse.com/video

告诉我们你是如何上场的。

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

1 个答案: