Javascript 当其他元素悬停时启动/暂停HTML5视频

只是想在另一个“覆盖”div悬停时播放视频。关于这个问题的一些背景，我在页面上有几个视频，当鼠标悬停时，它们会播放

在我添加视频上方的div之前，一切正常。一旦我在视频顶部添加了第二个“overlay”div，下面的代码就不再有效，因为从技术上讲，我不再在视频上悬停

我使用视频顶部的overlay div来放置一些关于它的信息

<script type="text/javascript">
var figure =  $('.movies');
var vid = $("video");
var cover = $(".video-overlay");
[].forEach.call(vid, function (item) {
    item.addEventListener('mouseover', hoverVideo, false);
    item.addEventListener('mouseout', hideVideo, false);
});
function hoverVideo(e) {  
    this.play();
}
function hideVideo(e) {
    this.pause();
}
</script>

变量图=$（'.movies'）；
var vid=$（“视频”）；
var覆盖=$（“.video overlay”）；
[]forEach.call（vid，函数（项）{
item.addEventListener（'mouseover'，hoverVideo，false）；
添加的列表项（'mouseout'，hideVideo，false）；
});
函数悬停视频（e）{
这个。play（）；
}
函数hideVideo（e）{
这个。暂停（）；
}

---

如何将其调整为“如果悬停在div class.video overlay上，则启动视频。如果未悬停，则暂停。”

javascript解决方案：

  var vid = document.getElementById("myVideo"); 

  function playVid() { 
     vid.play(); 
  } 

  function pauseVid() { 
    vid.pause(); 
  }

然后，在jQuery中，我会这样做：

  $('.myHoveredElement').hover(function(){
       // This will happen when the .myHoveredElement is hovered
       vid.play();
  }, function(){
       // This will happen when the .myHoveredElement is not hovered anymore (mouseleave)
       vid.pause();
  });

如果你想让它在每一个有元素悬停的视频上工作，你就必须给每个视频的容器一个类，其中包含一个你想在悬停时做出反应的覆盖层。例如，您的html将如下所示：

   <div class="video-container">
      <video ...>
      </video>
      <div class="video-overlay"></div>
   </div>

  $('.video-container').hover(function(){
      //Happens when you're hover (mouseenter)
      $(this).children('video').get(0).play();
  }, function(){
     // Happens when mouse leaves the video container
     $(this).children('video').get(0).stop();
  })

这样，当您悬停任何具有名为.video container的容器的视频时，它将起作用

---

希望它能回答您的问题

您的html是什么样子的？如果overlay div是video div的子项，我相信您也可以将相同的事件侦听器添加到item.childNodes，这将获得overlay div。jQuery标记在问题中，您也可以在代码示例中看到他正在使用它@ageonix，而此解决方案在第一个视频上确实有效，它不适用于页面上的多个视频。在我添加叠加div之前，我之前的代码处理了多个视频。有什么想法吗？更新了答案，希望对@terry2015有所帮助。对不起，那天晚上我解决了这个问题，但使用了与您描述的非常类似的东西-谢谢！