Атрибут poster тега <video>
Описание
Атрибут poster задаёт изображение-заглушку, которое отображается до начала воспроизведения видео. Это изображение помогает улучшить пользовательский опыт и визуальное восприятие до загрузки видео.
<video poster="preview.jpg" src="video.mp4" controls></video>
Особенности работы:
- Отображается до первого кадра видео
- Исчезает при начале воспроизведения
- Поддерживает все форматы изображений (JPEG, PNG, WebP)
- Рекомендуемый размер соответствует размеру видео
Рекомендации по изображению:
| Параметр | Рекомендация |
|---|---|
| Формат | WebP (оптимальный), JPEG (универсальный) |
| Размер | Соответствует размеру видео (1:1 соотношение) |
| Содержание | Репрезентативный кадр или брендированное изображение |
| Оптимизация | Сжатие без потерь качества |
Пример с разными источниками:
<video poster="preview.webp" controls>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
Рекомендации:
- Всегда используйте для видео с задержкой загрузки
- Оптимизируйте размер изображения (макс. 100-200KB)
- Выбирайте информативный кадр из видео
- Добавляйте логотипы или текст при необходимости
Ограничения:
- Не отображается при autoplay
- Может мигать при быстрой загрузке видео
- Не заменяет первый кадр после воспроизведения
Программное управление:
<video id="myVideo" controls></video>
<script>
const video = document.getElementById('myVideo');
video.poster = 'dynamic-preview.jpg'; // Динамическая установка
video.src = 'video.mp4';
</script>
Важно: Избегайте типичных ошибок:
- Слишком больших файлов изображений
- Несоответствия размеров видео и постера
- Использования первого кадра как постера (может быть чёрным)