在其他元素悬停时开始/暂停 HTML5 视频

Start/Pause HTML5 Video When Other Element Hovered

本文关键字：暂停 HTML5 视频 开始 其他 元素 悬停      更新时间：2023-09-26

只是试图在另一个"叠加"div悬停时播放视频。关于这个问题的一些背景，我在页面上有几个视频，当悬停时，它们会播放。

一切正常，直到我添加了一个位于视频上方的div。一旦我在视频顶部添加了第二个"叠加"div，下面的代码就不再有效，因为从技术上讲，我不再将鼠标悬停在视频上。

我正在使用视频顶部的叠加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>

我怎样才能将其调整为"如果将鼠标悬停在div 类 .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();
  });

这是jQuery悬停元素的文档

如果您希望它适用于每个具有悬停元素的视频，则必须为每个视频的容器提供一个类，其中包含要在悬停时做出反应的叠加层。例如，您的 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 的容器的任何视频时，它将起作用。

希望它能回答你的问题

相关文章：