iOS에서 백그라운드 영상 자동재생
모바일 웹에서 영상을 백그라운드로 사용하면 효과적인 브랜딩을 할 수 있다. 보통 진입하자마자 보여지는 hero 섹션(혹은 랜딩 섹션)에 배치하여 강한 임팩트를 준다. 이번 프로젝트에서는 모바일 웹에서 스플레시 영상과 콘텐츠 소개에 백그라운드 영상 삽입하면서, 영상 테스트한 것을 정리해 보았다.
✅ iOS 16 (아이폰-아이패드) 디바이스,
크롬-사파리 브라우저에서 테스트를 진행했다.
<video> attribute
autoplay, muted, loop 속성
// 기본적인 video 태그
<video autoplay muted loop id="bgVideo">
<source src="your-video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>영상을 백그라운드 (자동, 반복) 재생하려면, video 태그를 사용하고 autoplay, muted, loop 속성을 true로 설정하면 된다. 이렇게 간단하게 설정된 화면은 다음과 같이 보여진다.
✅ playsinline 속성
동일한 코드로 아이폰(iOS 16/크롬)의 경우 다음과 같이 자동재생(autoplay) 속성이 적용되지 않았는데, playsinline 속성을 주었더니 잘 나오는 것을 확인할 수 있었다. iOS 비디오 정책상 전체화면 재생이었을 때 webkit- prefix로 이 속성을 사용했던 기억이 있다.
디바이스 배터리 "저전력 모드"
🛑 배터리 저전력 모드일 때
✅ 배터리 일반 모드일 때
저전력 모드일 때는 playsinline 인라인 속성을 추가해도 autoplay 속성이 무시된다. 배터리 잔량에 따라 백그라운드 재생에 관련해서 사용자에게 권고하고 싶다면, Battery Status API의 battery 객체의 정보를 받아 가이드를 출력하는 것도 방법이 될 수 있을 것 같다.
📌 스플레시 영상 구현하기
모바일 웹에서도 간단하게 스플레시 화면을 구현할 수 있다. setTimeout으로 영상이 끝나는 시간을 맞춰 교묘하게(?) 화면을 전환할 수 있지만, 테스트를 해보니 영상이 로드하는 시간과 타이머API를 호출하는 시간이 환경마다 조금씩 달랐다.
찾아보니, <audio> or <video> 미디어가 끝까지 재생 완료 된 시점에 발생하는 ended 이벤트로 화면 전환을 시킬 수 있었다.
let video = document.createElement('video');
video.src = './assets/video/intro2.mp4';
// video.loop = true; 한번만 재생하기
video.muted = true;
video.defaultMuted = true;
video.autoplay = true;
video.playsInline = true;
video.addEventListener('ended', function () {
let splash = document.querySelector('#splash')
splash.textContent = ""
});
document.querySelector('#splash').appendChild(video);결론은..
iOS 10 이후 디바이스에서 백그라운드 영상을 자동으로 재생하려면, autoplay, muted, playsinline 속성을 추가한다. 일부 디바이스 환경 (저전력 모드)에 따라 속성이 적용되지 않을 수 있다.
출처
