Автоматическое воспроизведение аудио и видео в Интернете — это мощная возможность, на которую на разных платформах действуют различные ограничения. Сегодня большинство настольных браузеров всегда позволяют веб-страницам начинать воспроизведение <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() никогда не отклоняется. Это происходит только в том случае, если нет достоверных источников.
Автоматическое воспроизведение аудио и видео в Интернете — это мощная возможность, на которую на разных платформах действуют различные ограничения. Сегодня большинство настольных браузеров всегда позволяют веб-страницам начинать воспроизведение <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() никогда не отклоняется. Это происходит только в том случае, если нет достоверных источников.
Автоматическое воспроизведение аудио и видео в Интернете — это мощная возможность, на которую на разных платформах действуют различные ограничения. Сегодня большинство настольных браузеров всегда позволяют веб-страницам начинать воспроизведение <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() никогда не отклоняется. Это происходит только в том случае, если нет достоверных источников.
Автоматическое воспроизведение аудио и видео в Интернете — это мощная возможность, на которую на разных платформах действуют различные ограничения. Сегодня большинство настольных браузеров всегда позволяют веб-страницам начинать воспроизведение <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() никогда не отклоняется. Это происходит только в том случае, если нет достоверных источников.