Тег <video>: воспроизведение, источники и текстовая альтернатива
Элемент video встраивает видеозапись в страницу и может показывать стандартные средства управления. Разметка описывает воспроизведение, но не создаёт сам медиафайл.
Назначение
Элемент video встраивает видеозапись в страницу и может показывать стандартные средства управления. Разметка описывает воспроизведение, но не создаёт сам медиафайл.
Как это работает
Controls включает интерфейс браузера, poster задаёт изображение до воспроизведения, preload служит подсказкой о предварительной загрузке. Источники можно перечислить через source с корректным MIME-типом. Субтитры подключаются отдельным track.
Пример
<video controls preload="metadata" width="640" height="360" poster="/media/lesson-cover.webp">
<source src="/media/lesson.mp4" type="video/mp4">
<track kind="captions" src="/media/lesson-ru.vtt" srclang="ru" label="Русские субтитры">
Ваш браузер не поддерживает встроенное видео.
</video>
<p>Текст урока: краткое содержание и последовательность действий.</p>Что должно получиться
При наличии файлов браузер показывает видеоплеер и доступную дорожку субтитров. В этой статье пути демонстрационные: пример нужно перенести в свой проект и заменить ресурсами, которыми вы имеете право пользоваться.
Граница применения и частая ошибка
Поддержка контейнера MP4 не гарантирует поддержку любого кодека внутри. Не полагайтесь на autoplay: браузер может его заблокировать, а внезапный звук мешает посетителю. Текст внутри video не заменяет полноценную расшифровку и доступные субтитры.
Самостоятельная проверка
Проверьте управление клавиатурой, выбор субтитров и запросы медиафайлов в Network. Ограничьте скорость сети и оцените начало воспроизведения. Убедитесь, что страница остаётся понятной даже без видео.