HTML5 视频(webm 和 MP4)显示空白屏幕并且无法播放

Question

我已经用谷歌搜索了一个小时，但我要么很糟糕，要么这不是一个常见问题。

这是我的视频标签:

<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" 。

Answer 1

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

(还要确保您没有将 <video> 嵌套在 <video> 中，这具有类似的结果。但我打赌第一个原因。)