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视频在鼠标悬停时不起作用

2 个答案: