Question

我在网站上遇到问题当我到达此网址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>

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

Answer 1

您需要修理/考虑以下几项事项：

您的视频在Chrome中播放效果很好，但IE显示错误消息，而Firefox则无法读取它们。
您的mp4在MDAT框之后有MOOV框，这意味着您的mp4没有为网络传送做好准备。此问题已在here

修复建议：

使用Handbrake，ffmpeg或MP4Box准备用于网络投放的MP4文件（又名快速入门）
在HTML5视频代码中使用preload attritube设置为“auto”，以便在页面加载后更快地播放（如果这样做不会在同一页面上加载太多视频，或者您的最终用户将遭受网络拥塞）< / LI>
为HTML5视频标记设置宽度高度，否则将扩展为视频文件的分辨率。您可能希望对此进行控制，尤其是响应式设计。

您的视频没有音轨。这应该不是HTML5视频播放的问题，但如果需要，请保持这种想法。我见过你需要添加一个无声音频轨道以使其适用于所有设备的情况（特别是对于HTML5视频的异国情调后备）。

您可以在此处阅读HTML5 video上的更多信息。我建议你仔细检查一下名为“MIME类型后面的丑陋头部”的部分。

页面加载时，视频有一种奇怪的行为

1 个答案: