Как добавить своё видео mp4 на сайт через тег video и прямую ссылку на файл: готовый код, отличие от YouTube и фонового видео, в чём нюансы перемотки и автоплея.
Если нужно показать своё видео прямо на странице — урок, обзор товара, ролик о компании — и не хочется тащить его через YouTube с их интерфейсом и «похожими видео», есть способ проще: тег <video> и прямая ссылка на файл mp4. Разберём готовый код и важные нюансы.
Если вам нужно видео в фон секции (без кнопок, на весь экран, как обложка) — это отдельная задача со своими тонкостями, про неё есть отдельная статья про фоновое видео на Tilda. Здесь речь про обычный плеер, который посетитель запускает сам.
Когда свой плеер лучше YouTube
- Нет чужого брендинга и рекомендаций. Никаких «смотреть на YouTube» и роликов конкурентов в конце.
- Полный контроль вида. Плеер можно оформить под дизайн сайта.
- Подходит для коротких роликов. Заставка, обзор, демонстрация — то, что не нужно «хостить» как полноценный видеоканал.
Для длинных видео и большого трафика YouTube всё же выгоднее по нагрузке. А вот для короткого ролика на странице свой файл — чище и аккуратнее.
Шаг 1. Получите прямую ссылку на mp4
Тегу <video> нужен прямой адрес самого файла, а не ссылка на страницу диска. Загрузите mp4 в LF Drive и скопируйте прямую ссылку вида https://lfdrive.ru/f/КОД.
Важно для видео: хостинг должен поддерживать перемотку (запросы по диапазону, range-requests). Без этого видео не перематывается и иногда вообще не запускается. LF Drive это поддерживает, поэтому плеер ведёт себя как надо.
Шаг 2. Вставьте код в Tilda
Добавьте блок «Другое» → «HTML-код» (T123) и вставьте:
<video controls width="100%" preload="metadata">
<source src="https://lfdrive.ru/f/ВАШ_КОД" type="video/mp4">
Ваш браузер не поддерживает видео.
</video>
Замените ВАШ_КОД на код из ссылки. controls показывает кнопки плеера, preload="metadata" подгружает только длительность, а не всё видео сразу — страница грузится быстрее.
Опубликуйте — на странице появится рабочий плеер с вашим видео.
Если нужен автоплей
Браузеры разрешают автозапуск видео только без звука. Чтобы видео стартовало само, добавьте атрибуты autoplay muted playsinline loop:
<video autoplay muted playsinline loop width="100%">
<source src="https://lfdrive.ru/f/ВАШ_КОД" type="video/mp4">
</video>
Со звуком автозапуск не сработает — это защита браузеров от назойливых сайтов, отключить нельзя.
Где хранить видео
Чтобы видео стабильно открывалось и перематывалось — держите mp4 в LF Drive. Загрузили — получили прямую ссылку с поддержкой перемотки для тега <video>. Есть бесплатный тариф, чтобы попробовать.
Частые вопросы
Видео не перематывается — в чём дело?
Скорее всего хостинг не поддерживает запросы по диапазону (range-requests). Без них браузер не может «прыгнуть» в середину файла. Нужен хостинг, который умеет отдавать видео по частям.
Какой формат видео использовать?
mp4 с кодеком H.264 — он воспроизводится во всех браузерах. Для веба это самый совместимый вариант.
Чем это отличается от фонового видео?
Фоновое видео идёт без кнопок, на весь экран, как обложка секции, и обычно зацикленное без звука. Здесь же — обычный плеер, который посетитель запускает сам. Про фон есть отдельная статья.
Читайте также
- Как получить прямую ссылку на файл