Атрибут poster в HTML-теге
<video> задаёт изображение-заставку, которое показывается до начала воспроизведения видео. Это как обложка у книги - первое, что видит пользователь.<video src="movie.mp4" poster="preview.jpg" controls>
Ваш браузер не поддерживает видео.
</video>
❗Что важно учитывать
☑️Размер и соотношение сторон. Лучше всего, когда размер постера совпадает с размерами видео - иначе браузер растянет или сожмёт картинку, и может появиться некрасивая рамка. Например, для видео 1920×1080 используйте постер такого же разрешения или пропорций 16:9.
☑️Вес файла. Постер загружается раньше видео, поэтому он должен быть лёгким. Имеет смысл сжать JPG или использовать WebP - пользователь увидит заставку быстрее.
☑️Отсутствие постера. Если poster не указан, браузер покажет либо пустой чёрный прямоугольник, либо первый кадр видео (поведение зависит от браузера и атрибута preload).
Практический пример:
<video
width="800"
height="450"
poster="/images/preview.webp"
controls
preload="metadata">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
Здесь preload="metadata" в паре с poster - хорошая комбинация: браузер не качает само видео заранее, но сразу показывает красивую заставку.