YellowVSL: бесплатный VSL плеер с открытым исходным кодом

Друзья, приветствую!

Полагаю, что вам известно о существовании такого формата лендингов, как VSL, он же Video Sales Letter. Продающее письмо в видеоформате: человек смотрит объяснение проблемы, знакомится с продуктом и доходит до предложения. Его текстовый родственник, на который арбитражники льют веками, называется TSL, Text Sales Letter. Там ту же работу выполняют текст, картинки и вёрстка.

Наиболее часто формат используется в nutra-вертикали, там материал для рассказа буквально просится в кадр: дерматолог рассказывает про уход за кожей, анимация показывает работу пищеварения, затем появляются состав и упаковка продукта. Всё это можно собрать в последовательную видеопрезентацию и открыть форму заказа в нужный момент. Баеру остаётся проверить на трафике, насколько хорошо продаёт конкретный сценарий.

Про VSL и плееры я уже писал в тг-канале «Жёлтый Веб». Сегодня покажу свой вариант реализации.

Кто будет раздавать гигабайты

Видеофайл можно положить рядом с лендингом на своём серваке. Пока посетителей мало, это вполне рабочая схема. Но при серьёзном заливе видео начинает отъедать канал, и на скромном сервере просмотр начинает тормозить. А если вы умудрились загрузить видеофайл в tracker, может достаться всему трафику, что у вас есть.

Поскольку длительность видео с рассказом может доходить до десятков минут, исходящий трафик может исчисляться терабайтами!

Какие альтернативы? Готовые VSL-платформы. Но они, ясное дело, платные, причём зачастую встречается тарификация по количеству просмотров: налили больше трафика? пересмотрели тариф на плеер.

Мне захотелось отдать раздачу видео платформе, которая умеет делать это лучше всего = YouTube. А на лендинге оставить управление просмотром и показом оффера. Так появился YellowVSL.

Видео в YouTube, настройки у вас

YellowVSL встраивает YouTube-видео и добавляет собственный интерфейс: кнопки, шкалу просмотра, подсказки, показ блока с оффером или кнопок поверх видео, продолжение с сохранённого места. Сервер лендинга отдаёт только страницу и скрипт; видеопоток посетитель получает от YouTube.

Скрипт бесплатный, с открытым кодом и лицензией MIT. Подробности далее.

Демонстрация на ролике: своё оформление плеера и кнопка под видео.

Для примеров взяты три видео из категории Health & Beauty: дерматологи CeraVe, витамины Nature Made и анимация пищеварения Dr. Paulien Moyaert. Ролики используются для демонстрации интерфейса.

Как подготовить видео

Для размещения вне публичной ленты подходит «Доступ по ссылке», он же Unlisted. При загрузке выбираете этот режим, дожидаетесь обработки ролика и копируете URL. Благодаря «Unlisted» ролик не появляется во вкладке с видео канала, в фиде подписок и обычной поисковой выдаче, что бывает полезно. Также у ролика должно быть разрешено встраивание.

Ставим на лендинг

Вставьте это в HTML страницы, заменив адрес видео своим:

<div id="main-vsl"
     data-yellow-vsl
 data-video="https://www.youtube.com/watch?v=dfeKe4fITzQ">
</div>
<script src="https://cdn.jsdelivr.net/gh/dvygolov/yellow-vsl@v1.8.2/dist/yellow-vsl.min.js"></script>

Плеер найдёт контейнер автоматически. Подойдут обычная ссылка YouTube, короткая ссылка youtu.be, адрес Shorts, embed-ссылка или один ID ролика. У контейнера оставьте постоянный уникальный id: он нужен для сохранения просмотра между заходами.

Можно скачать dist/yellow-vsl.min.js from репозитория YellowVSL и подключать со своего домена. Библиотека подключается один раз на страницу, сколько бы плееров на ней ни было. Для простых настроек есть HTML-атрибуты, например data-autoplay="false", data-progress="real", data-sticky="true" or data-captions-language="en".

Для сценария с кнопками и таймерами удобнее JavaScript. Следующий пример заменяет предыдущий целиком: здесь создаём экземпляр вручную, поэтому атрибут data-yellow-vsl не нужен.

<div id="main-vsl"></div>
<section id="offer" hidden>
  <h2>Состав и условия заказа</h2>
  <p>Здесь разместите описание своего продукта и форму.</p>
