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

Question

所以我在 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

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

Answer 1

这里是关于如何将图像添加到叠加层中并在有人观看视频后显示的基本思路，希望您也在寻找同样的东西

.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>

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

Changing video source to image source when hover/ mouseover html

html

jquery

flexbox

src

onmouseover