Mi pregunta se basa en esta:

¿Escuchador de eventos para cuando el elemento se vuelve visible?

Quiero que un elemento de video comience a reproducirse automáticamente cuando se vuelva visible y se detenga cuando se vuelva invisible. El elemento es una diapositiva en un componente de carrusel (a saber, owl-carousel , aunque creo que no importa). Así que hice lo siguiente:

• Marcó el elemento de video con la clase autovideo .
• Incluyó el código de la función respondToVisibility de la respuesta .
• Adjuntó un controlador de eventos stub.

Así que ahora el código se ve así:

 function respondToVisibility(element, callback) { var options = { root: document.documentElement, }; var observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { callback(entry.intersectionRatio > 0); }); }, options); observer.observe(element); } // Autoplay video when visible. $('.autovideo').each(function () { respondToVisibility(this, function (isVisible) { alert('isVisible: ' + isVisible); }); });

Funciona según lo previsto, cuando hago clic en los botones del carrusel Siguiente / Anterior ( display:none estilo se agrega / elimina debajo del capó). Pero cuando me desplazo por la página hacia abajo y el elemento de video está fuera de la pantalla, el evento no se dispara.

Supuse que Intersection Observer API significa intersección de un elemento con la parte visible de la ventana del navegador ( ventana gráfica ). ¿Debo usar un observador adicional para desplazar el video fuera de la ventana o cambiar el actual?