Как добавить кнопку наложения для каждого видео на странице, которое воспроизводит видео () при наведении курсора мыши?

КОНТЕКСТ:

  • На странице есть несколько видео
  • Каждое видео на странице просматривается при наведении курсора (готово)
  • При наведении курсора на видео кнопка наложения появляется для каждого видео (готово)
  • При наведении курсора на кнопку наложения предварительный просмотр видео продолжает воспроизводиться (или перезапускаться) --> не могу понять это

Я GetElementsByClassName , сохраняю в переменную, а затем перебираю все видео на странице и добавляю EventListeners с соответствующими функциями play() / pause() - > прекрасно работает для превью видео наведением мыши.

В тот момент, когда я навел указатель мыши на кнопку, видео останавливается, и я получаю ошибку "Uncaught TypeError: e.target.play не является функцией в HTMLDivElement.videoPlay" в моем консоль.

Когда я выполняю тест на своей консоли, я могу воспроизводить каждое видео, используя соответствующий индекс в следующем: buttons[0].nextElementSibling.play()

Но по какой-то причине я не могу заставить его работать в функции.

Любые идеи о том, как заставить его работать?

HTML

    <div>
        <!-- Video segment -->
        <div class="vid-segment">
            <a class="vid-btn" href="#">
                <i class="fa fa-shopping-cart"></i> 
                <span>Add to cart</span>
            </a>
            <video class="video-preview" witdh="352" height="198" muted>
                <source src="static/videos/video1.mov" type="video/mp4">
            </video>
        </div>
        <!-- Video segment end -->

        <!-- Video segment -->
        <div class="vid-segment">
            <a class="vid-btn" href="#">
                <i class="fa fa-shopping-cart"></i> 
                <span>Add to cart</span>
            </a>
            <video class="video-preview" witdh="352" height="198" muted>
                <source src="static/videos/video1.mov" type="video/mp4">
            </video>
        </div>
        <!-- Video segment end -->

JavaScript

function videoPlay() {
    loop = true;
    play()
    console.log("Video plays")
}


function videoStop() {
    currentTime = 0;
    pause()
    console.log("Video stops")
}


const videos = document.getElementsByClassName('.vid-segment')
const buttons = document.getElementsByClassName('.vid-btn')

for(var i = 0; i < videos.length; i++)   {
    videos[i].addEventListener('mouseover', videoPlay);
    videos[i].addEventListener('mouseout', videoStop);
    buttons[i].addEventListener('mouseover', function() {
        buttons[i].nextElementSibling.play()
    })  

}

javascript function nested-loops onhover
person Mate Valtr    schedule 12.06.2019    source источник
comment
Есть ли у вас причина использовать videoPlay и videoStop вместо добавления функциональности так же, как при наведении курсора мыши?   -  person Captain Squirrel    schedule 12.06.2019
comment
@CaptainSquirrel Из соображений удобочитаемости и повторного использования мне нравится держать его отдельно. Но да, в этом случае его можно было бы назвать сразу. Я бы, вероятно, сделал рефакторинг кода, как только заставлю его работать.   -  person Mate Valtr    schedule 12.06.2019

Ответы (1)


arrow_upward
1
arrow_downward

Я понял! Ответ таков:

const videos = document.querySelectorAll('.video-preview')
const buttons = document.querySelectorAll('.vid-btn')

for (let i = 0; i < videos.length; i++) {
    videos[i].addEventListener('mouseover', function() {
      console.log('play')
      videos[i].play()
    })
    videos[i].addEventListener('mouseout', function() {
      console.log('pause')
      videos[i].pause()
      videos[i].currentTime = 0;
    })
    buttons[i].addEventListener('mouseover', function() {
        console.log('button hover')
        videos[i].play();
    })
    buttons[i].addEventListener('mouseout', function() {
        console.log('button hover')
        videos[i].pause()
        videos[i].currentTime = 0;
    })
  }
person Mate Valtr    schedule 12.06.2019