사용자 경험 개선, 광고 차단 프로그램 설치에 따른 인센티브 최소화, 데이터 소비 감소
2018년 4월에 Chrome의 자동재생 정책이 변경되었습니다. 이 알림이 사운드를 포함한 동영상 재생에 왜 어떤 영향을 미치는지 알려드립니다. 스포일러 경고: 사용자가 좋아할 겁니다!
새로운 동작
알고 계시겠지만 웹 브라우저는 사용자 환경을 개선하고, 광고 차단 프로그램 설치에 따른 인센티브를 최소화하며, 비용이 많이 들거나 제한된 네트워크의 데이터 소비를 줄이기 위해 더 엄격한 자동재생 정책으로 전환하고 있습니다. 이러한 변경사항은 사용자에게 재생을 더 효과적으로 제어하고 합법적인 사용 사례를 통해 게시자에게 혜택을 제공하기 위한 것입니다.
Chrome의 자동재생 정책은 간단합니다.
- 음소거된 자동재생은 항상 허용됩니다.
- 다음과 같은 경우 소리와 함께 자동재생이 허용됩니다.
- 사용자가 도메인과 상호작용했습니다 (클릭, 탭 등).
- 데스크톱에서 사용자의 미디어 참여 지수 기준점이 초과되었습니다. 즉, 사용자가 이전에 사운드가 포함된 동영상을 재생했다는 의미입니다.
- 사용자가 모바일에서 홈 화면에 사이트를 추가했거나 데스크톱에 PWA를 설치했습니다.
- 상단 프레임은 iframe에 자동재생 권한을 위임하여 사운드가 포함된 자동재생을 허용할 수 있습니다.
미디어 참여 지수
미디어 참여 지수 (MEI)는 사이트에서 미디어를 소비하는 개인의 경향을 측정합니다. Chrome의 접근 방식은 출처당 중요한 미디어 재생 이벤트 대비 방문 비율입니다.
- 미디어 (오디오/동영상) 사용 시간이 7초보다 커야 합니다.
- 오디오가 있고 음소거가 해제되어 있어야 합니다.
- 동영상이 있는 탭이 활성 상태입니다.
- 동영상 크기 (픽셀)는 200x140보다 커야 합니다.
이로부터 Chrome은 미디어 참여 점수를 계산하는데 이 점수는 미디어가 정기적으로 재생되는 사이트에서 가장 높습니다. 충분히 높은 경우 미디어는 데스크톱에서만 자동 재생할 수 있습니다.
사용자의 MEI는 about://media-engagement 내부 페이지에서 확인할 수 있습니다.
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 엔터프라이즈 정책
키오스크 또는 무인 시스템과 같은 사용 사례의 경우 Chrome 엔터프라이즈 정책에 따라 자동재생 동작을 변경할 수 있습니다. 정책 목록 도움말 페이지에서 자동재생 관련 엔터프라이즈 정책을 설정하는 방법을 알아보세요.
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, 트위터, 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의 자동 재생 정책 규칙에 관한 웹 오디오 재생을 수정하는 간단한 pull 요청을 확인하세요.