Chrome의 자동재생 정책

사용자 환경 개선, 광고 차단 프로그램 설치 유인 감소, 데이터 소비 감소

François Beaufort
François Beaufort
GitHub

2018년 4월에 Chrome의 자동재생 정책이 변경되었습니다. 이 변경사항이 사운드가 포함된 동영상 재생에 어떤 영향을 미치고 왜 그런지 알려드리겠습니다. 스포일러 알림: 사용자들이 좋아할 만한 기능입니다.

리암 니슨: 내가 너를 찾아서 멈춰 버릴 거야.
숀 빈: 동영상을 자동재생하는 것은 아닙니다.
Imgflip 및 Imgur에서 '자동재생' 태그가 지정된 인터넷 밈

새로운 동작

알다시피 웹브라우저는 사용자 환경을 개선하고, 광고 차단 프로그램을 설치하려는 유인을 최소화하며, 비용이 많이 들거나 제약이 있는 네트워크에서 데이터 소비를 줄이기 위해 더 엄격한 자동재생 정책을 시행하고 있습니다. 이번 변경사항은 사용자에게 재생을 더 효과적으로 제어할 수 있는 기능을 제공하고 합법적인 사용 사례가 있는 게시자에게 이점을 제공하기 위한 것입니다.

Chrome의 자동재생 정책은 간단합니다.

  • 음소거된 자동재생은 항상 허용됩니다.
  • 다음과 같은 경우 사운드가 포함된 자동재생이 허용됩니다.
    • 사용자가 도메인과 상호작용했습니다 (클릭, 탭 등).
    • 데스크톱에서 사용자의 미디어 참여도 지수 기준점이 초과되었습니다. 즉, 사용자가 이전에 오디오가 포함된 동영상을 재생한 적이 있습니다.
    • 사용자가 모바일에서 사이트를 홈 화면에 추가했거나 데스크톱에서 PWA를 설치했습니다.
  • 상위 프레임은 iframe에 자동재생 권한을 위임하여 소리가 있는 자동재생을 허용할 수 있습니다.

미디어 참여도 지수

미디어 참여도 지수 (MEI)는 개인이 사이트에서 미디어를 소비하는 성향을 측정합니다. Chrome의 접근 방식은 출처별로 중요한 미디어 재생 이벤트에 대한 방문 횟수의 비율입니다.

  • 미디어 (오디오/동영상) 소비 시간이 7초 이상이어야 합니다.
  • 오디오가 있어야 하며 음소거 해제되어야 합니다.
  • 동영상이 있는 탭이 활성 상태입니다.
  • 동영상 크기 (픽셀)는 200x140보다 커야 합니다.

이를 바탕으로 Chrome은 미디어 참여도 점수를 계산하며, 이 점수는 미디어가 정기적으로 재생되는 사이트에서 가장 높습니다. 이 값이 충분히 높으면 데스크톱에서만 미디어가 자동재생될 수 있습니다.

사용자의 MEI는 about://media-engagement 내부 페이지에서 확인할 수 있습니다.

about://media-engagement 내부 페이지의 스크린샷
Chrome의 about://media-engagement 내부 페이지 스크린샷

개발자 스위치

개발자는 로컬에서 Chrome 자동재생 정책 동작을 변경하여 웹사이트에서 다양한 수준의 사용자 참여도를 테스트할 수 있습니다.

  • 명령줄 플래그 chrome.exe --autoplay-policy=no-user-gesture-required를 사용하여 자동재생 정책을 완전히 사용 중지할 수 있습니다. 이렇게 하면 사용자가 사이트에 적극적으로 참여하고 재생 자동재생이 항상 허용되는 것처럼 웹사이트를 테스트할 수 있습니다.

  • MEI를 사용 중지하고 전체 MEI가 가장 높은 사이트에서 신규 사용자에게 자동재생이 기본적으로 적용되는지 여부를 결정하여 자동재생이 허용되지 않도록 할 수도 있습니다. 플래그로 이렇게 수행: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

iframe 위임

권한 정책을 사용하면 개발자가 브라우저 기능과 API를 선택적으로 사용 설정하거나 사용 중지할 수 있습니다. 출처가 자동재생 권한을 수신하면 자동재생 권한 정책을 사용하여 교차 출처 iframe에 해당 권한을 위임할 수 있습니다. 동일 출처 iframe에서는 기본적으로 자동재생이 허용됩니다.

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

자동재생 권한 정책이 사용 중지된 경우 사용자 동작 없이 play()를 호출하면 NotAllowedError DOMException과 함께 약속이 거부됩니다. 자동재생 속성도 무시됩니다.

예