</section>
<script src="https://cdn.jsdelivr.net/gh/dvygolov/yellow-vsl@v1.8.2/dist/yellow-vsl.min.js"></script>
<script>
  const player = YellowVSL.create("#main-vsl", {
    video: "https://www.youtube.com/watch?v=dfeKe4fITzQ",
    playback: { autoplay: "smart", noSeek: "forward", resume: "ask" },
    progress: { mode: "smart" },
    hooks: [{
      id: "composition-hint", start: 10, end: 18,
      text: "Дальше разберём состав", placement: "top-left"
    }],
    ctas: [{
      id: "composition", start: 35,
      text: "Посмотреть состав", placement: "below",
      reveal: "#offer", persist: true, scroll: true
    }],
    theme: { accent: "#d5ef91", panel: "#18392f" }
  });
</script>

На десятой секунде появляется подсказка, на восемнадцатой исчезает, на тридцать пятой открывается кнопка. Нажатие показывает блок #offer и прокручивает к нему страницу.

Запуск, звук и обложка

Smart Autoplay запускает видео без звука и показывает предложение включить его. По нажатию просмотр начинается со звуком с начала: зритель услышит вступление, которое успело пройти в немом режиме. Если браузер блокирует автозапуск, остаётся запуск по клику; для изначально ручного старта задайте playback.autoplay: false.

По умолчанию обложка берётся с YouTube. Через stage.poster можно поставить собственную картинку с банкой продукта или экспертом, а значением false отключить её. Параметр stage.revealDelay оставляет обложку на заданное число миллисекунд после запуска, если переход к первому кадру хочется немного задержать.

Клик по самому кадру переключает воспроизведение и паузу. Это поведение управляется stage.clickToToggle, поэтому его можно отключить и оставить управление кнопкам панели.

Шкала просмотра и перемотка

У Smart Progress шкала идёт быстрее в начале и медленнее ближе к концу. По умолчанию шкала показывает 30% после первых 10% видео и 75% после половины. Само видео при этом играет с обычной скоростью; меняется только отображение прогресса.

Отображение прогресса можно задать самостоятельно. В каждой паре первое число означает фактический процент видео, второе задаёт положение шкалы:

progress: {
  mode: "smart",
  points: [[0, 0], [10, 35], [50, 80], [100, 100]]
}

Точки должны последовательно расти и начинаться с нуля, заканчиваясь сотней. Поддерживаются и доли от 0 до 1, если весь массив записан в одной шкале. Для обычного прогресса есть mode: "real", для скрытого — mode: "hidden".

По умолчанию playback.noSeek: "forward" запрещает перепрыгнуть дальше уже просмотренной части. Вернуться назад и повторно посмотреть объяснение можно. Для свободного перемещения по всему ролику установите noSeek: false.

На заметку: появление оффера считается по фактическому времени видео, а не по шкале прогресса (КЭП!).

Показываем кнопки

Массив ctas позволяет расставить несколько предложений по ходу ролика. У каждого свой текст, время появления start, необязательное время скрытия end и постоянный id, по которому потом удобно считать клики.

Кнопка может открыть url в текущей вкладке (target: "_self") или новой ("_blank"). Другой вариант — указать reveal с CSS-селектором и раскрыть форму на самом лендинге. При таком сценарии форма открывается после клика; одно появление кнопки её ещё не показывает.

Продуктовый ролик Nature Made с кнопкой Посмотреть состав

Банки витаминов и CTA под видео. Цвета кнопки и панели заданы в настройках.

Доступны шесть позиций: над плеером (above), под ним (below) и четыре угла поверх кадра (top-left, top-right, bottom-left, bottom-right). У конкретной кнопки отдельно меняются фон background и цвет текста color, поэтому главное предложение можно выделить независимо от общей темы.

persist: true сохраняет открытое предложение при возвращении. С persist: false показ ограничивается заданным временным интервалом. scroll управляет прокруткой к раскрываемому блоку после клика, а autoScroll может подвести пользователя к кнопке сразу при её появлении.

Форма сама появляется после объяснения

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

reveals: [{
  id: "order-form", selector: "#offer", start: 60,
  persist: true, scroll: false
}]

Открытое состояние по умолчанию сохраняется. При persist: false и заданном end блок будет виден только внутри интервала. Прокрутка включается отдельно через scroll: true; можно спокойно раскрыть форму и дать человеку дочитать или досмотреть самостоятельно.

Короткие подсказки поверх ролика

hooks выводит текст по таймеру: например, «Дальше покажем состав» или «Обратите внимание на схему». Такая подсказка ничего не открывает и никуда не отправляет, у неё только текст и время показа.

