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>

Answer 2

您可以使用 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>

Javascript: play() 和 pause() html 视频不适用于鼠标悬停

Javascript: play() and pause() html video not work with mouseover

javascript

html5-video