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

<div id="media-container">
  <video src="video.mp4" autoplay muted></video>
  <img src="image.jpg" alt="Image">
</div>

#media-container {
  position: relative;
  width: 500px;
  height: 300px;
}

#media-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#media-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

var mediaContainer = document.getElementById('media-container');
var video = mediaContainer.querySelector('video');
var image = mediaContainer.querySelector('img');

mediaContainer.addEventListener('mouseover', function() {
  video.pause();
  video.style.display = 'none';
  image.style.display = 'block';
});

mediaContainer.addEventListener('mouseout', function() {
  video.play();
  video.style.display = 'block';
  image.style.display = 'none';
});