javascript - 在图像上播放视频鼠标悬停会导致颤抖故障

Question

我尝试将鼠标悬停在网站 img 画廊中同一 div 的图像上时播放视频，但显然我做错了。

鼠标悬停时视频应在其上播放的假定隐藏图像开始颤抖。我认为这是显而易见的事情，但我没有足够的经验来解决它。

有什么想法如何在悬停时永久隐藏图像吗？

代码如下:

HTML

        <div id="container">
     <div class="viewer">
       <img class="thumb" target="#video_1" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
       <video id="video_1" preload loop>
         <source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
         No video support
       </video>
       </div>
     <div class="viewer">
       <img class="thumb" target="#video_2" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
       <video id="video_2" preload loop>
         <source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
         No video support
       </video>
       </div>
     <div class="viewer">
       <img class="thumb" target="#video_3" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
       <video id="video_3" preload loop>
         <source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
         No video support
       </video>
       </div>
    </div>

CSS

    .viewer {
    width: 530px;
    height: 290px;
    display:inline-block;
    }

    video {
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
    }

JS

    $(document).ready(function() {
      $('.thumb')
        .mouseover(function() {
          $(this).hide();
          var myVid = $(this).attr('target');
          $( myVid ).show().trigger('play');
       })
       .mouseout(function() {
          $('video').trigger('pause').hide()
          $(this).show();
      });
    });

这里还有一个已保存的[PEN]:https://codepen.io/anon/pen/oEwRJQ

Answer 1

您的代码存在问题，因为您在 mouseover 事件中隐藏了 .thumb 元素，该元素会立即触发 mouseout 事件，再次显示它。这会导致隐藏/显示循环，从而导致您看到闪烁。

要解决此问题，请将事件 Hook 到缩略图和视频的父元素。这样您就不需要使用非标准的 target 属性，而是可以使用 DOM 遍历找到相关的 video 元素，从而使代码更具可扩展性和健壮性。您还可以使用 mouseenter 和 mouseleave 事件来防止靠近点击区域边缘时出现任何可能的闪烁。

$(function() {
  $('.viewer').mouseenter(function() {
    var $el = $(this);
    $el.find('.thumb').hide();
    $el.find('video').show()[0].play();
  }).mouseleave(function() {
    var $el = $(this);
    $el.find('.thumb').show();
    $el.find('video').hide()[0].pause();
  });
});

.viewer {
  width: 530px;
  height: 290px;
  display: inline-block;
}

video {
  width: 100%;
  height: 100%;
  position: relative;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
  <div class="viewer">
    <img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
    <video id="video_1" preload loop>
     <source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
     No video support
   </video>
  </div>
  <div class="viewer">
    <img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
    <video id="video_2" preload loop>
     <source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
     No video support
   </video>
  </div>
  <div class="viewer">
    <img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
    <video id="video_3" preload loop>
     <source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
     No video support
   </video>
  </div>
</div>