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

【问题标题】：Full screen background HTML5 video with cover image带封面图片的全屏背景 HTML5 视频
【发布时间】：2017-10-23 23:27:56
【问题描述】：

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

所以我添加了视频，将其正确定位，然后添加了图像。图像是视频的第一帧。问题来了：视频和图像的位置不一样。所以首先用户看到封面图像，然后过了一会儿视频开始播放，但有一个跳跃，因为视频与图像的位置不同。请注意，您可能需要调整浏览器窗口的大小才能看到问题。在 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>

【问题讨论】：

标签： css html html5-video

【解决方案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%);
}

希望对你有帮助。

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

【讨论】：

很遗憾这不能正常工作，请看这个演示视频：youtube.com/watch?v=dAWktz9doy4。第一个是封面图片，然后您会看到视频的第一帧。显然不一样，有“跳”。
这很尴尬。这是视频和图像s000.tinyupload.com/index.php?file_id=37298396476495665943 的完整示例，所有代码都在我上面粘贴的代码中 - 所以这可能是图像或视频纵横比或类似问题的问题。
好的，谢谢！不幸的是，它不适用于我的视频：youtube.com/watch?v=3hbCeILh_1U。首先我说明问题：你看到“跳跃”了吗？然后我显示图像和视频，因为我看到它们是相同的。你的视频的宽高比是 4:3 我想，我的是 16:9？也许这就是问题所在......

【解决方案2】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：