HTMLMediaElement.play() возвращает обещание

Jeff Posnick

Автоматическое воспроизведение аудио и видео в Интернете — это мощная возможность, на которую на разных платформах действуют различные ограничения. Сегодня большинство настольных браузеров всегда позволяют веб-страницам начинать воспроизведение <video> или <audio> через JavaScript без взаимодействия с пользователем. Однако большинству мобильных браузеров требуется явный жест пользователя, прежде чем начнется воспроизведение, инициированное JavaScript. Это помогает гарантировать, что мобильные пользователи, многие из которых платят за пропускную способность или могут находиться в общедоступной среде, не начнут случайно загружать и воспроизводить мультимедиа без явного взаимодействия со страницей.

Исторически было сложно определить, требуется ли взаимодействие с пользователем для начала воспроизведения, а также обнаружить сбои, которые происходят, когда (автоматическое) воспроизведение предпринимается и завершается неудачей. Существуют различные обходные пути , но они далеко не идеальны. Улучшение базового метода play() для устранения этой неопределенности давно назрело, и теперь оно добралось до веб-платформы с первоначальной реализацией в Chrome 50 .

Вызов play() элемента <video> или <audio> теперь возвращает 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.
    });
}

Помимо определения того, был ли метод play() успешным, новый интерфейс на основе Promise позволяет вам определить, когда метод play() завершился успешно. Существуют контексты, в которых веб-браузер может решить отложить начало воспроизведения — например, настольный Chrome не начнет воспроизведение <video> , пока вкладка не станет видна. Обещание не выполнится до тех пор, пока воспроизведение не начнется, а это означает, что код внутри then() не будет выполняться до тех пор, пока не начнется воспроизведение мультимедиа. Предыдущие методы определения успешности play() , такие как ожидание заданного периода времени для события playing и предположение о сбое, если оно не срабатывает, подвержены ложноотрицательным результатам в сценариях с отложенным воспроизведением.

Мы опубликовали живой пример этой новой функциональности. Просмотрите его в браузере, таком как Chrome 50, который поддерживает этот интерфейс на основе Promise. Имейте в виду: страница будет автоматически воспроизводить музыку, когда вы ее посещаете. (Если, конечно, это не так!)

Зона опасности

<source> внутри <video> заставляет обещание play() никогда не отклоняться

Для <video src="not-existing-video.mp4"\> обещание play() отклоняется, как и ожидалось, поскольку видео не существует. Для <video><source src="not-existing-video.mp4" type='video/mp4'></video> обещание play() никогда не отклоняется. Это происходит только в том случае, если нет достоверных источников.

Ошибка хрома