javascript - Play and stop video on hover, weird transition in between

Question

What i'm trying to achieve:

A video as thumbnail that links to the video page, using jQuery this thumbnail video i have is playing few seconds as a preview on hover, and stops when i move the cursor away, that's what i want so far...

The problem:

1. (important) there is a weird transition When i move the cursor away from the video thumbnail, the video disappears for 1 second and appears again
2. (not important) Using (#t=[starttime][,endtime]) when i keep the cursor on, and the video reaches the specified [,endtime], it pauses instead of looping back to the specified [starttime]

I don't know how to fix this, i need your help, especially with the first problem. thank you!

The code:

HTML

<ul class="video-container">
  <li>
    <a href="#">
      <div class="video">
        <video muted loop preload width="250px" height="150px">
          <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4#t=00:00:05,00:00:15" type="video/mp4">
        </video>
      </div>
      <h2>Video Title</h2>
    </a>
  </li>
</ul>

CSS

.video-container {
  list-style-type: none;
  flex-flow: wrap;
  display: flex;
}

.video-container li {
  background-color: #000000;
}

JS

var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {
  $('video', this).get(0).play();
}

function hideVideo(e) {
  $('video', this).get(0).load();
}

question from:https://stackoverflow.com/questions/65853562/play-and-stop-video-on-hover-weird-transition-in-between

Answer 1

Edit your java code...

From :

function hideVideo(e) {
  $('video', this).get(0).load();
}

To:

function hideVideo(e) {
  $('video', this).get(0).pause();
}