Question

我正在尝试将全屏背景视频添加到我的网站。我也想添加一个封面图片，因为在移动设备上视频不播放（因为没有用户交互，浏览器就不会加载它）。

所以我添加了视频，正确定位，然后我添加了图像。图像是视频的第一帧。问题在于：视频和图像的位置不一样。因此，首先用户看到封面图像，然后片刻开始播放视频，但是有一个跳跃，因为视频的位置与图像不同。请注意，您可能需要调整浏览器窗口的大小以查看问题。在1920x1080分辨率下它几乎不可见。

如何正确定位视频和封面图片？

请参阅下面的演示代码。视频在2秒后开始播放，因此您可以看到图像，然后是视频。

以下是demo video，您可以在其中看到图片，然后是暂停的视频，cover image和video。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
        html,
        body,
        div,
        video {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        .video {
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 1;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .panel-cover {
            position: fixed;
            background-image: url(cover.jpg);
            z-index: 2;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <video id="background-video" class="video" muted loop preload="auto">
        <source src="Palm_Trees.mp4" type="video/mp4">
    </video>
    <div class="panel-cover"></div>
    <script>
        (function () {
            function playVideo(video) {
            setTimeout (function () {
                video.play();
                document.querySelector(".panel-cover").style.background = 'none';
                }, 2000);
            }

            window.onload = function () {
                var video = document.querySelector("#background-video");
                video.addEventListener("canplay", function () {
                    playVideo(video);
                }, false);

                if (video.readyState > 3) {
                    playVideo(video);
                }
            }
        })();
    </script>
</body>
</html>

Answer 1

我在我的某个网站上工作，所以只需粘贴完整的代码，您就可以根据自己的需要进行调整。

<div class="bgBox">
    <div class="bgBox__cover cover_60"></div>
    <div class="bgBox__holder" style="background-image: url('PATH/TO/IMAGE/COVER');">

        <video loop="" muted="" autoplay="" class="bgBox__video">
            <source type="video/mp4" src="PATH/TO/VIDEO">
        </video>

    </div>
</div>

和CSS：

.bgBox {
    position: fixed;
    z-index: -1;
}

.bgBox__cover {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    margin: 0;
    padding: 0;
}

.cover_60 {
    background-color: rgba(0,0,0,.6);
}

.bgBox__holder {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.bgBox__video {
    -webkit-transition: opacity 1s ease;
    -khtml-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -ms-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
    filter: alpha(opacity=100);
    -ms-filter: "alpha(Opacity=100)";
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    -o-opacity: 1;
    opacity: 1;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
   transform: translate(-50%,-50%);
}

我希望有所帮助。

图像需要与视频具有相同的宽高比。

Answer 2

我最终使用了一个简单的解决方法：慢慢淡出封面图片：

.panel-cover {
    ...
    transition: opacity 1s;
}

document.querySelector(".panel-cover").style.opacity = 0;

Answer 3

问题实际上是视频的宽高比。它不是1：1，而是16：9。

所以：

删除了Javascript，添加了autoplay属性。该视频是封面图片div的子节点。如果视频开始播放，封面图像将不可见，如果没有，则封面图像将可见。
视频和封面图片的宽度/高度。这取决于视频和浏览器窗口的宽高比。因此，一旦您需要width: 100%; height: auto;，在其他情况下，您需要相反：width: auto; height: 100%;

因此我添加了相应的@media查询：

@media (min-aspect-ratio: 16/9)
@media (max-aspect-ratio: 16/9)

如果你有一个简单的1：1视频，那么也许没关系。

最终解决方案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
        html,
        body,
        div,
        video {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        .video {
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: -100;
            min-width: 100%;
            min-height: 100%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .video-cover {
            position: fixed;
            z-index: -200;
            min-width: 100%;
            min-height: 100%;
            width: 100%;
            height: 100%;
            background-image: url(cover.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        @media (min-aspect-ratio: 16/9) {
            .video {
                width: 100%;
                height: auto;
            }
        }

        @media (max-aspect-ratio: 16/9) {
            .video {
                width: auto;
                height: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="video-cover">
        <video class="video" muted loop autoplay preload="auto">
            <source src="Palm_Trees.mp4" type="video/mp4">
        </video>
    </div>
</body>
</html>

带有封面图片的全屏背景HTML5视频

3 个答案: