Бесконечный цикл видео при загрузке страницы HTML5

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

Чтобы задать бесконечное воспроизведение видео внутри тега <video>, воспользуйтесь атрибутами autoplay, loop и muted:

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

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

Подготовка к идеальному циклу

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

document.addEventListener('DOMContentLoaded', (event) => {
  // Давайте, начнем воспроизведение!
  document.querySelector('video').play();
});

Чтобы избежать ограничений браузеров, звук можно заглушить или добавить элемент интерактивности:

<video autoplay loop muted id="background-video">
  <source src="path-to-video.mp4" type="video/mp4">
  <!-- "Тссс, идет проигрывание!" -->
</video>

Владельцам устройств Apple стоит добавить атрибут playsinline, чтобы видео не переключалось в полноэкранный режим, исказив вёрстку:

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

Приспосабливаемся к различиям браузеров

Для корректного воспроизведения видео во всех браузерах, представьте несколько форматов в тегах <source>:

<video autoplay loop muted>
  <!-- Компромисс ради браузера -->
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

В браузерах старых версий показывайте сообщение о неподдержке тега видео:

<video autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
  <!-- "Ты в состоянии проигрывать видео?" -->
  Ваш браузер не поддерживает видео-тег.
</video>

Традиции уважения к старым браузерам продолжим, используя полифилы:

<script src="video-polyfill.js"></script>

Для браузеров, требующих интеракции с пользователем, у нас есть универсальное решение: добавляем обработчики событий:

let videoElement = document.getElementById('background-video');
videoElement.addEventListener('ended', () => {
  this.currentTime = 0;
  this.play();
}, false);

// Используем событие touchstart
document.body.addEventListener('touchstart', function(e) {
  // "Ты можешь начать воспроизведение, видео!"
  videoElement.play();
}, false);

Усовершенствования для профессионалов

Атрибут autoplay идеален, но для полного контроля над процессом лучше воспользоваться JavaScript:

videoElement.onended = function() {
  this.currentTime = 0; // Время возвратиться к началу!
  this.play();          // "Время проиграться заново, видео!"
};

Чтобы не отвлекать внимание зрителей, скройте стандартные контролы видео:

<video autoplay loop muted controls="false">
  <source src="video.mp4" type="video/mp4">
</video>

Для улучшения доступности добавим субтитры:

<video autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <!-- "Так видео станет доступным для всех" -->
</video>

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

Визуализируем бесконечное цикличное воспроизведение видео, воспроизводимое в HTML5, как поезд, следующий по замкнутому маршруту:

<video autoplay loop>
  <source src="endless_journey.mp4" type="video/mp4">
</video>

                    🔄
               🚂===🚃🚃🚃
             🛤              🛤 
           🛤                  🛤
          🛤   Веб-страница     🛤
             🛤              🛤
               🛤          🛤
                   🔄
                   
**Autoplay** — это двигатель, **loop** — это бесконечная железнодорожная ветка.

Славянская чечётка с особенностями браузеров

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

Для пользователей Apple:

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

Для идеальной операции:

• Используйте playsinline, чтобы предотвратить переключение в полноэкранный режим.
• Поверьте в силу JavaScript: обработчики событий и скрипты помогут укротить любую ситуацию.

Для пользователя Chrome:

• Без звука автовоспроизведение может быть заблокировано.
• Chrome учитывает взаимодействия пользователя перед разрешением автовоспроизведения.

Так вы обойдете ограничения Chrome:

• Мутируйте видео.
• Мотивируйте пользователя на активность, чтобы получить разрешение на автовоспроизведение.

Особенности других браузеров:

• Некоторые ограничивают использование JavaScript в сочетании с автовоспроизведением.
• Политика автовоспроизведения постоянно меняется. Следите за обновлениями.

Рекомендации для работы с особенностями:

• Используйте постепенное улучшение: сначала базовый функционал, а затем его расширение в зависимости от возможностей браузера.
• Используйте ресурсы, такие как Can I use..., чтобы быть в курсе актуальной поддержки браузера.

Обработка сложных сценариев с помощью JavaScript

Когда использование только HTML-атрибутов не помогает, на помощь приходит JavaScript с функцией setTimeout и обработчиками событий:

Событие timeupdate будет полезным при справке с задержками в сети и определении моментов цикла.

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

Для случаев, когда нужно сверхгладкое цикличное воспроизведение, комбинация обработчиков события ended и управления с мобильностью currentTime обеспечит необходимый результат.

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

1. HTML5 <video> — детальное руководство по использованию элемента видео в HTML5.
2. Политика автовоспроизведения Chrome — как политика автовоспроизведения в Chrome влияет на проигрывание.
3. Справочник по событиям и API видео HTML5 — подробный обзор событий и API для видео в HTML5.
4. Создание адаптивной веб-разметки для видео — рекомендации по использованию видео в адаптивном дизайне.
5. Субтитры и аудио описания — советы по созданию доступного видео контента.
6. Проверка поддержки автовоспроизведения видео браузерами — таблицы совместимости функций видео с различными браузерами.