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

웹에서 오디오 및 동영상을 자동으로 재생하는 기능은 강력한 기능이며 플랫폼에 따라 다른 제한사항이 적용됩니다. 오늘날 대부분의 데스크톱 브라우저에서는 웹페이지가 항상 사용자 상호작용 없이 JavaScript를 통해 <video> 또는 <audio> 재생을 시작할 수 있습니다. 하지만 대부분의 모바일 브라우저에서는 명시적인 사용자 동작이 있어야 JavaScript에서 시작된 재생이 발생할 수 있습니다. 이를 통해 대다수의 모바일 사용자가 대역폭 비용을 지불하거나 공개 환경에 있을 수 있으므로 페이지와 명시적으로 상호작용하지 않고 실수로 미디어를 다운로드하고 재생하는 것을 방지할 수 있습니다.

지금까지 재생을 시작하는 데 사용자 상호작용이 필요한지 판단하고 자동 재생을 시도했다가 실패했을 때 발생하는 실패를 감지하는 것은 어려웠습니다. 다양한 해결 방법이 존재하지만 이상적인 방법은 아닙니다. 이러한 불확실성을 해결하기 위한 기본 play() 메서드 개선은 이미 지났으며 이제 웹 플랫폼에 적용되었으며 Chrome 50에서 초기 구현되었습니다.

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

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.
    });
}

새 프로미스 기반 인터페이스를 사용하면 play() 메서드의 성공 여부를 감지할 뿐만 아니라 play() 메서드의 성공 시기를 확인할 수 있습니다. 웹브라우저에서 재생 시작을 지연하도록 결정하는 경우가 있습니다. 예를 들어 데스크톱 Chrome에서는 탭이 표시될 때까지 <video> 재생을 시작하지 않습니다. 프로미스는 재생이 실제로 시작될 때까지 실행되지 않습니다. 즉, then() 내부의 코드는 미디어가 재생될 때까지 실행되지 않습니다. play()가 성공적인지 확인하는 이전 메서드(예: playing 이벤트에 설정된 시간 동안 대기하고 실행되지 않을 경우 실패를 가정)는 지연 재생 시나리오에서 거짓음성에 취약합니다.

이 새로운 기능의 실제 예를 게시했습니다. 이 프로미스 기반 인터페이스를 지원하는 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 버그