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

问题描述 投票:4回答:2

我做了一个小时的谷歌搜索,但我要么吮吸它,要么它不是一个常见的问题。

这是我的视频标签:

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

无论我把它们放在什么顺序,webmmp4都不会加载,它们只是显示一个空白的白色屏幕。我也没有从服务器上获得404,所以视频应该从服务器上下来?

感谢任何输入

编辑:我们删除了preload="none"属性,现在视频的第一帧显示,但由于某种原因,它不会自动播放视频的其余部分(尽管元素上有autoplay="autoplay")。

html5 html5-video mp4 webm
2个回答
0
投票

这个演示是在您的服务器上运行的?这完全是你的标记,但有不同的演示电影:

    <!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


0
投票

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

(还要确保你没有在<video>中嵌入<video>,这有类似的结果。但我打赌第一个原因。)

© www.soinside.com 2019 - 2024. All rights reserved.