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

此演示是否在您的服务器上运行？这完全是你的标记，但有不同的演示电影：

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>test</title>
            <link rel="stylesheet" href="style.css" />
        </head>
        <body>
        <video class="video-background" preload="none" loop="loop" autoplay="autoplay">
           <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/mp4">
           <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
           Your browser does not support the video tag.
    </video>
        </body>
    </html>

在线演示：http://barbatti.de/demo.html

Answer 2

添加一个muted属性。（Chrome。可能有一些反广告政策。）

（还要确保您没有将<video>嵌套在<video>中，这会产生类似的结果。但我敢打赌，第一个原因是这样。）

HTML5视频（webm和MP4）显示空白屏幕，无法播放

2 个答案: