WEB-DEVELOPMENT

  • account_tree
  • bug_report

자동 재생 가이드

비디오, 오디오 요소들은 대표적인 미디어이다. 콘텐츠 구성 요소로써 정보와 감성 전달력이 매우 뛰어나지만 웹브라우저의 이용자 입장에서 본다면 자동으로 비디오, 오디오 요소들이  시작되는 것은 선택의 관점에서 불합리하다. 따라서 각 웹브라우저들은 이러한 문제를 고민하여 정책에 반영하고 있다. 이 글을 작성하고 있는 시점을 기준으로 대부분의 웹브라우저는 자동 실행을 제한적으로 허용하고 있다.

조용한 탐색을 원하는 경우 오디오를 가진 비디오나 오디오를 자동으로 재생하게 하면 사용자 경험에 악영향을 준다. 초기에는 웹브라우저가 이러한 사용자 경험 문제를 다루지 않았지만 이제는 각 웹브라우저마다 미디오 자동 재생에 대한 가이드를 제시하고 있다. 대부분의 웹브라우저는 기본적으로 자동 재생을 차단한다. 다만 웹브라우저마다 차이는 있지만 일정 요건을 갖춘 경우에는 자동 재생을 허락하는 경우도 있다.

자동 재생이란?

자동 재생은 웹페이지가 로드되고 사용자의 동의 없이도 오디오 또는 비디오 요소가 재생이 되는 것을 말한다.

자동 재생은 기본적으로 <video> 또는 <audio> 요소의 attribute(이하 속성)인 autoplay를 통해 가능하고 자바스크립트 로직을 통해서도 가능하다.

autoplay 속성을 사용

<audio src="/music.mp4" autoplay></audio>

자바스크립트 로직

const elVideo = document.getElementById("myvideo");
elVideo.play();

또한 일반적이지는 않지만 Web Audio API를 이용해 구현한 미디어도 동일하다.

기본적으로 자동 재생이 가능한 경우

다음 아래의 경우에 해당 한다면 자동 재생을 기본적으로 허용해 준다. 하지만 웹브라우저의 자체 가이드에 따라 해당되지 않거나 다른 방식이 있을 수도 있다.

  • 음소거(muted)이거나 오디오 볼륨이 0으로 설정된 경우
  • <video> 요소에 오디오 트랙이 없는 경우(무음 비디오)
  • 사용자와 상호 작용이 된 경우
  • 웹브라우저가 판단하기에 사용자가 해당 웹사이트에서 미디어를 자주 재생하거나 수동으로 화이트 리스트에 웹사이트를 등록한 경우(웹브라우저마다 상이할 수 있음)
  • 자동 재생 정책(feature policy)이 허용으로 지정되어 <iframe>document에서 자동 재생을 지원하는 경우

왜 자동 재생이 이슈인가?

위에서 제시한 자동 재생 조건이 아닌 경우에는 자동 재생을 할 수 없다는 뜻이다. 그렇다면 왜 조건에 따른 자동 재생 정책을 적용하는가?

사용자의 이용 환경과 성향은 다양하다. 따라서 미디어 요소가 이용자와는 무관하게 재생이 되는 것은 바람직해 보이지 않는 다는 것은 대부분 공감한다. 예를 들어서 조용한 도서관에서 웹서비스를 이용하고 있다면 의도하지 않은 미디어 요소의 재생은 사용자를 당황스럽게 할 것이다.

예전에는 이러한 이슈조차 없었지만 이제는 웹 서비스를 이용하는 이용자들의 증가와 프라이버시에 대한 높은 관심 등이 웹브라우저 공급 업체들에게 고민을 던지고 있는 것이다. 그 결과가 실제로 웹브라우저의 다양한 서비스 정책에 적용되고 있다.

Web Audio API로 구현한 미디어도 동일한 정책을 적용받는다.

자동 재생을 구현하기 위해서는?

미디어의 음소거

다음과 같이 미디어의 오디오를 음소거 처리하는 경우에는 자동 재생을 허용한다.

<audio autoplay muted>
    <source src="/music.mp3" type="audio/mp3" />
</audio>
<video autoplay muted>
    <source src="/clip.mp4" type="video/mp4" />
</video>

