Diseñé un sitio web que tiene video. Quiero que el video comience a reproducirse automáticamente cada vez que Windows se desplaza y llega a la sección de videos. Y cuando el usuario se desplaza a una sección inferior o superior, el video se detiene. Y cuando regrese a la sección de video, el video se reproducirá automáticamente. Cómo hacer esto con JavaScript para una cantidad de videos en una página. Siguiendo el consejo de un amigo, usé "Intersection Observer API". Este código funciona para un video, pero no funciona para varios videos en una página. Gracias.
const video = document.querySelectorAll("video"); for (let i = 0; i < video.length; i++) { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (!entry.isIntersecting) { video.pause(); } else { video.play(); } }); }, {}); observer.observe(video); } <div> <div class="video-container"> <video controls> <source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> </div> <div> <div class="video-container"> <video controls> <source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> </div>Use la API de intersección, de modo que una vez que el elemento de video entre en la ventana gráfica, pueda reproducirlo y detenerlo una vez que salga de la ventana gráfica.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API