Как вставить видео в HTML — один из базовых вопросов для тех, кто хочет добавить на страницу свой ролик, демонстрацию продукта или учебный фрагмент без сторонних плагинов. Проще всего это сделать через тег video, но важно правильно выбрать формат, атрибуты и запасной вариант на случай проблем в браузере.
Базовый способ вставки видео
Для локального файла или собственного ролика используют элемент video. Он позволяет воспроизводить видео прямо на странице и управлять его поведением с помощью атрибутов.
Типичный пример выглядит так:
<video controls width="640">
<source src="video.mp4" type="video/mp4">
Ваш браузер не поддерживает видео.
</video>
Здесь controls включает стандартные кнопки воспроизведения, паузы и громкости, а width задает ширину плеера. Текст внутри тега отображается, если видео не удалось запустить.
Какие форматы видео лучше использовать
Чтобы видео стабильно работало, лучше подготовить несколько форматов. Самый распространенный и универсальный вариант — MP4 с кодеком H.264. Для некоторых задач также используют WebM, который хорошо подходит для современных браузеров.
- MP4 — лучший универсальный выбор;
- WebM — удобен для современных веб-проектов;
- OGG — запасной вариант, но используется реже.
Если для страницы особенно важна совместимость, добавьте несколько элементов source. Браузер сам выберет первый поддерживаемый формат.
Полезные атрибуты для удобного воспроизведения
Кроме controls, у тега video есть и другие атрибуты, которые помогают настроить поведение плеера.
- autoplay — запускает видео автоматически;
- muted — отключает звук, что часто нужно для автозапуска;
- loop — повторяет видео по кругу;
- poster — показывает изображение-заставку до запуска;
- preload — подсказывает браузеру, как загружать файл.
На практике autoplay лучше использовать осторожно: многие браузеры блокируют автоматический запуск со звуком. Если нужен фоновый ролик, обычно добавляют muted и playsinline для мобильных устройств.
Что проверить, если видео не отображается
Когда видео не запускается, проблема часто не в HTML, а в самом файле или пути к нему. Проверьте, правильно ли указан src, существует ли файл на сервере и нет ли ошибки в регистре букв в адресе.
Также стоит обратить внимание на такие моменты:
- файл видео не поврежден;
- сервер отдает правильный MIME-тип;
- браузер поддерживает формат и кодек;
- страница открывается по HTTPS, если это требуется средой.
Если нужно вставить видео с YouTube или другого сервиса, обычно используют iframe, а не тег video. Это другой сценарий: HTML-видео подходит для собственных файлов, а встроенные плееры — для внешних платформ.
Практический вывод
Чтобы понять, как вставить видео в HTML, достаточно запомнить три вещи: используйте тег video, добавляйте controls для удобства и выбирайте совместимый формат, в первую очередь MP4. Если подготовить запасной текст и несколько источников файла, видео будет работать заметно надежнее на разных устройствах и в разных браузерах.
