HTML5视频（包括webm和MP4格式）出现白屏，无法播放。

Question

我已经Google了一个小时，但我要么不擅长搜索，要么这不是一个常见的问题。

这是我的视频标签：

<video class="video-background" preload="none" loop="loop" autoplay="autoplay">
    <source src="/resource/video/ripples.webm" type="video/mp4">
    <source src="/resource/video/ripples.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

无论我以什么顺序排列它们，webm 和 mp4 都无法加载，它们只会显示一个空白的白屏。而且，我也没有从服务器得到404错误，所以视频应该已经从服务器上传送了？ 感谢任何意见。

编辑：我们去掉了 preload="none" 属性，现在视频的第一帧出现了，但是出于某种原因它不会自动播放剩下的视频（尽管在元素上有 autoplay="autoplay"）。

- user3541693

---

标记似乎是正确的。如果我使用WebM在Chrome中进行测试http://jsfiddle.net/35cRY/。我的猜测是您的视频有问题。您是如何转换它的？我有很好的经验：http://www.online-convert.com/ - Anatol

谢谢！我会尝试那个网站。成功或失败后会更新 :) - user3541693

没起作用 - 结果一样。 - user3541693

你能提供一个URL吗？ - Anatol

Answer 1

添加muted属性。（Chrome浏览器可能会有一些反广告政策。）

（同时请确保您没有将<video>嵌套在<video>中，因为这会有类似的结果。但我认为第一个原因更有可能。）

- Fanky

---

谢谢，我也遇到了同样的问题，加上静音后问题得以解决。最奇怪的是，在我们的CMS预览中视频可以播放，但在实际网站上却无法播放。 - Fireflight

Answer 2

我遇到了一个非常类似的问题，最终解决方案是因为我提供了一个带有“px”的字符串，而它期望的是宽度和高度的数字。花了我很长时间才发现这个错误，结果只显示了一个空白屏幕。

// BLANK WHITE SCREEN + HAIR PULLING
<video width="200px" height="300px" controls>
   <source...

---

// WORKING VIDEO PLAYER
<video width="200" height="300" controls>
   <source...

希望这能帮助到其他人。

- isaacdre