Приостановка видео после наведения

Question

У меня есть следующий код для воспроизведения видео при наведении, но мне нужно, чтобы он прекратил играть, когда не завис. Что мне нужно добавить к JS, чтобы сделать эту работу?

<div class="padding-box height-40">
                <div>
                    <div class="media_link_overlay" id="video-home"></div>
                </div>
                <div class="background">
                    <div class="content">
                        <div class="text">
                            <video id="video-hover" width="100%" height="100%" preload="auto" onMouseover="mouseoversound.playclip()">
                                 <source type="video/mp4" src="<?php echo get_template_directory_uri().'/videos/homepage_thx.mp4';?>" />
                            </video>
                        </div>
                    </div>      

<script>
$("#video-home").hover(function(){
    $("#video-home")[0].play();
});
</script>

Answer 1

Метод .hover() имеет две функции-обработчика, одна из которых handlerIn, а другая handlerOut. В настоящее время вы используете только первый обработчик. Вы можете использовать оба и делать видео play при наведении и pause при наведении, например:

$("#video-home").hover(
  function() {
    $("#video-home")[0].play();
  },
  function() {
    $("#video-home")[0].pause();
  }
);

Если вы хотите полностью остановить видео и начать его с начала на следующем при наведении можно использовать:

$("#video-home").hover(
  function() {
    $("#video-home")[0].play();
  },
  function() {
    $("#video-home")[0].pause();
    $("#video-home")[0].currentTime = 0;
  }
);