tinyvid.dev
Гайд · встраивание

HTML-код для встраивания видео

Вставить видео на страницу — это не одна строчка HTML, как кажется. Этот гайд разбирает три схемы встраивания, которые реально нужны на практике: обычный плеер, автозапускающийся фоновый ролик и клип с отложенной загрузкой — с готовым кодом для каждой. Или просто перетащите файл в TinyVid — он напишет все три за вас.

01Основы

HTML-элемент video

Чтобы встроить видео в HTML, хватает нативного тега video — без библиотек, без iframe, без стороннего плеера. В простейшем виде он оборачивает одну или несколько строк source, каждая указывает на файл и его тип, а браузер проигрывает первую, которую поддерживает.

Задайте видео явные width и height или CSS-пропорции, чтобы браузер заранее занял место и страница не прыгала при загрузке. Добавьте картинку poster для кадра до старта воспроизведения и атрибут controls для обычного плеера. Всё остальное — autoplay, зацикливание, отложенная загрузка — лишь вариации на этих нескольких атрибутах.

02Паттерны

Три способа встроить видео

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

Обычный плеер

Плеер с видимыми элементами управления, постером и прогрессивной загрузкой. Это вариант по умолчанию для любого видео, которое посетитель смотрит осознанно, — туториала, демо продукта, доклада. Поставьте современный лёгкий файл первым, H.264 MP4 последним, чтобы каждый браузер нашёл source, который сможет проиграть, и задайте preload в metadata, чтобы ролик грузился только после нажатия play.

<video poster="poster.jpg" width="1280" height="720" controls preload="metadata" style="max-width:100%;height:auto">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Фоновое видео

Беззвучный зацикленный ролик, который сам запускается за шапкой сайта или крупной секцией. Автозапуск браузеры разрешают только без звука, поэтому здесь сочетаются атрибуты muted, autoplay, loop и playsinline, а object-fit растягивает видео на всю область. Держите его коротким и сильно сжатым — он грузится у каждого посетителя, так что беззвучный пресет Фоновое видео тут в самый раз.

<video poster="poster.jpg" autoplay loop muted playsinline style="width:100%;height:100%;object-fit:cover">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Lazy-load

Ролик, который скачивается только при попадании в зону видимости и не мешает критическому пути загрузки. Его адрес лежит в data-атрибуте и подставляется небольшим скриптом на IntersectionObserver, как только элемент подходит к области просмотра. Это самый щадящий вариант для страниц с несколькими видео, где загрузка их всех сразу убила бы производительность.

<video class="lazy-video" poster="poster.jpg" width="1280" height="720" data-src="video.mp4" loop muted playsinline preload="none" style="max-width:100%;height:auto"></video>
<!-- IntersectionObserver swaps data-src → src on view -->
03Попробуйте

Сгенерируйте свой embed-код

Перетащите видео ниже. TinyVid сконвертирует его в оптимизированные для веба форматы и откроет генератор: выберите пресет, включите нужные опции и скопируйте код, в котором уже стоят настоящие ширина и высота вашего видео — страница заранее резервирует под него место, и при загрузке ничего не прыгает. Бесплатно до 200 МБ, без аккаунта.

tinyvid · converter

Перетащите видео сюда

или выберите файл
MP4 · MOV · AVI · MKV · WebM · GIF|Бесплатно до 200 МБ
04Лучшие практики

Атрибуты и лучшие практики

Почти всю работу делает горстка атрибутов. poster даёт плееру первый кадр; preload в значении metadata — или none для отложенных клипов — не даёт браузеру тянуть видео раньше времени; width и height или пропорции спасают от сдвига вёрстки. Чтобы автозапуск сработал, видео должно быть беззвучным, а playsinline не даёт iOS разворачивать его на весь экран.

Дайте больше одного source. WebM или AV1 первым, H.264 MP4 последним: современные браузеры возьмут лёгкий файл, а старые плавно откатятся — браузер берёт первый тип, который умеет декодировать. Если указать кодеки в type каждого source, он выберет нужный, ничего не скачивая.

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

Атрибуты тега video — кратко

Все атрибуты, которые вам скорее всего понадобятся на элементе video, и когда они уместны.