예 1: 사용자가 노트북에서 VideoSubscriptionSite.com를 방문할 때마다 TV 프로그램이나 영화를 시청합니다. 미디어 참여도 점수가 높으므로 자동재생이 허용됩니다.

예 2: GlobalNewsSite.com에는 텍스트 콘텐츠와 동영상 콘텐츠가 모두 있습니다. 대부분의 사용자는 텍스트 콘텐츠를 보러 사이트를 방문하며 동영상은 가끔만 시청합니다. 사용자의 미디어 참여도 점수가 낮으므로 사용자가 소셜 미디어 페이지 또는 검색에서 바로 이동하는 경우 자동재생이 허용되지 않습니다.

예 3: LocalNewsSite.com에는 텍스트 콘텐츠와 동영상 콘텐츠가 모두 있습니다. 대부분의 사용자가 홈페이지를 통해 사이트에 들어간 후 뉴스 기사를 클릭합니다. 뉴스 기사 페이지의 자동재생은 사용자가 도메인과 상호작용하기 때문에 허용됩니다. 하지만 사용자가 콘텐츠 자동재생에 놀라지 않도록 주의해야 합니다.

예 4: MyMovieReviewBlog.com가 리뷰와 함께 영화 트레일러가 포함된 iframe을 삽입합니다. 사용자가 도메인과 상호작용하여 블로그로 이동했으므로 자동재생이 허용됩니다. 그러나 콘텐츠가 자동재생되려면 블로그에서 이 권한을 iframe에 명시적으로 위임해야 합니다.

Chrome Enterprise 정책

키오스크나 무인 시스템과 같은 사용 사례의 경우 Chrome Enterprise 정책으로 자동재생 동작을 변경할 수 있습니다. 자동재생 관련 엔터프라이즈 정책을 설정하는 방법은 정책 목록 도움말 페이지를 참고하세요.

  • AutoplayAllowed 정책은 자동재생 허용 여부를 제어합니다.
  • AutoplayAllowlist 정책을 사용하면 자동재생이 항상 사용 설정되는 URL 패턴의 허용 목록을 지정할 수 있습니다.

웹 개발자를 위한 권장사항

오디오/비디오 요소

한 가지 기억해야 할 사항이 있습니다. 동영상이 재생될 것이라고 가정하지 마세요. 동영상이 실제로 재생되지 않을 때 일시중지 버튼을 표시하지 마세요. 이 내용은 매우 중요하므로 게시물을 훑어보는 분들을 위해 아래에 한 번 더 작성하겠습니다.

play 함수에서 반환된 Promise를 항상 확인하여 거부되었는지 확인해야 합니다.

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.
  });
}

사용자의 참여를 유도하는 멋진 방법 중 하나는 음소거된 자동재생을 사용하고 사용자가 음소거를 해제하도록 선택하도록 하는 것입니다. (아래 예시를 참고하세요.) Facebook, Instagram, 트위터, YouTube 등 일부 웹사이트는 이미 이를 효과적으로 실행하고 있습니다.

<video id="video" muted playsinline autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

사용자 활성화를 트리거하는 이벤트는 아직 브라우저에서 일관되게 정의되지 않았습니다. 그때까지는 "click"를 사용하는 것이 좋습니다. GitHub 문제 whatwg/html#3849를 참고하세요.

웹 오디오

Web Audio API는 Chrome 71부터 자동재생의 적용을 받습니다. 이 방법에는 몇 가지 유의사항이 있습니다. 먼저 사용자가 무슨 일이 일어나고 있는지 알 수 있도록 오디오 재생을 시작하기 전에 사용자 상호작용을 기다리는 것이 좋습니다. 예를 들어 '재생' 버튼이나 '켜기/끄기' 스위치를 생각해 보세요. 앱의 흐름에 따라 '음소거 해제' 버튼을 추가할 수도 있습니다.

페이지 로드 시 AudioContext를 만드는 경우 사용자가 페이지와 상호작용한 후 (예: 사용자가 버튼을 클릭한 후) resume()를 호출해야 합니다. 또는 연결된 노드에서 start()이 호출되면 사용자 동작 후에 AudioContext가 재개됩니다.

// Existing code unchanged.
window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

사용자가 페이지와 상호작용할 때만 AudioContext를 만들 수도 있습니다.

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

브라우저에서 오디오를 재생하는 데 사용자 상호작용이 필요한지 감지하려면 AudioContext.state를 만든 후 확인합니다. 재생이 허용되면 즉시 running로 전환됩니다. 그렇지 않으면 suspended입니다. statechange 이벤트를 수신 대기하면 변경사항을 비동기식으로 감지할 수 있습니다.

예를 보려면 https://airhorner.com의 자동재생 정책 규칙에 관한 웹 오디오 재생을 수정하는 작은 풀 리퀘스트를 확인하세요.