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

이번 프로젝트에서 가장 골치아팠던 부분은 바로 일부 페이지에서 사용되는 동영상을 자동재생하는 기능이었다.
쉽게 될 줄 알았는데 아무래도 브라우저에서 사용자가 원하지 않는 동영상이 자동으로 재생되는것을 막아서 발생하는 문제였는데,
이를 한번 정리해보겠다.

video 태그에 autoplay가 작동하기 위해서는 muted 요소와, playsinline 요소(iOS)가 추가되어야 한다.

많은 브라우저에서 정책상의 문제로 소리가 나오는 동영상은 자동 재생 하지 않는다. 즉 음소거 영상의 경우에만 자동재생이 허용된다. 이를 위해 자동재생이 필요한 video 태그에는 muted 요소를 추가해줘야한다.

* video파일에 audio track이 존재하지 않으면 muted속성이 없어도 자동재생이 된다.
(출처: http://iropke.com/archive/video-autoplay.html)

muted 요소를 추가해주면 Android 환경에서는 동영상이 자동으로 재생되지만, iOS에서는 여전히 작동하지 않는다. iOS에서는 비디오를 자동재생하기 위해서 playsinline이라는 요소도 함께 추가 해줘야 한다.

결론적으로, 아래의 세 가지 요소는 한 세트라고 생각하면 된다.

autoplay

muted

playsinline

<video autoplay muted playsinline>
  <source src="video.mp4" type="video/mp4"></source>
</video>

 

... 그리고, 이 모든 설정 후에도 iOS10이상 버전의 "저전력모드'와,  IE8이하에서는 autoplay가 작동하지 않는다.

왜 재생이 안되는 거니....

모든 설정을 한 뒤에도 가끔가다가 내 핸드폰(iPhone XR)에서 동영상이 나오는 페이지에서 영상이 자동 재생 되지 않았는데, 그 원인은 바로 "저전력모드" 때문이었다. 답답하기도 했지만 한편으로는 유저의 입장에서 생각해보면 왜 그런지 이해도 됐다.

그런데 우리 앱은 영상이 모두 끝나지 않으면 다음 페이지로 넘어가지 않는다.
때문에 autoplay가 작동하지 않는 경우에 다음 페이지로 넘어가는 기능을 만들어야 했다.
이를 위해 다음의 경우에는 강제적으로 다음 페이지로 넘어가도록 했다.
  1. video에 error 이벤트가 발생했을 때,
  2. 짧은 시간 뒤에 (500ms) 동영상이 멈춰있을 때

playVideo = () => {
  try {
    this._video.play();

    // 비디오가 정상적으로 동작하고 종료 되었을 때,
    this._video.addEventListener('ended',(e) => {
      nextPage();
    });

    // 비디오가 재생 중 에러를 내보냈을 때,
    this._video.addEventListener('error', (e) => {
      nextPage();
    })

    // 0.5 초 뒤에 비디오 상태 체크
    setTimeout(() => this.check(), 500);
  } catch(e) {
    nextPage();
  }
}

check = () => {
  // 0.5초 뒤에 비디오가 정지 상태일 때
  if (this._video.paused || !this._video.played) {
    nextPage();
  }
}

정확한 이유는 모르겠지만 어떤 영상은 paused인 상태일 때가 있고, paused 상태가 아니더라도 재생 중이 아닌 경우가 있었다.
때문에 !played 일 때에도 다음 페이지로 강제로 넘어가도록 설정했고 결과적으로 잘 작동했다.

 

자동재생...
다음부터 서비스를 기획할 때에는 이번 경험을 양분 삼아 비디오 자동재생이 반드시 필요한 웹 페이지를 만드는 것을 지양해야겠다.

 

참고