코드를 보면 attribute에서 'muted'가 명시되어 있다. 즉 음소거를 한 상태라면 자동 재생을 허용한다는 뜻이다. 사실 음소거를 전제로 자동 재생을 허용한다면 미디오 요소로서 의미가 있을까 라는 의구심이 든다. 

<iframe>에서 feature policy 적용

<iframe>allow 속성을 추가하여 해당 프레임에 feature policy를 적용하면 src 속성에서 지정된 도메인에서만 미디어를 자동 재생하도록 할 수 있다.

<iframe src="/mediaplayer.html" allow="autoplay 'src'" ></iframe>

실질적인 미디어의 재생 시점은?

원칙적으로 사용자가 소리가 나오더라도 재생을 시작하겠다는 정상적인 의사 표시가 있는 경우에만 가능하다. 즉 사용자의 직접적인 관여로 발생한 이벤트에 의해서 재생을 하게 할 수 있다.

정리

현대의 웹사이트는 미디어를 적극적으로 활용한다. 특히 동영상을 정보가 아닌 디자인 컨셉트로 사용되기도 한다. 이러한 웹사이트 기획 트렌드에 따라 웹브라우저를 개발하는 업체에서도 사용자의 관점에서만 정책을 수립하는 태도에서 벗어나 중립적인 고민을 하고 있다고 봐야 한다. 앞으로 이 고민에 대한 결과로 기술 진보가 더 이루어질 것이라 기대를 해본다.

현재의 웹 개발자는 다음의 내용을 이해하고 그에 맞는 개발을 해야 할 것이다.

  1. 기본적으로 정상적인 자동 재생(autoplay) 속성은 사용자의 상호작용 없이는 가능하지 않다는 것을 염두해야 한다.
    • 자주 방문하는 웹사이트가 될 수 있음을 고려하거나 미디어의 소비가 높은 유형의 웹사이트를 개발하는 것이라면 웹브라우저의 제한적 자동 재생 정책을 활용할 필요가 있다.
    • Feture Policy 정책을 활용할 필요가 있다.
  2. 어떠한 우회방법을 사용하더라도 자동 재생이 가능하다는 전제로 설계해서는 안된다.
    1. autoplay로 자동 재생이 가능한 경우 play 이벤트를 통해서 재생 여부 판단
    2. play() 메소드로 자동 재생을 한 경우에 promise 객체를 통해서 재생 여부 판단

autoplay 속성을 이용하여 자동 재생을 한 경우 샘플 코드

<video id="myvideo" src="movie.mp4" autoplay></video>
const elVideo = document.getElementById("myvideo");
var timer;
// 일회성 이벤트로 비디오 요소에게 play 이벤트 등록
elVideo.addEventListener("play", function(e) {
  // 1초 이내에 예약된 스케줄을 취소가 가능
  clearTimeout(timer);
}, { once : true });

/*
 미디어가 재생 가능한 상태이고
 1초 이내에 play 이벤트 핸들러에서 setTimeout으로 등록된 스케줄이 취소되지 않는다면
 자동 재생이 안되고 있다는 것을 의미한다.
*/
elVideo.addEventListener("canplay", function() {
   timer = setTimeout(function() {
     // 비디오가 재생되지 않고 있음을 피드백한다.
   }, 1000);
});

play() 메소드를 사용하여 자동 재생을 한 경우 샘플 코드

<video id="myvideo" src="movie.mp4"></video>
const elVideo = document.getElementById("myvideo");
// play() 메소드는 Promise 객체를 생성하여 반환한다.
let playPromise = elVideo.play();

if(playPromise !== undefined) {
   playPromise.catch(error => {
      // 에러가 자동 재생을 막아서 생긴 것이라면,
      if(error.name == "NotAllowedError") {
         // 사용자가 직접 재생을 하도록 UI를 표시
      } else {
    	// 그 밖에 에러 체크 가능
      }
  }).then(() => {
  	// 정상적인 재생중에 어떤 처리가 필요한 경우
  });
}

if(playPromise !== undefined)Promise 객체를 지원하지 않는 경우에 대비해 필요한 코드이다. NotAllowedError은 자동 재생 금지 같은 퍼미션 문제임을 알려주는 메시지이다.

외부 리소스

Chrome의 자동 재생 정책
HTML5 비디오 자동 재생 관련 정책 및 조건(Chrome, Safari를 중심으로)
자동 재생과 관련해서 심화 정리
기능 정책
크롬 웹브라우저의 기능 정책