jQuery(document).ready(function() { if (jQuery('.lwp-video-autoplay .et_pb_video_box').length !== 0) { jQuery('.lwp-video-autoplay .et_pb_video_box').find('video').prop('muted', true); jQuery(".lwp-video-autoplay .et_pb_video_box").find('video').attr('loop', 'loop'); jQuery(".lwp-video-autoplay .et_pb_video_box").find('video').attr('playsInline', ''); jQuery(".lwp-video-autoplay .et_pb_video_box").each(function() { jQuery(this).find('video').get(0).play(); }); jQuery('.lwp-video-autoplay .et_pb_video_box').find('video').removeAttr('controls'); } });Estoy tratando de crear un video que solo se reproduce cuando pasas el mouse sobre él y se detiene cuando pasas el mouse.
El video no debe tener controles. Encontré este tutorial https://www.learnhowwp.com/how-to-autoplay-videos-in-divi-video-module-and-hide-controls/ que llegó al punto de reproducir automáticamente el video.
Solo me gustaría tener el video pausado originalmente y solo comenzar cada vez que paso el mouse sobre él. Aquí está el código provisto que ha funcionado hasta ahora
He estado buscando mucho a través de google + stackoverflow pero lo que sea que intento no parece funcionar dentro del código que ya tengo. También probar otros ejemplos no funciona para mí. No soy técnico, por lo que cualquier avance sería muy apreciado.
Ignorando ese desorden publicado en OP, hice un ejemplo de trabajo mínimo:
Event.type Event se utiliza para determinar qué evento se activa actualmente.this se usa en lugar de $(this) . $(this) es una referencia a un objeto jQuery que no reconoce la mayoría de los métodos de JavaScript como .play() o .pause() . this es una referencia a un objeto de JavaScript que no reconoce los métodos de jQuery pero reconoce métodos de JavaScript como .play() y .pause() .[muted] para que responda correctamente a los eventos de puntero. Vea el comentario de VC.One a continuación. $('video').on('mouseover mouseout', function(e) { const evt = e.type; if (evt === 'mouseover') { this.play(); } if (evt === 'mouseout') { this.pause(); } }); video { display: block; } <video src='https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4' width='200' muted></video> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>