Локальное видео: poster, пауза и производительность
Видео в личном интерфейсе должно быть локальным, управляемым и заменяемым неподвижным изображением, а не обязательным фоном страницы.
Пример: Stories in Light · Открыть разбор →
Результат
Вы добавите короткий локальный видеоматериал так, чтобы он открывался без внешней сети и не мешал чтению. Видео может показать процесс, тонкую фактуру или разбор этапов, но не должно быть единственным носителем инструкции. Poster — это первая неподвижная картинка, по которой пользователь понимает тему до загрузки ролика. Для декоративного медиа разумнее начинать с poster и явной кнопки воспроизведения.
Качество здесь означает не максимальное разрешение, а достаточную разборчивость при предсказуемой загрузке. Сначала посмотрите poster на ширине карточки: если смысл кадра уже понятен, видео станет дополнительной глубиной, а не препятствием. Если ролик содержит речь или инструкцию, добавьте текстовую расшифровку либо краткие этапы рядом с плеером.
Шаги
- Сформулируйте, какой факт показывает ролик и можно ли передать его подписью или серией кадров. Если можно, подготовьте текстовое резюме рядом с видео.
- Сохраните видео и poster внутри проекта с проверяемым происхождением. Не выдавайте внешний URL за локально доступный материал.
- Укажите
controls,posterи метаданные; не полагайтесь на autoplay как на способ донести содержание. - Не загружайте большие ролики в каждой карточке каталога: там используйте poster и открывайте медиа по действию пользователя.
- При reduced motion не включайте автоматические циклы. У пользователя должна оставаться возможность поставить воспроизведение на паузу.
Применимый код
<video controls preload="metadata" poster="/media/lesson-poster.webp">
<source src="/media/lesson.webm" type="video/webm">
Ваш браузер не поддерживает видео.
</video>
Критерий проверки
При отключённой сети poster и подпись всё равно объясняют материал; ролик не воспроизводится сам, доступна пауза, а список карточек не скачивает все видео заранее.
