JavaScript: play () и pause () HTML-видео не работают при наведении мыши

Question

Мне нужно переключать воспроизведение видео всякий раз, когда курсор входит и покидает видеоэлемент.

В настоящее время я использую методы play() и pause() для моих видеоэлементов, но всегда кажется, что они не определенысвойство.

Вот мой сценарий:

window.onload = function() {
    var video = document.getElementsByTagName('video');

     for (i = 0; i < video.length; i++) {
        video[i].addEventListener( 'mouseover', function(e) { 
             video[i].play()
        })
        video[i].addEventListener( 'mouseout', function(e) {
             video[i].pause()
        })
    }
}

И HTML тоже:

<video class="myclass" loop>
    <source src="assets/images/shoes.mp4" type="video/mp4"/>
</video>

События mouseover и mouseout запускаются, как и ожидалось, ноplay() и pause() все еще получают неопределенный результат в консоли, как вы можете видеть в фрагменте ниже.

Может кто-нибудь, пожалуйста, помогите мне исправить это?Пожалуйста, не давайте мне метод, основанный на jQuery, потому что я не использую jQuery.

Спасибо!

window.onload = function() {
  var video = document.getElementsByTagName('video');

  for (i = 0; i < video.length; i++) {
    video[i].addEventListener('mouseover', function(e) {
      video[i].play()
    })
    video[i].addEventListener('mouseout', function(e) {
      video[i].pause()
    })
  }
}

<video class="cav-sl-heros-canvas-video" loop>
		<source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"/>
</video>

Answer 1

Вы можете использовать this.И журнал показывает реальные i.Вот почему let будет работать, а var - нет.

И разница между let и var, есть много повторяющихся вопросов и ответов, вы можете найти и узнать что-то об этом.

window.onload = function() {
  var video = document.getElementsByTagName('video');

  for (var i = 0; i < video.length; i++) {
    video[i].addEventListener('mouseover', function(e) {
      console.log('current i', i)
      this.play()
    })
    video[i].addEventListener('mouseout', function(e) {
      console.log('current i', i)
      this.pause()
    })
  }
}

<video class="cav-sl-heros-canvas-video" loop>
		<source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"/>
</video>

Answer 2

Одним из способов решения этой проблемы является управление элементом видео с помощью мыши event, передаваемой в обработчик событий, следующим образом:

video[i].addEventListener('mouseover', function(e) {
  const mouseOverVideo = e.currentTarget;
  mouseOverVideo.play()
})

Этот подход гарантирует, что вы будете вызывать play() иpause() на элементе видео, соответствующем событиям мыши:

window.onload = function() {
  var video = document.getElementsByTagName('video');

  for (i = 0; i < video.length; i++) {
    
    // Aquire video element via currentTarget, so that
    // call to play() is on video inside event handler's
    // closure
    video[i].addEventListener('mouseover', function(e) {
      var mouseOverVideo = e.currentTarget;
      mouseOverVideo.play()
    })
    
    // Aquire video element via currentTarget, so that
    // call to pause() is on video inside event handler's
    // closure
    video[i].addEventListener('mouseout', function(e) {
      var mouseOverVideo = e.currentTarget;
      mouseOverVideo.pause()
    })
  }
}

<video class="cav-sl-heros-canvas-video" loop>
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"/>
</video>
<video class="cav-sl-heros-canvas-video" loop>
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"/>
</video>