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

Описание

Атрибут preload определяет, как браузер должен загружать видео при открытии страницы. Он помогает оптимизировать производительность и использование сети.

Пример использования:
<video preload="auto" src="video.mp4" controls></video>

Значения атрибута:

Значение Описание Когда использовать
auto Браузер сам решает, сколько загрузить (по умолчанию) Для важных видео на странице
metadata Загружает только метаданные (длительность, размеры) Для большинства случаев (рекомендуется)
none Не загружает ничего до взаимодействия Для фоновых или второстепенных видео

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

  • Является рекомендацией для браузера, а не строгим указанием
  • Мобильные браузеры часто игнорируют и используют none
  • Влияет на начальную буферизацию видео
  • Не влияет на программное воспроизведение через JavaScript

Пример для разных сценариев:

<!-- Главное видео страницы --> <video preload="auto" src="main-video.mp4" controls></video> <!-- Дополнительное видео --> <video preload="metadata" src="secondary.mp4"></video> <!-- Фоновое видео --> <video preload="none" autoplay muted loop src="bg-video.mp4"></video>

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

  • Используйте metadata по умолчанию
  • auto только для критически важных видео
  • none для фоновых/автовоспроизводимых видео
  • Тестируйте на реальных устройствах

Оптимизация производительности:

<video preload="metadata" poster="preview.jpg" width="640" height="360"> <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08"> <source src="video.vp9.webm" type="video/webm; codecs=vp9"> </video>
Важно: Избегайте:
  • preload="auto" для нескольких видео на странице
  • Несоответствия между preload и autoplay
  • Игнорирования мобильных ограничений