HTMLMediaElement.play()가 프로미스를 반환합니다.

Jeff Posnick

웹에서 오디오와 동영상을 자동으로 재생하는 기능은 강력한 기능이지만 플랫폼마다 제한사항이 다릅니다. 오늘날 대부분의 데스크톱 브라우저는 항상 사용자 상호작용 없이 JavaScript를 통해 웹페이지에서 <video> 또는 <audio> 재생을 시작하도록 허용합니다. 그러나 대부분의 모바일 브라우저에서는 JavaScript가 시작한 재생이 시작되기 전에 명시적인 사용자 동작이 필요합니다. 이렇게 하면 대역폭 요금을 지불하거나 공용 환경에 있을 수 있는 많은 모바일 사용자가 페이지와 명시적으로 상호작용하지 않고도 실수로 미디어를 다운로드하고 재생하지 않도록 할 수 있습니다.

이전에는 재생을 시작하는 데 사용자 상호작용이 필요한지 확인하고 (자동) 재생을 시도했을 때 발생하는 오류를 감지하기 어려웠습니다. 다양한 해결 방법이 있지만 이상적이지는 않습니다. 이 불확실성을 해결하기 위한 기본 play() 메서드의 개선이 오래되어 이제 Chrome 50에서 최초 구현을 통해 웹 플랫폼에 도달했습니다.

이제 <video> 또는 <audio> 요소의 play() 호출이 프로미스를 반환합니다. 재생에 성공하면 Promise가 처리되고 재생에 실패하면 실패를 설명하는 오류 메시지와 함께 Promise가 거부됩니다. 이를 통해 다음과 같이 직관적인 코드를 작성할 수 있습니다.

var playPromise = document.querySelector('video').play();

// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
    playPromise.then(function() {
    // Automatic playback started!
    }).catch(function(error) {
    // Automatic playback failed.
    // Show a UI element to let the user manually start playback.
    });
}

새 Promise 기반 인터페이스를 사용하면 play() 메서드의 성공 여부를 감지하는 것 외에도 play() 메서드가 성공한 시점을 확인할 수 있습니다. 웹브라우저에서 재생 시작을 지연하기로 결정할 수 있는 컨텍스트가 있습니다. 예를 들어 데스크톱 Chrome은 탭이 표시될 때까지 <video> 재생을 시작하지 않습니다. Promise는 재생이 실제로 시작될 때까지 처리되지 않으므로 미디어가 재생될 때까지 then() 내의 코드가 실행되지 않습니다. playing 이벤트가 발생할 때까지 일정 시간 기다렸다가 이벤트가 발생하지 않으면 실패로 가정하는 등 play()의 성공 여부를 판단하는 이전 방법은 지연된 재생 시나리오에서 거짓 음성 결과가 발생하기 쉽습니다.

이 새로운 기능의 실제 예시를 게시했습니다. 이 Promise 기반 인터페이스를 지원하는 Chrome 50과 같은 브라우저에서 확인하세요. 페이지를 방문하면 음악이 자동으로 재생됩니다. 물론 그렇지 않은 경우도 있습니다.

위험 영역

<video> 내의 <source>는 play() 약속이 거부되지 않도록 합니다.

<video src="not-existing-video.mp4"\>의 경우 동영상이 없으므로 예상대로 play() 약속이 거부됩니다. <video><source src="not-existing-video.mp4" type='video/mp4'></video>의 경우 play() 약속은 결코 거부되지 않습니다. 유효한 소스가 없는 경우에만 발생합니다.

Chromium 버그