在页面加载时显示海报图像而不是视频

Question

拥有一个在屏幕上播放视频的图像。转到mouseout上的海报图像。唯一的问题是，当页面第一次加载时，它不会显示海报图像，而是显示视频(不播放，只是视频开始屏幕的图像(。其他一切都很好，我只想在页面第一次加载时显示海报图像。我的剧本不是最好的，所以不确定还能尝试什么。感谢您的任何帮助。

<video poster="myimage.png" src=myvideo.mp4 class="myvideo" controls="" loop="" 
width="auto" height="300" alt="" ></video>

$(document).ready(function() {
$(".myvideo").on("mouseover", function(event) {
$(this).get(0).play();

}).on('mouseout', function(event) {
this.load();
});
})
{
let d = new Date();
text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]n`.replace(/(:|^)(dD)/, '$10$2');
text.scrollTop = text.scrollHeight;
}

Answer 1

您可以在视频标签上设置preload="none"，以避免立即加载视频，并在样式中为图像设置object-fit: cover，以覆盖视频。