Чтобы дать пользователям возможность контролировать это, браузеры часто предоставляют различные формы блокировки автовоспроизведения. Политика блокировки автовоспроизведения браузера не применяется к элементам мультимедиа, когда исходный носитель не имеет звуковой дорожки или если звуковая дорожка отключена.
Например: браузер Chrome поддерживает Media Engagement Index, который представляет склонность человека воспроизводить / потреблять медиа на сайте. Вы можете проверить это, посетив chrome://media-engagement.
Контент можно автоматически воспроизводить различными способами:
- Всегда пытаться автовоспроизвести в режиме без звука. Это можно сделать следующими способами:
Добавить атрибуты autoplay и muted в тег мультимедиа. Для этого можно использовать свойство <video controls width="250" autoplay muted>
defaultMuted, которое указывает, должен ли аудиовыход медиаэлемента отключаться по умолчанию. (ПРИМЕЧАНИЕ. Поддержка defaultMuted на IE неизвестна.) Свойство
muted также может быть доступно напрямую и включено перед вызовом действия воспроизведения. Это можно сделать следующим образом:
var video = document.querySelector('video')
if (video.play() !== undefined) {
video.muted = true
video.play().then(_ => {
// Muted autoplay started!
}).catch(error => {
// Autoplay was prevented due to some error.
});
}
Попытка автовоспроизведения со звуком и отображение кнопки воспроизведения, если действие автовоспроизведения отклонено браузером. Этого можно достичь, добавив атрибут
autoplay к тегу мультимедиа или просто вызвав
.play() в элементе мультимедиа. При отклонении может отображаться кнопка воспроизведения. Успех игры будет зависеть от различных форм блокировки автовоспроизведения браузером.
var video = document.querySelector('video')
if (video.play() !== undefined) {
video.play().then(_ => {
// Autoplay started with audio!
}).catch(error => {
// Autoplay was prevented by browser.
// Show play button
});
}
Попытка автовоспроизведения со звуком или воспроизведение в беззвучном режиме, если браузер отклоняет автовоспроизведение со звуком. Вы можете сначала попробовать воспроизвести контент, который в случае неудачи воспроизвести мультимедиа как без звука, если он все еще отклонен, показать кнопку воспроизведения и дождаться действий пользователя.
var video = document.querySelector('video')
if (video.play() !== undefined) {
video.play().then(_ => {
// Autoplay started!
}).catch(error => {
// Try muted autoplay
video.muted = true
video.play().then(_ => {
// Muted autoplay started. Show unmute button
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that the user can start playback.
})
});
}
Для chrome, если MEI пользователя для веб-сайта низкий, chrome не разрешает автовоспроизведение, однако контент может автоматически воспроизводиться, если он находится в режиме без звука, и у пользователя есть возможность выбрать его включение.
Chrome политика автовоспроизведения