带封面图片的全屏背景 HTML5 视频
Posted
技术标签:
【中文标题】带封面图片的全屏背景 HTML5 视频【英文标题】：Full screen background HTML5 video with cover image 【发布时间】：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>
【问题讨论】：
【参考方案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>
【讨论】：
以上是关于带封面图片的全屏背景 HTML5 视频的主要内容，如果未能解决你的问题，请参考以下文章
css Cordova Chrome Apps中的全屏背景，使用背景大小：封面