HTML-атрибут autoplay

HTML-атрибут autoplay — это boolean-атрибут, который указывает браузеру начать воспроизведение аудио или видео автоматически, как только это станет возможным без остановки на дозагрузку.

Вы можете использовать этот атрибут на следующих элементах: <audio> и <video>.

Поскольку autoplay является boolean-атрибутом, само его присутствие означает «включено». Значение ему не задаётся — autoplay и autoplay="" означают одно и то же, а запись вида autoplay="false" его не отключает. Чтобы отключить autoplay, нужно полностью убрать атрибут.

Синтаксис

<tag autoplay>&lt;/tag&gt;

Почему браузеры блокируют autoplay

На практике простого добавления autoplay зачастую недостаточно — современные браузеры могут молча отказать в воспроизведении. Это сделано намеренно. Страницы, которые издают звук в момент загрузки, давно считаются крайне неудобными для пользователей, поэтому браузеры теперь применяют политики autoplay:

Воспроизведение без звука разрешено. Медиафайлам без звука (или с выключенным звуком) разрешено запускаться автоматически при загрузке страницы — это не может испугать пользователя.
Воспроизведение со звуком ограничено. Чтобы запустить автовоспроизведение со звуком, браузер обычно требует подтверждения намерения пользователя, например:
- жест пользователя на странице (клик или касание) до запуска воспроизведения, или
- в Chrome — высокий Media Engagement Index (индекс вовлечённости в медиа), который Chrome ведёт для каждого сайта на основе того, как часто пользователь ранее воспроизводил там медиа.
Safari строг по умолчанию. Safari блокирует автовоспроизведение со звуком на большинстве сайтов и позволяет пользователям отключать autoplay для каждого сайта отдельно в настройках. Воспроизведение без звука по-прежнему работает.

Вывод: для надёжного autoplay медиафайл должен быть без звука. Добавляйте атрибут muted вместе с autoplay (пример работы см. на странице <video>).

Примечание: <audio autoplay> сам по себе (аудио по умолчанию никогда не бывает без звука) в современных браузерах будет заблокирован. <video autoplay muted> воспроизведётся. Чтобы автоматически запустить аудио, сначала отключите звук или запустите его по действию пользователя.

<!-- Plays automatically: video, muted -->
<video autoplay muted src="movie.mp4"></video>

<!-- Usually BLOCKED: audio always has sound -->
<audio autoplay src="song.mp3"></audio>

<!-- Plays automatically: muted audio (silent, but it plays) -->
<audio autoplay muted src="song.mp3"></audio>

Пример использования HTML-атрибута autoplay на элементе `<audio>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls autoplay>
      <source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
      <source src="/build/audios/audio.mp3" type="audio/mpeg" />
    </audio>
    <p>Click the play button</p>
  </body>
</html>

Попробуйте сами »

Пример использования HTML-атрибута autoplay на элементе `<video>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video width="320" height="240" controls autoplay muted>
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Some information about video</p>
  </body>
</html>

Попробуйте сами »

Запуск воспроизведения через JavaScript

Иногда нужно запустить воспроизведение из кода, а не через атрибут autoplay — например, когда пользователь нажимает на пользовательскую кнопку. Вызов element.play() возвращает Promise, который разрешается при успешном начале воспроизведения и отклоняется, если браузер блокирует его (чаще всего потому, что у медиафайла есть звук и не было жеста пользователя).

Всегда обрабатывайте отклонение, чтобы заблокированный autoplay не вызвал неперехваченную ошибку. Распространённый подход — откатиться к воспроизведению без звука:

<video id="clip" muted src="movie.mp4"></video>

<script>
  const video = document.getElementById("clip");

  const promise = video.play();

  if (promise !== undefined) {
    promise
      .then(() => {
        // Autoplay started successfully.
      })
      .catch((error) => {
        // Autoplay was prevented. Mute the video and try again,
        // or show a play button so the user can start it.
        video.muted = true;
        video.play();
      });
  }
</script>

Доступность и UX

Автовоспроизведение медиа — особенно со звуком — может сбивать с толку и быть навязчивым. Согласно WCAG 1.4.2 (Audio Control), любое аудио, воспроизводящееся автоматически дольше 3 секунд, должно иметь возможность поставить его на паузу, остановить или отключить звук независимо от общего системного уровня громкости. Самый надёжный подход:

Отдавать предпочтение автовоспроизведению без звука и разрешать пользователям включать звук по запросу.
Всегда предоставлять controls, чтобы пользователь мог остановить воспроизведение.
Избегать автовоспроизведения звукового контента, если пользователь явно не запросил его.

Практика

Какое утверждение об HTML-атрибуте 'autoplay' верно?

Для надёжного автовоспроизведения в современных браузерах медиафайл также должен иметь атрибут 'muted'.Атрибут 'autoplay' можно отключить, написав 'autoplay="false"'.Элемент '<audio autoplay>' (без 'muted') гарантированно воспроизведёт звук при загрузке страницы.Атрибут 'autoplay' можно использовать только на элементе '<img>'.Атрибут 'autoplay' для работы всегда должен сочетаться с атрибутом 'controls'.

Связанные темы о медиа

HTML-тег <video> — встраивание видео и использование autoplay вместе с muted.
HTML-тег <audio> — встраивание звуковых клипов и музыки.
HTML-тег <source> — несколько форматов медиа для одного элемента.
HTML-атрибут controls — отображение встроенных элементов управления воспроизведением, паузой и громкостью.
Аудио и видео в HTML5 — подробное руководство по встраиванию медиа.