悬停/鼠标悬停html时将视频源更改为图像源

问题描述

所以我在 flexbox 中有视频缩略图。当鼠标悬停在视频上时，如何更改它以显示图像？ 我可以将视频更改为视频，将图像更改为图像，但是我不确定如何将源从视频更改为图像，而且由于它在 flexbox 中，我无法在视频下隐藏图像

<video autoplay loop muted src="./video.mp4" type="video/mp4 id="video""  
             onmouseout="this.src='./video.mp4'"
             onmouseover="this.src='./image.png'">  </video>

我也尝试过用 jQuery 来替换整个视频源块，但我认为我做对了

$("#video").mouseover( function () {
    var $image =  $("img").attr('src','./image.png'); 
    $(this).replaceWith($image );
     });

https://codepen.io/saltykiam/pen/abmGbWK

编辑：如何在视频上叠加图像

解决方法

这里是如何将图像添加到叠加层中并在有人播放视频时显示的基本思想，希望您也能找到相同的内容

.videoWraper{
  position:relative;
  display:block;
}
.img-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity:0;
}
video#video {
    width: 100%;
}
.videoWraper:hover .img-overlay{
opacity:1;
}

<div class="videoWraper">
<video autoplay loop muted src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" id="video">  </video>
<img class="img-overlay" src="https://picsum.photos/200">
</div>