🔍 Intersection Observer API

Kyeongeun Jo·2022년 6월 1일

이번 프로젝트 중 가장 애를 먹었던 오디오 및 비디오의 중첩을 막고자하는 기능에 대해 이야기 해보고자 한다.

오디오, 비디오, 이미지 여러개 등 다양한 콘텐츠들이 나열되어 있는 상태에서 여러개를 실행시킬 수 없게끔 작업을 해야했다. 어려울거라고 생각해 기획자님과 함께 이야기 하며 원활한 방법을 찾아보고자 여러가지 방안들을 만들어보았는데

1. 플레이를 컨트롤하는 보이지 않는 player를 만들어서, 그 객체 하나로서만 작동 시킨다.
	-> 오디오는 재생이 되지만 비디오의 영상이 보이지 않는 이슈
2. 여러개의 플레이들의 재생을 감지하고 있다가 current Player이외의 것들은 모두 pause 시킴
	-> 실제로 1000건이 넘는 콘텐츠들로 넘쳐나다면? (🤔) 하는 궁금증과 위험성 발행

때문에 또 다른 쉬운 방법이 있겠지만 기획자님의 원활한 소통과 통쾌한 승락으로 결과적으로는 화면의 뷰포트에 도달했을 때 이벤트를 발생시키는 것이 가장 나을 듯 했다.

Intersection Observer API 란 무엇인가.

특정 요소(target)가 그 요소의 부모나 뷰포트에 교차하는지를 비동기적으로 감지하여, 교차할 때마다 콜백함수를 호출하는 API이다.

Intersection Observer를 사용하려면

const observer = new Intersection Observer(**callbackFunction**, **options**) {
	observer.observe(targetElement)
}

요소들이 교차되었을 때 실행할 콜백함수
options

root : 타겟이 보이는지 확인하기위한 뷰포트이며, 따로 특정지어주지 않으면 브라우저 뷰포트를 뜻한다.
rootMargin : 루트요소를 둘러싼 박스에 대한 값으로 말그대로 margin값이라고 볼 수 있다.
threshold : 원하는 요소가 얼마나 노출되었는지를 나타내는 intersection ratio이며, 0-1의 값으로 설정할 수 있다.
(값이 0 => 요소가 1px이라도 보이면 콜백함수 실행, 값이 1 => 요소가 모두 보여야 실행)

사용한 방법

관찰되기를 바라는 타겟 요소를 정한다.
video, audio를 감싸고있는 객체들로 설정
(audio의 경우에는 다른 요소들이 추가적으로 필요했기에, 비디오와 다른 로직으로 구현이 되어있다.)
대상 요소가 화면에 보이는 정도에 따라 실행되는 이벤트 함수를 만든다.
뷰포트에 노출이 되면 video는 mute, autoplay가 되며, 오디오는 클릭하여 재생하되,
뷰포트 영역 밖으로 벗어나면 자동으로 pause 된다.
만들어 놓은 콜백함수는 IntersectionObserverEntry의 entry 객체 리스트를 받게된다.

    useEffect(() => {
    	// 옵션 설정
        const options = {
            root: null,
            rootMargin: '-200px', // 브라우저 화면보다 작게 만들기 위함
            threshold: 0.5,
        }
        
        const intersectionObserver = new IntersectionObserver((entries, observer) => {
        
			// 관찰할 객체가 여러개이므로 forEach 사용
            entries.forEach(entry => {
                let type = entry.target.nodeName;
                
                // 뷰포트에있는 target 요소가 true일 때
                if (entry.isIntersecting) {
                    if (entry.intersectionRatio > 0) {
                        if (type === 'VIDEO') {
                        
                       		// 적용되는 video 자동재생 event
                            entry.target.play();
                            entry.target.nextElementSibling.classList.remove(styles.videoPlayIcon);
                            entry.target.addEventListener('timeupdate', (e) => {
                                let progress = entry.target.nextElementSibling.nextElementSibling;
                                progress.max = Math.floor(entry.target.duration);
                                progress.value = Math.floor(entry.target.currentTime);
                            })
                        }
                    }
                } else {
                	// 뷰포트의 영역에서 벗어났을 때
                    if (type === 'VIDEO') {
                        entry.target.pause();
                        entry.target.nextElementSibling.classList.add(styles.videoPlayIcon);
                    } else if (type === 'DIV') {
                    	// audio의 경우에는 click해야 발생하는 이벤트이기에, pause 기능만 추가했다.
                        let audio = entry.target.children[1];
                        audio.nextElementSibling.classList.remove(styles.active);
                        audio.nextElementSibling.nextElementSibling.classList.remove(styles.pause);
                        return audio.pause();
                    }
                }
            })
        }, options);
        
        // observing 될 객체들
        const content = document.querySelectorAll('.observerItem');
        content.forEach(target => {
            intersectionObserver.observe(target);
        })
    }, [])

entries