AutoPlay 썸네일형 리스트형 React에서 Intersection Observer로 비디오 자동 재생 제어하기 스크롤에 따라 화면에 보이는 비디오만 자동 재생하고, 화면을 벗어나면 일시 정지시키는 UX는 피드·기사·제품 리스트에서 필수입니다. React에서는 Intersection Observer를 이용하면 성능 부담 없이 이를 안정적으로 구현할 수 있습니다.1. 핵심 아이디어와 브라우저 정책Intersection Observer는 특정 DOM이 뷰포트에 얼마나 노출되는지 비동기적으로 알려줍니다. 이 값을 기준으로 비디오를 play/pause 하면 됩니다. 단, 자동 재생은 브라우저 정책상 소리가 꺼진 상태(mutated)와 인라인 재생(playsInline)이 중요합니다. iOS Safari 등 일부 환경에서는 muted + playsInline 없이는 자동 재생이 거부됩니다.2. 단일 비디오 컴포넌트 구현가장.. 더보기 이전 1 다음