사파리(Safari)에서 비디오 자동재생이 안 될 때? 해결 방법 공유!

Essepage로 홈페이지를 제작하면서 백그라운드에 자동재생되는 영상을 삽입하려고 <video> 태그를 사용했는데… 사파리에서 재생이 안 되는 문제가 발생했습니다. 😩

🎯 자동재생을 위해 시도한 것들

일반적으로 Safari에서 자동재생이 가능하려면 다음 조건을 충족해야 합니다.
✅ 영상에 소리 없음(또는 음소거 처리)
✅ Safari 호환 인코딩(H.264, AAC | MP4 권장, WebM도 가능)
✅ 아이폰 저전력 모드 해제(저전력 모드에서는 자동재생 차단)
✅ <video> 태그에 playsinline 속성 추가
이 모든 걸 체크했는데도… 여전히 자동재생이 되지 않았습니다. 🤯

🔍 해결 방법

고민 끝에 검색을 하다가 이 블로그 글을 발견했는데, 여기에 소개된 영상을 표시하는 페이지에 비디오가 의도한 대로 재생되지 않는 경우, 대체 옵션을 제공하는 자바스크립트를 추가했더니 드디어 해결됐습니다!

const videoElement = document.querySelector('video');
videoElement.play().catch(error => {
    console.log(error);
});

정확한 원리는 아직도 100% 이해가 되진 않지만, 이 스크립트를 추가한 후 Safari에서도 정상적으로 자동재생이 되었습니다. 🎉

✨ 마무리

혹시 같은 문제로 고민하고 있다면, 위 방법을 한 번 시도해 보세요! 또한, 제가 Esspeage 에 만든 무료템플릿에서 직접 확인해보시고 테스트해볼 수도 있습니다.
👉 템플릿 바로가기 - Video 태그 영상 자동재생

이 글이 같은 문제를 겪고 있는 분들에게 도움이 되길 바랍니다. 😊