Для неё доступны те же шесть позиций, что и для CTA. Начало и конец задаются в секундах, поэтому подсказку можно привязать к конкретному объяснению врача и убрать до следующей сцены.

Продолжение с сохранённого места

Если посетитель ушёл и вернулся, YellowVSL может предложить продолжить просмотр или начать заново. Это стандартный режим playback.resume: "ask". Значение "auto" восстанавливает позицию автоматически; при отключённом автозапуске видео всё равно ждёт клика.

Предложение продолжить просмотр YellowVSL

Вернувшемуся посетителю доступны продолжение и повторный просмотр с начала.

В браузере сохраняются позиция, просмотренная область и открытые офферы. Срок хранения составляет 30 дней с последнего сохранения. Режим resume: false отключает восстановление позиции, но сохраняет учёт просмотренной области и открытых предложений.

Плеер в углу при прокрутке

sticky: true включает мини-плеер в правом нижнем углу, когда посетитель прокручивает страницу мимо видео. Человек может читать состав или условия заказа и продолжать слушать объяснение. Для другого расположения и размера задайте объект:

sticky: { position: "bottom-right", width: "420px" }

Также доступен левый нижний угол — bottom-left. После паузы мини-плеер остаётся на месте, оттуда же можно продолжить просмотр. Крестик закрывает его и ставит видео на паузу.

Закреплённый мини-плеер с медицинской анимацией

Видео продолжает играть, пока посетитель читает страницу.

Видео по кнопке во всплывающем окне

Popup подходит для кнопок вроде «Посмотреть объяснение» возле карточки продукта. Добавьте на страницу кнопку <button class="watch-video">Смотреть видео</button> и укажите её селектор в настройках. Один селектор может обслуживать несколько таких кнопок:

popup: { trigger: ".watch-video", preload: true }

По умолчанию YouTube iframe создаётся при первом открытии. preload: true загружает его заранее, чтобы подготовить плеер к клику; само окно от этого не открывается и воспроизведение не стартует. Smart Autoplay применяется при первом открытии окна.

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

Закрытие ставит видео на паузу, при повторном открытии используется тот же iframe.

Субтитры и внешний вид YouTube

YellowVSL умеет включать родные субтитры ролика и выбирать язык через captions.language. При captions.enabled: "auto" сохраняется выбор YouTube, а true и false явно задают начальное состояние. Если нужного языка нет, выбирается первая доступная дорожка.

Кнопка CC появляется после получения списка дорожек от YouTube. Её можно скрыть через controls.captions: false, сохранив сами субтитры включёнными. Переключение CC сохраняет текущую позицию и состояние воспроизведения.

Стандартный youtubeUi: "clean" использует увеличенный iframe с обрезкой служебных областей YouTube. Когда включаются субтитры, геометрия автоматически становится обычной, чтобы текст попадал в видимый кадр. Выключили субтитры — вернулся чистый режим; youtubeUi: "native" оставляет обычную геометрию постоянно.

Панель управления и полный экран

В controls отдельно включаются и выключаются воспроизведение play, звук volume, полный экран fullscreen, шкала progress, субтитры captions и выбор скорости speed. Первые пять включены по умолчанию, переключатель скорости включается по желанию. Так на лендинге можно оставить ровно те кнопки, которые нужны вашему сценарию.

В полноэкранном режиме панель скрывается примерно через 2,4 секунды воспроизведения. Нажатие возвращает управление, сохраняя просмотр; на паузе кнопки остаются видимыми. Пользователь может смотреть схему органов или мелкие подписи на весь экран.

Фрагменты, скорость и повтор

Через playback.start и playback.end можно показывать выбранный кусок исходного ролика. Например, взять объяснение с 30-й по 90-ю секунду. Для этого не требуется загружать отдельную нарезку.

playback: {
  start: 30, end: 90, rate: 1, loop: true,
  autoplay: false, noSeek: false
}

У фрагмента собственный отсчёт: CTA со start: 20 здесь появится на 50-й секунде исходного ролика. Подсказки, раскрытие блоков и программная перемотка тоже используют время от начала фрагмента. Поэтому при нарезке сценария все таймеры удобно считать от нуля.

rate задаёт скорость в пределах 0,25–2, с учётом доступных для видео скоростей YouTube. Зрителю можно разрешить менять её через controls.speed: true. loop: true повторяет целый ролик или выбранный фрагмент, со сглаженным переходом на начало; обычный запуск после завершения также начинает фрагмент заново.

Мобильная версия, вертикальное видео и несколько плееров

