Изменение источника видео на источник изображения при наведении курсора мыши на html

#html #jquery #flexbox #src #onmouseover

#HTML #jquery ( jquery ) #гибкий ящик #Src #onmouseover

Вопрос:

Итак, у меня есть миниатюры видео в 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

редактировать: как я могу наложить изображение на видео

1. Возможно, добавьте оболочку вокруг тега video / img и переключайтесь между ними при наведении курсора мыши.

2. Вы хотите отобразить изображение в виде наложения или просто заменить тег video на img?

3. @OnkarSingh показывает наложение изображения, поэтому при остановке наведения изображение снова превращается в видео

4. попробуйте использовать атрибут «poster» элемента video. Ссылка

Ответ №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>