Chrome의 자동재생 정책

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

2018년 4월에 Chrome의 자동재생 정책이 변경되었으므로 이 변경사항이 사운드를 포함한 동영상 재생에 미치는 영향과 이에 대해 알려드리겠습니다. 스포일러 주의: 사용자가 좋아할 것입니다.

새로운 동작

알고 계셨듯이 웹브라우저에서는 사용자 환경을 개선하고, 광고 차단 프로그램을 설치하는 데 따른 인센티브를 최소화하며, 비용이 많이 들거나 제한된 네트워크에서의 데이터 소비를 줄이기 위해 더 엄격한 자동재생 정책을 적용하고 있습니다. 이러한 변경사항은 사용자가 재생을 더 효과적으로 제어할 수 있게 하고 적법한 사용 사례가 있는 게시자에게 도움이 되도록 하기 위한 것입니다.

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

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

미디어 참여 지수

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

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

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

사용자의 MEI는 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 패턴의 허용 목록을 지정할 수 있습니다.

웹 개발자를 위한 권장사항

오디오/동영상 요소

한 가지 기억해야 할 점은 동영상이 재생될 것이라고 가정하지 말고, 동영상이 실제로 재생되고 있지 않을 때 일시중지 버튼을 표시해서는 안 됩니다. 이 게시물을 간단히 훑어보는 사용자를 위해 아래에 한 번 더 작성하도록 하겠습니다.

항상 재생 함수에서 반환된 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, Twitter, YouTube를 비롯한 일부 웹사이트에서는 이미 이러한 작업을 수행하고 있습니다.

<video id="video" muted 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의 자동재생 정책 규칙에 관한 웹 오디오 재생을 수정하는 간단한 가져오기 요청을 확인하세요.