Tengo una página de cartera hecha en WordPress y en la página tengo 5 videos que deben reproducirse cuando están en la ventana gráfica y detenerse cuando están fuera de la ventana gráfica.
He usado el siguiente script que funciona solo en el primer video de la página.
const video = document.querySelector("video"); let playState = null; const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (!entry.isIntersecting) { video.pause(); playState = false; } else { video.play(); playState = true; } }); }, {}); observer.observe(video); const onVisibilityChange = () => { if (document.hidden || !playState) { video.pause(); } else { video.play(); } }; document.addEventListener("visibilitychange", onVisibilityChange); querySelector("video");Y aquí está el enlace a la página: http://wemedia.co.rs/portfolio-2/
Entonces, lo que quiero lograr es reproducir y pausar cada video cuando esté dentro o fuera de la ventana gráfica.
Gracias.
Solo está seleccionando un video para usar en todo su script js.
Debe recordar que el video representa solo un video y si desea controlar varios, debe hacer referencia a ellos en cada función que llame.
Tampoco veo un propósito en usar playState ya que, de la forma en que lo tienes, es básicamente un indicador de si el primer video está en la pantalla o no.
const videos = document.querySelectorAll("video"); // Select ALL the Videos const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (!entry.isIntersecting) { entry.target.pause(); // Pause the TARGET video } else { entry.target.play(); // Play the TARGET video } }); }, {}); for (const video of videos) observer.observe(video); // Observe EACH video const onVisibilityChange = () => { if (document.hidden) { for (const video of videos) video.pause(); // Pause EACH video } else { for (const video of videos) video.play(); // Play EACH video } }; document.addEventListener("visibilitychange", onVisibilityChange);