Атрибут autoplay тега <video>

Описание

Атрибут autoplay автоматически начинает воспроизведение видео сразу после загрузки страницы, без необходимости взаимодействия с пользователем.

Пример использования:
<video autoplay src="video.mp4" controls> Ваш браузер не поддерживает видео тег. </video>

Особенности работы:

  • Видео начинает воспроизводиться автоматически
  • Часто требует атрибута muted для работы в современных браузерах
  • Может быть заблокировано настройками браузера
  • Не работает на некоторых мобильных платформах

Рекомендации по использованию:

Сценарий Рекомендация
Фоновые видео Используйте с muted и loop
Рекламные ролики Избегайте autoplay или используйте с пользовательским соглашением
Обучающие материалы Предоставьте элементы управления

Пример корректной реализации:

<video autoplay muted loop playsinline> <source src="background.mp4" type="video/mp4"> </video>

Ограничения браузеров:

  • Chrome: требует muted для autoplay
  • Safari: требует playsinline для мобильных
  • Firefox: может блокировать с звуком
  • Мобильные браузеры: часто полностью блокируют

Альтернативные подходы:

<script> // Программное воспроизведение после взаимодействия document.addEventListener('click', () => { document.querySelector('video').play(); }); </script>
Важно: Чрезмерное использование autoplay может ухудшить пользовательский опыт. Всегда:
  • Предоставляйте элементы управления
  • Избегайте неожиданного воспроизведения звука
  • Учитывайте трафик мобильных пользователей
  • Соблюдайте политики браузеров

Дополнительные атрибуты:

Атрибут Взаимодействие с autoplay
muted Позволяет обойти ограничения браузеров
playsinline Необходим для iOS
loop Автоматическое повторение