Воспроизведение видео при наведении

Question

<div class="video-grid-one">
    <video width="400" controls>
        <source src="mov_bbb.mp4" type="video/mp4">
        <source src="mov_bbb.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
      </video>
</div>


<div class="video-grid-two">
    <video width="400" controls>
        <source src="mov_bbb.mp4" type="video/mp4">
        <source src="mov_bbb.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
      </video>
</div>

<div class="button"> Video one </div>
<div class="button"> Video two </div>

.button {
    height:45px;
    line-height: 45px;
    background: #000;
    color: #fff;
    padding: 0 20px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    cursor: pointer;
}

Привет, ребята, я создаю слайдер с миниатюрой. И в этом есть некоторая настройка. Иногда, когда мы наводим курсор на изображение карусели, ползунок должен автоматически воспроизводить видео, связанное с тем изображением, которое мы наводим. Здесь я прикрепил что-то выше, когда мы наводим курсор на кнопку, видео должно воспроизводиться автоматически. Ребята, можете ли вы помочь мне с этим? Спасибо :)

Нет возможностей для этого?

Answer 1

<video id="video-one" width="400" controls>
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
</video>

добавьте id к вашему видео тегу и включите jquery в ваш html файл добавить скрипт, а также добавить идентификатор к вашей кнопке div

<div class="button" id="hover-one"> Video one </div>

<script>
$("#hover-one").hover(function(){
    $("#video-one")[0].play();
});
</script>

Теперь добавьте этот скрипт, и он будет воспроизводить видео при наведении курсора на кнопку div