JQuery задержка видео на функции мыши - PullRequest
Новая
       13

JQuery задержка видео на функции мыши

0 голосов
/ 08 сентября 2018

У меня есть эффект миниатюры видео, при котором, когда пользователь наводит курсор на картинку, видео показывается и начинается воспроизведение. Это работает хорошо, но когда я пытаюсь применить метод задержки для показа видео, он не работает должным образом. 

$(document).on('mouseenter', '.img-video', function(e) {
    $(this).hide();
  $(this).next().trigger('play').show();

  $(this).next().mouseout(function() {
        $(this).hide().trigger('pause')[0].currentTime = 0;
    $(this).prev().show();
    });
})

Пример JSFiddle здесь https://jsfiddle.net/aq9Laaew/204575/

Спасибо за любой совет

1 Ответ

0 голосов
/ 08 сентября 2018

Используйте именованную функцию Timeout и снимите ее, если наведение происходит очень быстро. Если зависание длинное, тогда покажите видео. 

$(document).on('mouseenter', '.img-video', function(e) {
  var image = $(this);
  
  var imageTimer = window.setTimeout(function() {
    image.data('imageTimer', null);
    image.hide();
    image.next().trigger('play').show();
  }, 2000);
  image.data('imageTimer', imageTimer);

  image.next().mouseout(function() {
    image.next().hide().trigger('pause')[0].currentTime = 0;
    image.show();
  });
});

$(document).on('mouseleave', '.img-video', function(e) {
  var image = $(this);
  var imageTimer = $(this).data('imageTimer');
  if (imageTimer !== null) {
      window.clearTimeout(imageTimer);
  }
});
.container {
  margin-top: 20px;
}

.sample {
  display:none;
}

.col{
  position:relative;
}
.sample{
      position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col">
      <img class="img-video"  src="https://usclub.kz/temp/mcu/3.jpg" width="320" height="200"/>
       <video class="sample" muted="muted" preload loop>
         <source src="https://www.lvmagnet.com/wp-content/uploads/2017/01/video-bg.mp4" type="video/mp4">
         No video support
       </video>
    </div>
    <div class="col">
      <img class="img-video" src="https://usclub.kz/temp/mcu/1.jpg" width="320" height="200"/>
       <video class="sample" muted="muted" preload loop>
         <source src="https://www.lvmagnet.com/wp-content/uploads/2017/01/video-bg.mp4" type="video/mp4">
         No video support
       </video>
    </div>
</div>
...