Почему не работает autoplay видео в Safari и Chrome?

Быстрый ответ

<video autoplay muted playsinline>
  <source src="your-video.mp4" type="video/mp4">
</video>

Для автоматического воспроизведения видео в браузерах Safari и Chrome используйте атрибуты autoplay, muted и playsinline. Muted помогает обойти ограничения, связанные с автозапуском, а playsinline позволяет воспроизводить видео непосредственно на странице (не в полноэкранном режиме) на мобильных устройствах. Проверьте правильность указания пути к файлу видео в атрибуте src.

Работа с автозапуском в разных браузерах

Все браузеры имеют свои особенности, и контроль над автозапуском требует знания этих тонкостей.

Правила автозапуска в различных браузерах

Браузеры формируют политику автозапуска, стремясь обеспечить лучший пользовательский опыт. Например, в Chrome автоматическое воспроизведение видео со звуком заблокировано, но использование атрибута muted позволяет переопределить это ограничение.

Основные атрибуты тега Video

Для надежного автовоспроизведения видео рекомендуется добавлять атрибуты height, loop, controls добавляя к autoplay и muted:

<video autoplay muted loop controls height="720">
  <!-- Используйте несколько источников для обеспечения лучшей совместимости -->
  <source src="your-video.webm" type="video/webm">
  <source src="your-video.mp4" type="video/mp4">
</video>

Визуализация

Думайте о автозапуске видео как о дисциплинированном роботе 🤖, который ожидает команды к действию:

🤖 = Автозапуск видео
🔒 = Ограничения со стороны Safari и Chrome

Без правильных настроек автозапуск видео заблокирован:

🤖🔒🖥️ = Автозапуск отключен: терпеливо ждет интеракции от пользователя!

Однако с корректной конфигурацией автозапуск срабатывает:

🤖✅🖥️ = Автозапуск включен: робот начинает воспроизведение без участия пользователя!

И помните, что в зависимости от политики браузеров могут потребоваться дополнительные настройки:

🤖✅🔒🗝️ = Политика браузера: для начала работы могут потребоваться дополнительные параметры (например, mute)!

Внимание к коду

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

Автозапуск и динамические изменения DOM

Имейте в виду, что автозапуск может отказаться работать после динамических изменений DOM в Safari и Chrome. Обработчик события canplaythrough может быть полезен.

Отказ от jQuery для этой задачи

Использование метода .wrap() jQuery вокруг элемента видео стоит признать устаревшим: оно может препятствовать функционированию автозапуска.

Многофакторное тестирование

Проверьте надёжность автозапуска, проведя тесты на разных страницах и при различных условиях подключения.

Автозапуск с использованием JavaScript

Ручной запуск видео

Если автоматическое воспроизведение не работает, можно применить принудительный запуск видео через JavaScript:

document.addEventListener("DOMContentLoaded", function() {
  var myVideo = document.getElementById("myVideo");
  if (myVideo) {
    myVideo.muted = true; // Извините, аудиофилы, но видео нужно замутить для обеспечения автозапуска!
    myVideo.play();
  }
});

Правильное встраивание видео

Иногда причиной проблем с воспроизведением становится способ встраивания видео на страницу. Обратите внимание на корректность настроек iframe или <video>.

Будьте в курсе изменений в политиках автоматического воспроизведения

Политика браузеров постоянно меняется, в особенности в отношении автозапуска беззвучных видео в Chrome. Следите за этими изменениями.

Полезные материалы

1. Политика автозапуска в Chrome | Chrome для разработчиков
2. <video>: Встраиваемый элемент видео – HTML: Язык разметки гипертекста | MDN
3. javascript – Показать изображение в модальном окне при клике на кнопку – Stack Overflow
4. Can I use... Поддержка HTML5, CSS3 и других веб-технологий
5. HTML5 Video – События мультимедиа