HTML5视频(webm和MP4)都显示空白屏幕，无法播放 [英] HTML5 Video (both webm and MP4) are showing a blank white screen and aren't playing

问题描述

我已经进行了一个小时的谷歌搜索，但是我还是很烂，或者这不是一个普遍的问题.

I've done an hour of googling but I either suck at it, or it isn't a common issue.

这是我的视频标签:

<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，因此视频 应该从服务器上掉下来了吗?

No matter what order I place them in, neither the webm nor the mp4 will load, they just show a blank white screen. I'm also not getting a 404 from the server so the videos should be coming down from the server?

感谢任何输入

我们删除了 preload ="none" 属性，现在显示了视频的第一帧，但不会自动播放其余部分出于某种原因(尽管元素上具有 autoplay ="autoplay" .

We removed the preload="none" attribute and now the first frame of the video shows up, but it doesn't auto-play the rest of the video for some reason (despite having autoplay="autoplay" on the element.

推荐答案

添加 muted 属性.(Chrome.可能有一些反广告政策.)

Add a muted attribute. (Chrome. Possibly some anti-ad policy.)

(还请确保您没有将< video> 嵌套在< video> 中，这会产生类似的结果.但是我打赌第一个原因.)

(Also make sure you didn't nest <video> in <video>, which has similar outcome. But I bet on the first cause.)

这篇关于HTML5视频(webm和MP4)都显示空白屏幕，无法播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！