Почему не работает 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 – События мультимедиа