'jQuery. Pause video with timeout

I have several videos on my site that have the same class.

I want to play only one video when hovering over it. As soon as I removed the hover, the video was paused with a delay of 1 second.

I learned how to start a video and pause it. But as soon as I add setTimeout I get an error: Uncaught TypeError: Cannot read properties of undefined (reading 'pause')

Below I am attaching the html code of my solution:

<a href="#" class="cases__item">
   <video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>

<a href="#" class="cases__item">
   <video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>

<a href="#" class="cases__item">
   <video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>

Also I am attaching the html code of my solution:

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

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

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

I also add working jsfiddle with my code: https://jsfiddle.net/v7certb6/1/

Please help me to resolve the video pause issue after one second.

I will be very grateful for any help.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source