Chrome의 자동재생 정책

사용자 경험 개선, 광고 차단 프로그램 설치에 대한 인센티브 최소화, 데이터 소비 감소

François Beaufort
François Beaufort
GitHub

2018년 4월에 Chrome의 자동재생 정책이 변경되어 알려드립니다. 이 변경사항이 사운드가 포함된 동영상 재생에 미치는 영향과 이유에 대해 알아보겠습니다. 스포일러 알림: 사용자는 이 기능을 좋아할 것입니다.

리암 니슨: 내가 너를 찾아서 멈춰 버릴 거야.
숀 빈: 동영상을 자동재생하는 것은 아닙니다.
<ph type="x-smartling-placeholder">
</ph> "자동재생" 태그가 지정된 인터넷 밈 Imgflip과 Imgur에서 찾을 수 있습니다.

새로운 동작

알고 계셨듯이 웹브라우저에서는 더 엄격한 자동재생을 채택하고 있습니다. 사용자 경험을 개선하고 설치에 대한 인센티브를 최소화하기 위해 비용이 많이 들고 데이터 제약이 있는 환경에서 데이터 소비를 줄이는 데 네트워크 이번 변경사항은 사용자에게 재생을 더 효과적으로 제어할 수 있는 기능을 제공하고 합법적인 사용 사례가 있는 게시자에게 이점을 제공하기 위한 것입니다.

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

  • 음소거된 자동재생은 항상 허용됩니다.
  • 다음과 같은 경우 사운드가 포함된 자동재생이 허용됩니다.
  • 상위 프레임은 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 노트북을 사용하는 것입니다. 미디어 참여도 점수가 높으므로 자동재생이 허용됩니다.

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

예 3: LocalNewsSite.com에는 텍스트 콘텐츠와 동영상 콘텐츠가 모두 있습니다. 대부분의 사용자가 홈페이지를 통해 사이트에 들어간 후 뉴스 기사를 클릭합니다. 사용자에 의해 뉴스 기사 페이지에서 자동재생이 허용됩니다. 상호작용하지 않습니다. 하지만 사용자가 모든 Google 계정을 당연한 결과입니다.

예 4: MyMovieReviewBlog.com가 리뷰와 함께 영화 트레일러가 포함된 iframe을 삽입합니다. 사용자들이 도메인과 상호작용하여 블로그를 방문했기 때문에 자동재생은 허용됩니다. 하지만 블로그는 권한이 있어야 합니다.

Chrome Enterprise 정책

Chrome Enterprise 정책으로 자동재생 동작을 변경할 수 있습니다. 무인 시스템 등의 사용 사례에 적합합니다 자세한 내용은 엔터프라이즈 자동재생을 설정하는 방법을 알아볼 수 있는 목록 도움말 페이지 정책:

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

웹 개발자를 위한 권장사항

오디오/동영상 요소

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

재생 함수가 반환하는 프로미스를 항상 확인하여 거부되었습니다.

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, Twitter, 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()를 호출해야 합니다. 사용자가 페이지와 상호작용한 후 (예: 사용자가 클릭한 후) 버튼) 또는 AudioContext이(가) 사용자 후에 재개됩니다. 연결된 노드에서 start()가 호출되면 동작

// 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의 자동재생 정책 규칙에 관한 웹 오디오 재생을 수정하는 작은 풀 리퀘스트를 확인하세요.