Pause videos when not in view 🍿

readme.md

Pause videos when not in view

VideosIntersectionObserver.js

    // pause video playback when not in view
    useEffect(() => {
        let observerOptions = {
            rootMargin: "0px",
            threshold: [0.25, 0.75] // start playing when 25% and 75% of the element is in view
        };

        // watch all selected videos and control playback when they enter the viewport
        let handlePlay = (entries, videoObserver) => {
            entries.forEach((entry) => {
                let videoElement = entry.target;
                if (entry.isIntersecting) {
                    videoElement.play();
                } else {
                    videoElement.pause();
                }
            });
        };

        let videoObserver = new IntersectionObserver(handlePlay, observerOptions);

        // select all the videos on page and observe them
        let videos = document.querySelectorAll("video");
        videos.forEach((video) => {
            videoObserver.observe(video);
        });

        // cleanup
        return () => {
            videoObserver.disconnect();
        }
    }, []);

😊