Question

只是在另一个＆＃34;覆盖＆＃34;时尝试播放视频。 div徘徊。关于这个问题的一些背景，我在页面上有几个视频，当它们盘旋时，它们会播放。

一切正常，直到我添加了一个位于视频上方的div。一旦我添加了第二个＆＃34;叠加＆＃34;在视频的顶部，下面的代码不再有效，因为我已经不再在视频上徘徊了。

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

如何调整此项以说明＆＃34;如果在div类.video-overlay上悬停，请启动视频。如果没有徘徊，请暂停。＆＃34;

Answer 1

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();
  });

Here is the documentation of the jQuery hover element

如果您希望它能够处理每个有元素悬停的视频，那么您必须为每个视频的容器提供一个类，其中包含您希望在悬停时做出反应的叠加层。例如，你的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的容器的视频时它会起作用。

希望它能回答你的问题

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

1 个答案: