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

Описание

Атрибут loop заставляет видео автоматически начинать воспроизведение сначала после завершения. Это полезно для фоновых видео или непрерывно повторяющихся анимаций.

Пример использования:
<video loop src="background.mp4" autoplay muted></video>

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

  • Видео повторяется бесконечно
  • Часто используется с autoplay и muted
  • Не требует JavaScript для работы
  • Поддерживается всеми современными браузерами

Рекомендуемые сценарии:

Применение Пример
Фоновые видео Герой-секции сайта
Анимационные эффекты Бесконечные анимации
Демонстрационные ролики Продуктовые демонстрации

Пример с дополнительными атрибутами:

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

Рекомендации:

  • Для фоновых видео используйте вместе с muted
  • Оптимизируйте видео для уменьшения размера
  • Убедитесь, что переход в цикле незаметен
  • Предусмотрите остановку для мобильных устройств

Ограничения:

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

Альтернатива на JavaScript:

<video id="myVideo" src="video.mp4"></video> <script> const video = document.getElementById('myVideo'); video.addEventListener('ended', () => { video.currentTime = 0; video.play(); }); </script>
Важно: При использовании loop:
  • Избегайте видео со звуком в автоматическом режиме
  • Учитывайте нагрузку на процессор
  • Предоставляйте пользователю контроль над воспроизведением

Оптимизация зацикленного видео:

# Советы по кодированию: 1. Используйте WebM (VP9) для лучшего сжатия 2. Уменьшите частоту кадров до 24-30 FPS 3. Оптимизируйте разрешение под целевую область 4. Используйте короткие видео (2-10 сек) для плавного цикла