Улучшение пользовательского опыта, минимизация стимулов для установки блокировщиков рекламы и снижение потребления данных.
Политика автозапуска Chrome изменилась в апреле 2018 года, и я здесь, чтобы рассказать вам, почему и как это влияет на воспроизведение видео со звуком. Спойлер: пользователям это понравится!
Новое поведение
Как вы, возможно, заметили , веб-браузеры переходят к более строгим политикам автозапуска, чтобы улучшить взаимодействие с пользователем, свести к минимуму стимулы к установке блокировщиков рекламы и сократить потребление данных в дорогих и/или ограниченных сетях. Эти изменения призваны предоставить пользователям больший контроль над воспроизведением и принести пользу издателям с законными вариантами использования.
Политика автозапуска Chrome проста:
- Приглушенный автовоспроизведение всегда разрешено.
- Автовоспроизведение со звуком разрешено, если:
- Пользователь взаимодействовал с доменом (нажал, коснулся и т. д.).
- На настольном компьютере пороговое значение индекса вовлеченности пользователя было превышено, что означает, что пользователь ранее воспроизводил видео со звуком.
- Пользователь добавил сайт на свой главный экран на мобильном телефоне или установил PWA на настольный компьютер.
- Верхние фреймы могут делегировать разрешение автозапуска своим iframe, чтобы разрешить автозапуск со звуком.
Индекс взаимодействия со СМИ
Индекс вовлеченности СМИ (MEI) измеряет склонность человека к потреблению медиа на сайте. Подход Chrome представляет собой соотношение посещений важных событий воспроизведения мультимедиа на каждый источник:
- Потребление мультимедиа (аудио/видео) должно превышать семь секунд.
- Звук должен присутствовать и быть отключенным.
- Вкладка с видео активна.
- Размер видео (в пикселях) должен быть больше 200x140 .
На основании этого Chrome рассчитывает показатель вовлеченности мультимедиа, который является самым высоким на сайтах, где мультимедиа воспроизводится регулярно. Когда он достаточно высок, автовоспроизведение мультимедиа разрешено только на рабочем столе.
MEI пользователя доступен на внутренней странице about://media-engagement .
about://media-engagement в Chrome.Переключатели разработчика
Как разработчик, вы можете захотеть изменить поведение политики автозапуска Chrome локально, чтобы проверить свой веб-сайт на различные уровни взаимодействия с пользователем.
Вы можете полностью отключить политику автозапуска, используя флаг командной строки :
chrome.exe --autoplay-policy=no-user-gesture-required. Это позволяет вам тестировать свой веб-сайт так, как если бы пользователь активно работал с ним, и всегда будет разрешено автоматическое воспроизведение.Вы также можете решить, чтобы автозапуск никогда не был разрешен, отключив MEI, и будут ли сайты с самым высоким общим MEI получать автозапуск по умолчанию для новых пользователей. Сделайте это с помощью флагов :
chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.
Делегирование iframe
Политика разрешений позволяет разработчикам выборочно включать и отключать функции браузера и API. Как только источник получил разрешение на автозапуск, он может делегировать это разрешение iframe из разных источников с помощью политики разрешений для автозапуска . Обратите внимание, что автозапуск разрешен по умолчанию для iframe одного и того же происхождения.
<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">
<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">
Если политика разрешений для автоматического воспроизведения отключена, вызовы play() без жестов пользователя отклонят обещание с исключением NotAllowedError DOMException. И атрибут autoplay также будет игнорироваться.
Примеры
Пример 1. Каждый раз, когда пользователь посещает VideoSubscriptionSite.com на своем ноутбуке, он смотрит телешоу или фильм. Поскольку их рейтинг взаимодействия со СМИ высок, разрешен автовоспроизведение.
Пример 2: GlobalNewsSite.com имеет как текстовый, так и видеоконтент. Большинство пользователей заходят на сайт за текстовым контентом и лишь изредка смотрят видео. Оценка вовлеченности пользователей в средствах массовой информации низкая, поэтому автовоспроизведение не будет разрешено, если пользователь переходит непосредственно со страницы социальной сети или поиска.
Пример 3: LocalNewsSite.com имеет как текстовый, так и видеоконтент. Большинство людей заходят на сайт через домашнюю страницу, а затем нажимают на новостные статьи. Автовоспроизведение на страницах новостных статей будет разрешено из-за взаимодействия пользователя с доменом. Однако следует позаботиться о том, чтобы пользователи не были удивлены автоматическим воспроизведением контента.
Пример 4. MyMovieReviewBlog.com встраивает iframe с трейлером к фильму, сопровождающим рецензию. Пользователи взаимодействовали с доменом, чтобы попасть в блог, поэтому автозапуск разрешен. Однако блогу необходимо явно делегировать эту привилегию iframe, чтобы контент воспроизводился автоматически.
Корпоративные правила Chrome
Поведение автозапуска можно изменить с помощью корпоративных политик Chrome для таких случаев использования, как киоски или автоматические системы. Посетите справочную страницу списка политик , чтобы узнать, как настроить корпоративные политики, связанные с автозапуском:
- Политика
AutoplayAllowedопределяет, разрешено ли автозапуск. - Политика
AutoplayAllowlistпозволяет указать белый список шаблонов URL-адресов, в котором автозапуск всегда будет включен.
Лучшие практики для веб-разработчиков
Аудио/Видео элементы
Вот что следует помнить: никогда не предполагайте, что видео будет воспроизводиться, и не показывайте кнопку паузы, когда видео на самом деле не воспроизводится. Это настолько важно, что я напишу это еще раз ниже для тех, кто просто просматривает этот пост.
Вы всегда должны смотреть на обещание , возвращаемое функцией воспроизведения, чтобы узнать, было ли оно отклонено :
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
Один из классных способов привлечь пользователей — использовать автовоспроизведение с отключенным звуком и предоставить им возможность включить звук. (См. пример ниже.) Некоторые веб-сайты уже делают это эффективно, включая Facebook, Instagram, Twitter и YouTube.
<video id="video" muted playsinline autoplay>
<button id="unmuteButton"></button>
<script>
unmuteButton.addEventListener('click', function() {
video.muted = false;
});
</script>
События, которые вызывают активацию пользователя, по-прежнему должны определяться последовательно во всех браузерах. Я бы порекомендовал вам пока придерживаться "click" . См . выпуск Whatwg/html#3849 на GitHub .
Веб-аудио
API веб-аудио поддерживает автозапуск начиная с Chrome 71. О нем нужно знать несколько вещей. Во-первых, перед началом воспроизведения звука рекомендуется дождаться взаимодействия с пользователем, чтобы пользователи знали о том, что что-то происходит. Подумайте, например, о кнопке «воспроизведение» или переключателе «вкл/выкл». Вы также можете добавить кнопку «включить звук» в зависимости от потока работы приложения.
Если вы создаете свой AudioContext при загрузке страницы, вам придется вызвать resume() через некоторое время после того, как пользователь взаимодействовал со страницей (например, после того, как пользователь нажал кнопку). Альтернативно, AudioContext будет возобновлен после жеста пользователя, если start() вызывается на любом подключенном узле.
// Existing code unchanged.
window.onload = function() {
var context = new AudioContext();
// Setup all nodes
// ...
}
// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
context.resume().then(() => {
console.log('Playback resumed successfully');
});
});
Вы также можете создавать AudioContext только тогда, когда пользователь взаимодействует со страницей.
document.querySelector('button').addEventListener('click', function() {
var context = new AudioContext();
// Setup all nodes
// ...
});
Чтобы определить, требует ли браузер взаимодействия с пользователем для воспроизведения звука, проверьте AudioContext.state после его создания. Если игра разрешена, она должна немедленно переключиться на running . В противном случае оно будет suspended . Если вы прослушиваете событие statechange , вы можете обнаружить изменения асинхронно.
Чтобы увидеть пример, ознакомьтесь с небольшим запросом на включение , который исправляет воспроизведение веб-аудио для этих правил политики автозапуска для https://airhorner.com .