# Локальное видео: poster, пауза и производительность

## Результат

Вы добавите короткий локальный видеоматериал так, чтобы он открывался без внешней сети и не мешал чтению. Видео может показать процесс, тонкую фактуру или разбор этапов, но не должно быть единственным носителем инструкции. Poster — это первая неподвижная картинка, по которой пользователь понимает тему до загрузки ролика. Для декоративного медиа разумнее начинать с poster и явной кнопки воспроизведения.

Качество здесь означает не максимальное разрешение, а достаточную разборчивость при предсказуемой загрузке. Сначала посмотрите poster на ширине карточки: если смысл кадра уже понятен, видео станет дополнительной глубиной, а не препятствием. Если ролик содержит речь или инструкцию, добавьте текстовую расшифровку либо краткие этапы рядом с плеером.

## Шаги

1. Сформулируйте, какой факт показывает ролик и можно ли передать его подписью или серией кадров. Если можно, подготовьте текстовое резюме рядом с видео.
2. Сохраните видео и poster внутри проекта с проверяемым происхождением. Не выдавайте внешний URL за локально доступный материал.
3. Укажите `controls`, `poster` и метаданные; не полагайтесь на autoplay как на способ донести содержание.
4. Не загружайте большие ролики в каждой карточке каталога: там используйте poster и открывайте медиа по действию пользователя.
5. При reduced motion не включайте автоматические циклы. У пользователя должна оставаться возможность поставить воспроизведение на паузу.

## Применимый код

```html
<video controls preload="metadata" poster="/media/lesson-poster.webp">
  <source src="/media/lesson.webm" type="video/webm">
  Ваш браузер не поддерживает видео.
</video>
```

## Критерий проверки

При отключённой сети poster и подпись всё равно объясняют материал; ролик не воспроизводится сам, доступна пауза, а список карточек не скачивает все видео заранее.

### Источник

- [Web accessibility for seizures and physical reactions — MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Seizure_disorders)

## Следующий шаг

Для одного видео подготовьте poster, подпись в две строки и проверку сценария без сети.

Источник: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Seizure_disorders