АтрибутЧто делает
controlsПоказывает штатные органы управления браузера: воспроизведение, паузу, громкость и полосу перемотки. Ставьте на любое видео, которым посетитель должен управлять; опускайте только на декоративных фоновых роликах.
posterКартинка, которая показывается до начала воспроизведения. Без неё плеер стоит пустым или вслепую берёт первый кадр, так что именно постер не даёт блоку выглядеть сломанным, пока видео грузится.
preloadСколько браузер тянет заранее: metadata читает только размеры и длительность, none откладывает всё до запуска, auto разрешает скачать файл. Для большинства плееров берите metadata, ниже первого экрана — none.
autoplayЗапускает воспроизведение без клика. Браузеры соглашаются только на немом видео, поэтому идёт в паре с muted — и уместен на декоративных роликах, а не на контенте, который человек должен выбрать сам.
mutedОтключает звук при воспроизведении. Без него автозапуск не сработает. Если ролик вообще не должен звучать, уберите звуковую дорожку из самого файла, а не полагайтесь на атрибут.
loopПерезапускает ролик по окончании. Естественно для коротких фоновых петель и раздражает на всём, где есть закадровый голос.
playsinlineОставляет видео внутри страницы на iOS вместо переброса в нативный полноэкранный плеер. Обязателен для фоновых роликов на iPhone.
width / heightРезервируют место под плеер до прихода файла, чтобы страницу не дёргало при загрузке, — разница между аккуратной вёрсткой и штрафом за Cumulative Layout Shift. Тот же эффект отзывчиво даёт aspect-ratio в CSS.
<source>Позволяет предложить несколько файлов: браузер берёт первый type, который умеет декодировать. Ставьте первым современный лёгкий файл (WebM или AV1), а H.264 MP4 — последним, как универсальный запасной.
<track>Подключает субтитры файлом WebVTT. Добавляйте везде, где есть речь: это базовый уровень доступности, и заодно контент становится доступен поиску.

Embed работает ровно настолько быстро, насколько лёгок файл за ним. Сначала уменьшите его с помощью гайда по сжатию видео для веба.

05FAQ
01Как встроить видео в HTML?
Возьмите нативный тег video с одной или несколькими строками source и картинкой poster; браузер проигрывает первый source, который поддерживает. Библиотеки и iframe не нужны. TinyVid пишет весь тег за вас из вашего сконвертированного файла.
02Как сделать, чтобы видео автозапускалось как фон?
Автозапуск браузеры разрешают, только если у видео нет звука, поэтому выключите звук и добавьте атрибуты autoplay, loop и playsinline. Пресет Фоновое видео в TinyVid выдаёт беззвучный, сильно сжатый ролик ровно под эту задачу и генерирует нужную разметку.
03Почему моё видео не автозапускается?
Чаще всего дело в том, что оно со звуком — автозапуск со звуком браузеры блокируют. На iPhone встроенное воспроизведение ломает ещё и отсутствие playsinline. Беззвучный фоновый ролик с playsinline автозапускается во всех браузерах.
04Как сделать ленивую загрузку видео?
Не грузите файл при первой загрузке: держите его адрес в data-атрибуте, а preload — в none, и подставляйте небольшим скриптом на IntersectionObserver, когда элемент подойдёт к области просмотра. Сниппет lazy-load от TinyVid уже включает эту схему.
05Какой формат видео встраивать?
MP4 с H.264 — для максимальной совместимости, при желании первым источником — более лёгкий WebM или AV1. Браузер скачивает первый тип, который умеет проигрывать, поэтому современный файл с запасным MP4 закрывает всех.
06Нужен ли видеохостинг, чтобы встроить видео?
Нет — можно положить сконвертированный файл у себя и вставить тег прямо на страницу. А если не хотите возиться с хранением и трафиком, hosted-тариф TinyVid держит видео на CDN и выдаёт готовый embed-URL за фиксированную ежемесячную плату.
07Как вставить MP4 в HTML?
Положите файл в элемент video и укажите на него source с type="video/mp4" — больше MP4 ничего не нужно, и он проигрывается в любом браузере. Добавьте выше второй source (WebM или AV1), и современные браузеры возьмут файл полегче, а MP4 останется запасным вариантом.
08Что использовать — тег video или iframe?
Элемент video — когда файл лежит у вас: вы сохраняете контроль над плеером, постером, размером файла и загрузкой, и ничего стороннего не подгружается. iframe — это то, что выдают площадки вроде YouTube или Vimeo: вставить быстрее, но он тянет их плеер и скрипты, а ролик живёт по их правилам. Для фоновой петли или короткого ролика о продукте свой сжатый файл легче и быстрее.
09Как сделать встроенное видео адаптивным?
Задайте видео width 100% и height auto, а в CSS пропишите aspect-ratio под сам ролик — тогда браузер зарезервирует правильное место при любой ширине экрана. Атрибуты width и height на теге тоже оставьте: они сообщают пропорции браузеру ещё до того, как приедут CSS и файл, и именно это спасает от скачка вёрстки.