Tengo varios videos en mi sitio que tienen la misma clase.
Quiero reproducir solo un video cuando paso el mouse sobre él. Tan pronto como quité el cursor, el video se detuvo con un retraso de 1 segundo.
Aprendí cómo iniciar un video y pausarlo. Pero tan pronto como agrego setTimeout, aparece un error: Uncaught TypeError: Cannot read properties of undefined (reading 'pause')
A continuación adjunto el código html de mi solución:
<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>También adjunto el código html de mi solución:
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); }También agrego jsfiddle funcional con mi código: https://jsfiddle.net/v7certb6/1/
Por favor, ayúdenme a resolver el problema de pausa de video después de un segundo.
Estaré muy agradecido por cualquier ayuda.
El problema se debe a que this en el controlador de la función setTimeout() se refiere a esa función, no a la referencia del elemento proporcionada en la invocación de las funciones externas hoverVideo() o hideVideo() .
Para solucionar este problema, cree una variable en el ámbito externo para conservar la referencia a this que usa dentro de setTimeout() :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <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> var figure = $(".cases__item").hover(hoverVideo, hideVideo); function hoverVideo(e) { let _this = this; $('.cases__item-video', _this).get(0).play(); } function hideVideo(e) { let _this = this; setTimeout(function() { $('.cases__item-video', _this).get(0).pause(); }, 1000); }Violín de ejemplo : tenga en cuenta que el ejemplo está en un violín, ya que el contenido entre sitios tiene problemas cuando se reproduce en el sitio SO principal.
Como nota al margen, el JS se puede reducir a lo siguiente, que tiene exactamente el mismo comportamiento simplemente usando funciones de flecha:
$(".cases__item").hover( e => e.currentTarget.querySelector('.cases__item-video').play(), e => setTimeout(() => e.currentTarget.querySelector('.cases__item-video').pause(), 1000));