원문: Auto-Play Policy Changes for macOS
Auto-Play Policy Changes for macOS
This is a guest post from the Safari team about changes to how Safari handles HTML5 video and audio auto-play.
webkit.org
이 게시물은 Safari 팀에서 Safari가 HTML5 비디오 및 오디오 자동 재생을 처리하는 방법의 변경사항에 대한 게스트 게시물입니다. 이러한 변경사항은 웹사이트와의 호환성에 영향을 줄 수 있습니다.
작년에 사파리의 iOS 용 비디오 정책 업데이트에 따라, 이번 주에는 Mac에서 자동 재생 정책을 크게 변한다고 발표했습니다. 이러한 변경 사항을 통해 특히 소리와 함께 자동 재생되는 웹 사이트를 , 사용자가 방해 받지 않고 웹 사이트를 탐색할 수 있습니다.
새 행동 New Behaviors
WebKit 엔진은 유저 에이전트가 미디어 자동 재생 정책을 설정하고 관리하는 풍부한 유연성을 제공합니다. macOS High Sierra 에서 Safari는 기본적으로 자동 추론 엔진을 이용하여 대부분의 웹사이트의 소리가 있는 자동 재생 미디어 요소를 차단합니다. 또한 Safari 11에서는 Safari의 환경설정의 새로운 "Websites" 패널을 열거나, Safari 메뉴의 "Settings for Thie Website..." 옵션을 통해 어떤 사이트가 비디오와 오디오의 자동 재생할 수 있또록 허용하는유저 컨트롤을 제공합니다.
또한 새로운 절전 기능은 백그라운드 탭이나 화면 밖에서 비디오가 무음 자동 재생되는 것을 방지합니다.
웹 개발자를 위한 모범 사례 Best Practices for Web Developers
웹사이트는 <video>, <audio>를 사용하려면 재생하기 위해 사용자 제스처 클릭이 필요하다고 가정해야 합니다. 자동 재생이 거부되었는지 확인하는 것이 중요합니다. 이제 사용자는 무음 비디오를 포함해서 모든 형태의 자동 재생을 끌 수 있습니다. 아래 코드 스니펫은 확인하는 것이 얼마나 쉬운지 보여줍니다. 새로운 자동 재생 정책은 시각적으로 뭔가를 발생시키는 도구(백그라운드 비디오, GIF로 애니메이션된 비디오)로써의 비디오와 소모성 콘텐츠 역할을 하는 비디오 모두에 적용된다는 점이 중요합니다. 웹 개발자는 이러한 새로운 동작으로 사이트를 테스트하여 Safari 또는 사용자가 자동 재생을 비활성화 할 때 모든 사용자 정의 미디어 컨트롤러가 정상적으로 동작하는지 확인하는 것이 좋습니다.
- Webkit의 내장된 미디어 컨트롤을 이용하는 웹사이트는 새로운 정책에 자동으로 작동합니다.
- 미디어 요소가 재생될 것이라고 가정하지 말고, 처음부터 일시정지 버튼을 표시 하지 마세요. HTMLMediaElement에서 play 함수가 반환한 Promise를 보고 거부되었는지 확인하세요:
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// 자동 재생이 막힘
// 사용자가 수동으로 재생을 시작할 수 있도록 UI를 표시
}).then(() => {
// 자동 재생 시작됨
});
}- 자동 재생 제한은 요소 별로 부여됩니다. 여러 비디오를 연속해서 재생하려면(혹은 메인 비디오 재생 전에 프리 롤 광고가 유음으로 재생되는 경우) 여러 미디어 요소를 만드는 대신 미디어 요소의 소스(source)를 변경하세요.
- 미디어 컨트롤을 표시하지 않고 광고를 재생하면 자동 재생 되지 않을 수 있으며 사용자는 재생을 시작할 수 없기 때문에 하지 마십시오.
- 무음으로 렌더링되는 오디오 트랙도 여전히 오디오 트랙입니다. 그 존재 여부가 비디오가 자동 재생 되는지 여부에 영향을 미칩니다. 이 경우 무음 오디오 트랙이 있는 비디오는 재생되지 않습니다. 오디오 트랙을 제거하거나 미디어 요소에서 음소거 속성을 설정할 수 있습니다.
피드백 Feedback
새로운 자동 재생 정책에 대한 개발자들의 의견을 듣고싶습니다. 웹 기술 에반젤리스트 Jon Davis의 트위터로 연락하여 당신의 생각을 우리 팀에게 공유해주세요.
오디오 트랙을 렌더링한다는 말을 처음 이 글에서 접했는데요. 눈으로 보이게 노출시키는 것을 렌더링한다고 생각했는데, 찾아보니 특정한 타입의 입력을 디지털 결과물로 만드는 것을 렌더링이라고 하나 봅니다.(그래픽, 비디오, 오디오) 출처