DOMException: play() failed :: 마이구미

이 글은 Chrome Autoplay Policy 변화에 의한 에러 이슈를 다룬다.

주제는 정책의 목적, 장점 그리고 에러를 해결하기 위한 방안을 살펴본다.

웹 개발을 하다가, video/audio 태그를 통한 자동 재생을 요구할 경우에 경험할 수 있다.

공식 문서 - https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

본인은 예전에 개발 기능 중 비디오와 오디오를 자동 재생해야을 진행하다가, 다음과 같은 에러를 발생하는 경험을 했다.

결론은 정책적인 이슈라서, 자세히 보지않고 넘겼다.

그러던 중, 최근 다시 한번 문제를 경험했다.

그로인해, 궁금증을 해결하는 과정에서 개발 외적인 요소에서의 정보도 얻을 수 있어, 글을 남기게 되었다.

video/audio 태그를 통해 자동 재생 기능을 구현할 때, 다음과 같은 에러를 경험할 수 있다.

(경험할 수 도 있다는 것은 100% 경험한다는 것은 아니기 때문이다.)

DOMException: play() failed because the user didn't interact with the document first.

출력되는 에러에서도 관련 링크를 제공해주는데, 접속하면 위에서 언급한 공식 문서가 나온다.

개발 입장에서는 "나는 자동 재생을 원하는데, 왜 무슨 이유로 자동 재생을 막는 것인가?"

이렇듯 본인이 처음에 의문을 가졌던 건, 정책의 존재 이유와 이로 인한 장점이다.

문서에서는 다음과 같이 설명한다.

1. 사용자 경험 개선
2. 광고 차단기 설치로 인한 인센티브 최소화
3. 네트워크에서의 데이터 소비의 비용 감소

처음에는 3가지 모두 이해하지 못했지만, 모두 연결되어있다는 것을 이해할 수 있었다.

핵심은 사용자의 인터렉션이다.

자동 재생은 사용자의 인터렉션을 무시한 채, 벌어지는 상황으로 받아들일 수 있다.

예를 들어, 자동 재생으로 인해 원하지 않은 영상의 소리가 나오게 되어, 관련된 피해를 볼 수도 있다.

현재 대부분 SNS 를 확인해보면, 자동 재생은 하고 있으면서, 음소거인 상태를 확인할 수 있다.

이것은 자동 재생을 허용하는 정책 중 한가지이다. (그 외 문서 참고)

이렇게 사용자의 인터렉션의 여부는 어느정도 3가지 모두 영향을 끼친다는 것을 느낄 수 있다.

개발에 있어서는, 정책을 무시하고 싶을 수 있다.

웹 사이트를 개발한다면, 정책을 무시하고 갈 이유는 없다고 본다.

또한, 문서에서도 무시하는 방법은 아니지만, 팁들을 제공하고 있다.

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

하지만 웹 개발이지만, 웹 사이트 같은 것이 아닌, 단순 웹 기술을 활용한 개발일 수도 있다.

그래서 정책을 무시해도 상관없는 상황이라면, 크롬 플래그 옵션을 통해 완전히 무시할 수 있다.

chrome://flags/#autoplay-policy

본인은 flags 페이지를 자주 활용한다.

Experimental Web Platform features 을 통해서 현재 사용할 수 없는 것들도 쉽게 적용할 수 있다.

예를 들어, backdrop-filter 같은 css 를 통해 blur 를 활용할 수도 있다.

backdrop-filter: blur(10px);