Видео объясняет продукт быстрее текста, показывает людей за брендом и помогает посетителю решиться на заявку. Но видео на сайте бывает разным: встроенный ролик в тексте статьи, плеер видеохостинга, фон первого экрана, небольшое видео в углу страницы. У каждого способа свои плюсы, ограничения и влияние на скорость сайта.
Разберём четыре основных способа добавить видео на сайт и подскажем, какой выбрать под вашу задачу.
1. Свой видеофайл на странице
Самый прямой способ: загрузить файл на свой сервер и вставить его тегом <video>. Браузер сам нарисует плеер с кнопками управления.
<video src="/video/promo.mp4" poster="/video/promo.jpg" controls preload="metadata" width="640"></video>Плюсы:
- никакой чужой рекламы и рекомендаций после просмотра;
- вы полностью управляете видом плеера и поведением ролика;
- видео не зависит от доступности сторонних сервисов.
Минусы:
- ролик грузится с вашего хостинга: большой файл тратит трафик и может замедлить страницу;
- файл нужно заранее подготовить: формат MP4 с кодеком H.264 открывается во всех современных браузерах, а MOV или AVI могут не воспроизвестись;
- на слабом хостинге при большом числе зрителей видео начинает тормозить.
Советы: ставьте preload="metadata" или preload="none", чтобы файл не скачивался целиком до нажатия на кнопку воспроизведения, и добавляйте картинку-заставку через poster. Если ролик должен запускаться сам, он обязан быть без звука (атрибуты autoplay muted playsinline): браузеры, как правило, не запускают видео со звуком без действия посетителя.
2. Плеер видеохостинга: YouTube, RuTube, VK Видео
Ролик загружается на видеохостинг, а на сайт вставляется готовый код плеера. Обычно он находится в меню «Поделиться» и называется «Встроить» или «HTML-код». Это тег <iframe>, его достаточно вставить в нужное место страницы.
Плюсы:
- видео хранит и раздаёт видеохостинг, ваш сервер не нагружается;
- плеер сам подстраивает качество под скорость интернета зрителя;
- тот же ролик работает и на видеохостинге, собирая просмотры там.
Минусы:
- плеер подгружает много своих скриптов, и страница открывается дольше;
- после просмотра видеохостинг может показать рекомендации, в том числе чужие ролики;
- не у всех посетителей видеохостинги открываются одинаково быстро: учитывайте, откуда ваша аудитория.
Совет: если видео ниже первого экрана, добавьте тегу iframe атрибут loading="lazy", и плеер начнёт загружаться, только когда посетитель приблизится к нему при прокрутке.
3. Фоновое видео на первом экране
Короткий ролик без звука, который играет по кругу за заголовком первого экрана. Так делают сайты ресторанов, отелей, застройщиков, студий: видео создаёт атмосферу с первой секунды.
Плюсы: эффектно выглядит и сразу показывает продукт или место.
Минусы: звука нет, поэтому рассказать о чём-то словами не получится. Тяжёлый фон замедляет загрузку самого важного экрана сайта, а текст поверх движущейся картинки хуже читается.
Советы: держите ролик коротким (10-20 секунд) и лёгким, не размещайте в нём важную информацию, проверьте, как первый экран выглядит на телефоне. Часто на телефонах вместо видео разумнее показать картинку.
4. Видеовиджет в углу экрана
Небольшое видео в углу страницы, которое играет без звука и не мешает читать сайт. Посетитель нажимает на него, виджет раскрывается, и ролик воспроизводится со звуком с начала. Под видео можно поставить кнопку: «Записаться», «Смотреть каталог», «Получить консультацию».
Этот формат подходит, когда видео должно работать на продажу: приветствие от основателя, ответ на частый вопрос, видеоотзыв клиента, обзор товара. Видео заметно на любой странице и при этом не занимает место в вёрстке, поэтому сайт не нужно переделывать.
Как это устроено в Видвиджет:
- ролик загружается файлом: MP4, MOV, AVI, WMV, MKV или WEBM размером до 300 МБ, сервис сам перекодирует его для быстрой загрузки;
- на сайт вставляется одна строка кода, без плагинов и библиотек, на любой платформе: Tilda, WordPress, Wix, Shopify, 1С-Битрикс или через Google Tag Manager;
- можно выбрать угол экрана, отдельно включить показ на телефонах и добавить кнопку со своей ссылкой;
- открытия виджета и нажатия на кнопку видны в статистике, их можно передавать целями в Яндекс Метрику и Google Analytics.
Попробовать видеовиджет можно бесплатно: первые 14 дней доступны до 10 виджетов и все настройки оформления, а потом остаётся бесплатный тариф с одним видеовиджетом. Как установить его на сайт, смотрите в инструкции.
Какой способ выбрать
- Видео в статье или инструкции, которое смотрят по желанию: плеер видеохостинга или свой файл, если важно обойтись без рекламы.
- Атмосфера и эмоции на первом экране: короткое фоновое видео без звука.
- Видео, которое должно привести к заявке: видеовиджет с кнопкой. Его увидят на любой странице, а нажатие на кнопку можно отследить как цель.
Способы можно совмещать. Например, подробный обзор продукта разместить плеером на странице услуги, а короткое приветствие с кнопкой «Оставить заявку» показать видеовиджетом на всём сайте.
Если вы только выбираете, что снять, посмотрите наши статьи о видеоприветствии и видеоотзывах для сайта.
