Справочник HTML

Тег <video>: добавляем видео на страницу

Элемент <video> воспроизводит ролик без стороннего плеера. Браузер сам показывает панель управления, если добавить controls, а несколько source помогают выбрать поддерживаемый формат.

Рабочий пример

<video controls poster="preview.jpg" preload="metadata">
  <source src="lesson.webm" type="video/webm">
  <source src="lesson.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles-ru.vtt" srclang="ru" label="Русский">
  Ваш браузер не поддерживает видео.
</video>

Браузер перебирает source сверху вниз. Атрибут poster задаёт обложку, preload="metadata" загружает только сведения о длительности, а track делает материал доступнее для людей, которым нужны субтитры.

Когда применять

Указывай controls для управляемого воспроизведения и не запускай звук автоматически. Большие ролики лучше хранить в нескольких современных форматах и сжимать до публикации.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Удалять controls, не создавая собственной доступной панели
• Добавлять autoplay со звуком
• Забывать текстовый запасной вариант и субтитры