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

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

0 голосов
/ 12 июня 2019

КОНТЕКСТ:

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

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

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

Когда я делаю тест на своей консоли, я могу воспроизводить каждое видео, используя соответствующий индекс в следующем: кнопки [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()
    })  

}

1 Ответ

1 голос
/ 12 июня 2019

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

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;
    })
  }
...