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

解决这个问题的一种方法是通过传递给事件处理程序的鼠标 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>