JS : 모바일 웹앱에서 video 태그 자동재생 구현하기 ( + 추가적으로 IOS safari에서 자동 재생 시 저전력 모드일때 멈추는 문제 예외처리)

모바일 웹앱을 만들때 비디오를 자동 재생하는 부분에서 애를 먹곤 합니다.

 

IOS의 Safari와 안드로이드의 Chrome에 맞춰서 비디오를 자동 재생을 시키려면 몇가지 유의해야 할 점이 있습니다.

 

이에 대해서 알아보고 추가적으로 IOS Safari에서 저전력 모드일때 자동재생이 막히는 부분에서 예외처리 방법에 대해 알아보겠습니다.

 

 

모바일에서 Video 태그 자동재생

 

보통 모바일에서 비디오 태그를 자동재생 시킬때 필요한 몇가지 속성들이 있습니다.

 

Video 태그에 자동재생, 즉 autoplay를 활성화 시키려면 기본적으로 muted 속성이 필요합니다.

 

muted 속성은 video태그에서 소리를 막아주는 속성값입니다. 

 

muted 속성이 필요한 이유는 웹 브라우저를 켰을때 유저가 원하지 않는데 자동재생되며 소리가 나게 되면 이를 악용하거나 보안상 좋지 않기 때문인 것으로 생각됩니다. (제 생각입니다.)

 

IOS에서는 추가적으로 video 태그에 playsinline이라는 속성값을 추가해 줘야 합니다.

 

playsinline 속성은 IOS safari에서 비디오가 재생될때 전체화면은 막는 속성입니다.

 

IOS safari에서 playsinline 속성이 없으면 비디오가 재생될때 항상 전체화면이 수행됩니다.

 

따라서 정리해보면 아래와 같습니다.

 

Android Chrome

• muted 속성 

 

IOS Safari

• muted 속성
• playsinline 속성

실제 소스코드는 아래와 같이 사용하시면 됩니다.

 

<video src="test.mp4" width="300" muted autoplay playsinline></video>

 

 

IOS safari에서 자동 재생 시 저전력 모드일때 멈추는 문제

 

얼마전 프로젝트를 진행하다가 분명히 muted에 autoplay 설정을 하였는데도 자동재생이 되지 않는 문제가 발생하였습니다.

 

아무리 검색을 해봐도 이유를 알수 없다가 우연히 아이폰의 저전력 모드가 켜져있는 것을 보고 저전력 모드를 껐더니 정상적으로 동작하는 것을 확인 할 수가 있었습니다.

 

찾아보니 저전력 모드일때는 autoplay muted playsinline 속성이 동작하지 않는다는 사실을 알 수가 있었습니다.

 

이를 위한 해결법은 현재로써는 유저에게 저전력 모드가 켜져있기 때문에 저전력모드를 꺼야한다는 UI를 보여주는 방법밖에 없습니다.

 

저전력모드가 켜져있을때 동작하는 video 태그의 callback 이벤트는 아래와 같습니다.

 

const video = document.getElementById('myVideo');
video.addEventListener('suspend', () => {
  // We're in low-power mode, show fallback UI
  // 저전력 모드일때 진입했을때 가이드 UI를 보여줍니다. 
});
video.addEventListener('play', () => {
  // Remove fallback UI if user plays video manually
  // 유저가 수동으로 비디오를 Play할때는 가이드 UI를 제거해줍니다.
});

 

자동재생이 IOS일때 되지 않는 문제에 대해 같은 문제를 겪고 있는 분들에게 도움이 되셨으면 좋겠습니다 :)

 

감사합니다. ! 

 

 

참고 

https://blog.leehov.in/40?category=946474

03. 모바일 <video>태그 자동 재생 관련 이슈

 

https://simplernerd.com/html-autoplay/

How to Autoplay HTML Video on iOS (Supports Low-Power Mode) - Simplernerd