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

Question

我正在尝试播放视频，同时将鼠标悬停在我网站的 img-gallery 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

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

要解决此问题，请将事件挂接到缩略图和视频的父元素。这样您就不需要使用非标准的 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>

Answer 2

  $(document).ready(function() {
  $('.viewer').each(function(){
    var $this = $(this);
    $this.mouseover(function() {
      $(this).find('.thumb').hide();
      $('video', $this).show().trigger('play');
    })
    $this.mouseout(function() {
      $('video', $this).trigger('pause').hide()
      $(this).find('.thumb').show();
    });
  });
});

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

Play video on image mouseover causes trempling glitch

javascript

jquery

html5-video

onhover