视频封面图片修改html代码,全屏幕背景HTML5视频与封面图片

视频封面图片修改html代码,全屏幕背景HTML5视频与封面图片

我想将全屏幕背景视频添加到我的网站。我也想添加封面图片，因为在移动设备上，视频只是不播放(因为没有用户交互，浏览器不会加载它)。全屏幕背景HTML5视频与封面图片

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

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

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

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

}

(function() {

function playVideo(video) {

setTimeout (function() {

video.play();

document.querySelector(".panel-cover").style.background = 'none';

}, 2000);

}