视频封⾯图⽚修改html代码，全屏幕背景HTML5视频与封⾯图
⽚
我想将全屏幕背景视频添加到我的⽹站。我也想添加封⾯图⽚，因为在移动设备上，视频只是不播放(因为没有⽤户交互，浏览器不会加载它)。全屏幕背景HTML5视频与封⾯图⽚
所以我添加了视频，定位正确，然后我添加了图像。该图像是视频的第⼀帧。问题在于：视频和图像的位置不⼀样。因此，⾸先⽤户看到封⾯图像，然后⽚刻开始播放，但有⼀个跳跃，因为视频与图像位置不同。请注意，您可能需要调整浏览器窗⼝的⼤⼩以查看问题。它在1920x1080分辨率下⼏乎看不见。
如何正确定位视频和封⾯图像？
请参阅下⾯的演⽰代码。视频在2秒后开始播放，所以您可以看到图像，然后看到视频。
html,
body,
div,
如何查看html代码
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);
}
var video = document.querySelector("#background-video"); video.addEventListener("canplay", function() {
playVideo(video);
}, false);
if (adyState > 3) {
playVideo(video);
}
}
})();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。