页面加载时视频有奇怪的行为答案

【问题标题】：Videos have a strange behavior when page load页面加载时视频有奇怪的行为
【发布时间】：2014-04-23 09:09:45
【问题描述】：

我在网站上遇到问题。
当我到达此 URL http://www.diamir.com/en/product/diamir-vipec-12/ 时，在页面加载时，视频无法正确加载。当我点击播放按钮时，视频仍然是黑色的，只有一段时间后才变得清晰。这真是一种奇怪的行为。不知道是解码器的问题还是其他的问题。

该网站使用 Google 的 PageSpeed 服务 进行了优化。
编解码器： AVC (Baseline@L1.3)

这里是 HTML 源代码：

<video controls class="img-responsive">
   <source src="http://a3.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_x264.mp4" type="video/mp4">
   <source src="http://a1.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_VP8.webm" type="video/webm">
</video>

有人遇到过同样的问题吗？

【问题讨论】：

标签： html5-video codec

【解决方案1】：

您需要解决/考虑以下几点：

您的视频在 Chrome 中播放良好，但 IE 显示一条错误消息，而 firefox 无法读取它们。
您的 mp4 在 MDAT 框之后有 MOOV 框，这意味着您的 mp4 未准备好进行网络传输。此问题描述为here

修复建议：

使用Handbrake、ffmpeg 或 MP4Box 准备您的 MP4 文件以进行网络交付（也称为快速启动）
在您的 HTML5 视频标签中使用设置为“自动”的预加载属性，以便在页面加载后点击时更快地播放（如果您这样做，请不要在同一页面上加载太多视频，否则您的最终用户将遭受网络拥塞）
为您的 HTML5 视频标签设置宽度和高度，否则它将缩放到视频文件的分辨率。您可能希望对此进行控制，尤其是对于响应式设计。

您的视频没有音轨。这对于 HTML5 视频播放应该不是问题，但如果需要，请记住这一点。我见过需要添加静音音轨以使其在所有设备上工作的情况（尤其是对于 HTML5 视频的异国情调后备）。

您可以在HTML5 video 上阅读更多信息。我建议您也仔细检查“MIME Types Rear They Ugly Head”一节。

【讨论】：