Плеер подстраивается под ширину контейнера. Соотношение сторон задаётся через aspectRatio: стандартные "16/9", вертикальные "9/16" или другое нужное значение. Для вертикального размещения берите вертикальный исходник: формат контейнера сам по себе не перемонтирует горизонтальное видео.

Горизонтальное видео на мобильной ширине. Вертикальный контейнер задаётся отдельно.

На одной странице можно разместить несколько экземпляров: основной рассказ, объяснение состава и короткую презентацию упаковки. По умолчанию старт одного ставит остальные YellowVSL на паузу, чтобы со страницы не заговорили три доктора одновременно. За это отвечает playback.singlePlayback; при необходимости одновременного воспроизведения задайте false.

Цвета и тексты под ваш ленд

Через theme меняются акцент accent, фон background, панель panel, основной текст text, вторичный текст muted, скругление radius и тень shadow. Эти значения также доступны через CSS-переменные --yvsl-accent, --yvsl-bg, --yvsl-panel, --yvsl-text, --yvsl-muted, --yvsl-radius, --yvsl-shadow. Для Health & Beauty на скринах использована зелёная палитра; для другого ленда можно задать свои цвета.

Все интерфейсные надписи переопределяются через locale: от «Включить звук» до предложения продолжить просмотр и сообщений об ошибках. Это позволяет подготовить плеер под гео и выдержать тон лендинга. Например, locale: { unmutePrompt: "Tap to enable sound", continue: "Continue", restart: "Start over" } заменит эти три строки; остальные нужные подписи переводятся там же.

События для аналитики

Плеер отправляет события в документ, поэтому, если вы технически подкованны (или умеете работать с AI-агентами), можете связать эти события с вашей аналитикой.

Есть готовность ready, начало просмотра view, воспроизведение play, пауза pause, прогресс progress, выбор продолжения resume, завершение complete, показ CTA cta-show, клик cta-click, переключение субтитров captions и ошибка error. Полное имя каждого начинается с yellowvsl:.

В обычных событиях доступны ID видео, текущее время, длительность, максимально просмотренная позиция и экземпляр плеера. События CTA дополнительно содержат строковый идентификатор кнопки cta, а клик — ещё и url.

Например, этот код передаст клик в dataLayer. Добавьте его после подключения библиотеки, а обработку события настройте в своём менеджере тегов:

document.addEventListener("yellowvsl:cta-click", ({ detail }) => {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: "vsl_cta_click",
    video_id: detail.videoId,
    cta_id: detail.cta,
    video_time: Math.round(detail.currentTime),
    destination: detail.url
  });
});

Для этапов просмотра можно обрабатывать progress и отправлять собственные отметки 25%, 50%, 75%, один раз на каждую.

Программно управляем плеером

YellowVSL.create() возвращает экземпляр, готовность которого можно дождаться через await player.ready. Дальше доступны play(), pause(), mute(), unmute(), seek(seconds), open() и close(). Вызов unmute(true) дополнительно начинает видео заново, а программная перемотка соблюдает настроенное ограничение перехода вперёд.

Субтитрами управляют enableCaptions(language), disableCaptions() и toggleCaptions(). Метод getState() возвращает состояние: позицию currentTime, длительность duration, просмотренную область maxWatched, звук, язык субтитров, скорость и состояние popup/sticky. На этом можно построить свои внешние кнопки или связать плеер с шагами лендинга.

Для динамически добавленной разметки есть повторный YellowVSL.autoInit(): уже созданные экземпляры не дублируются. destroy() снимает обработчики и удаляет интерфейс экземпляра, после чего контейнер можно использовать снова. У ленивого popup начальный ready может завершиться до создания YouTube iframe: загрузка самого видео начинается при open().

Помимо обычного файла для ., в репозитории есть ESM-сборка и TypeScript-типы. Библиотека написана на чистом JavaScript и не требует подключения React, jQuery или другого фреймворка. Для страниц с Content Security Policy предусмотрен styleNonce, который передаётся создаваемому стилю.

Забираем и собираем свой VSL

Код и полный справочник параметров лежат на GitHub, готовые примеры можно глянуть на демосайте YellowVSL.

Итого: VSL — это круто, стильно, современно, молодёжно. Особенно когда под рукой свой плеер, а серверу лендинга не приходится раздавать терабайты с говорящими докторами. Берите YellowVSL, собирайте свои сценарии и проверяйте их на трафике.

And with you was Yellow Web, pour in the plus, gentlemen!