Запуск видео с hover

Question

Всем привет, хотел сделать так, чтоб при событии onMouseOut видео отмоталось назад. Но после того как видео отмоталось запуск не происходит

<video id="video" muted preload class="pokyHover" src="./Vehicle Exploded View Animation_Trim.mp4"> 
</video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('.pokyHover').hover(
    () => {
        video.currentTime = 0;
        video.play()
    }, //onMouseEnter
    () => {
        setInterval(() => {
            video.currentTime += -.1;
        }, 30);
        video.pause()
    } //onMouseOut
    );
   </script>

Answer 1

Надо в нужном месте останавливать setInterval.

Посмотрите пример.

let intervalId;
$('.pokyHover').hover(
  () => {
    //Очищаем интервал перемотки назад
    clearInterval(intervalId);
    video.play();
  }, //onMouseEnter
  () => {
    //Очищаем интервал перемотки назад, на случай, если onMouseEnter не сработал
    clearInterval(intervalId);
    video.pause()
    intervalId = setInterval(() => {
      video.currentTime += -.1;
      if (video.currentTime <= 0) {
        //Очищаем интервал перемотки назад когда дошли до начала видео
        clearInterval(intervalId);
      }
    }, 30);
  } //onMouseOut
);

video {
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<video id="video" muted preload class="pokyHover" src="https://v.mover.uz/1Jfy4tcm_h.mp4"> 
</video>

БЛОГ НА HUSL

Запуск видео с hover

Ответы (1 шт):