Урок 202. Создаем появляющуюся кнопку в видео

Как сделать появляющуюся кнопку в видеоВсем привет! В этом уроке, Вы узнаете, как сделать появляющуюся кнопку в видео. Что это за кнопка, и для чего она нужна, Вы, наверное, догадались. Обычно такую кнопку применяют для заказа каких-то услуг, или продажи чего-либо.

Во время просмотра видео, эта кнопка появляется в определенное время, а затем исчезает. Параметры задаете Вы сами. На некоторых продающих сайтах такая кнопка встречается.

 

Создаем появляющуюся кнопку в видео

Создавать кнопку, мы будем с помощью сервиса «MAGICVSL». Перейдите по этой ссылке на сервис. Регистрироваться не нужно. Можно сразу приступить к созданию (генерации) новой кнопки.

Вначале нужно выбрать, для какого видео плеера Вы создаете кнопку:

  1. JW Player
  2. Flow player
  3. YouTube

Выбираем, например, «YouTube».

В верхнее поле «Видео URL», нужно вставить ID видео. Среднее поле можно оставить пустым. Затем задаем размер плеера,  «автопроигрывание» оставляем на Ваше усмотрение, и «скрыть контролеры», можно не трогать.

Создаем появляющуюся кнопку в видео

Что такое ID видео? Выбираете любое видео на Ютуб, для которого и собираетесь создавать появляющуюся кнопку. И в ссылке к этому видео, нужно скопировать каракули, которые идут после знака «равно».

https://www.youtube.com/watch?v=6g0KSOpDWmg

С этими настройки разобрались. Теперь в нижнее окно нужно вставить HTML код кнопки. Если с HTML Вы не очень дружите, тогда можно воспользоваться HTML редактором, например, редактором WordPress, где Вы пишите статьи.

Вставьте изображение кнопки, добавьте внешнюю ссылку, а затем скопируйте HTML код. Вот именно этот код и нужно вставить.

Настройки появляющейся кнопки

В самом низу нужно задать время, когда кнопка должна появляться, и когда исчезать. Можно еще выбрать для кнопки анимацию: появляется сверху вниз, или появляться плавно.

Чуть ниже есть еще одна кнопка салатового цвета. Ей можно воспользоваться, если Вы хотите добавить к видео еще одну, или более кнопок в видео. К одному видео можно добавлять несколько кнопок. Сейчас я объясню, как это работает.

Например, человек смотрит вебинар в записи, где на 30-й минуте ему предлагается купить какой-то товар. В это время появляется кнопка, нажав на которую, он переходит к покупке.

Далее по ходу просмотра видео, появляется уже другая кнопка, но для заказа каких-то услуг, или покупки уже другого товар. Потом появляется третья кнопка, для катапультирования... Надеюсь, я понятно объясняю. Но, если Вы предлагаете только одну услугу, или товар, тогда этот пункт можно пропустить

Жмем огромную кнопку «Генерировать», после чего появляется готовый, сгенерированный код. Этот код нужно скопировать, а затем вставить в файл index.html. Не надо вставлять код в файл под другим названием, иначе плеер работать не будет.

Готовый сгенерированный код для появляющейся кнопки

Но это еще не все. Там же, где Вы скопировали уже готовый код, есть кнопка «Скачать файлы для YouTube». Нажимаете ее, и скачиваете архив, без которого плеер играть не будет.

В этом архиве, есть папка «vsl». Поместите эту папку и файл index.html в отдельную папку. Теперь эту папку нужно закинуть на свой хостинг.

Если во время проигрывания ролика, кнопка появляется не в центре, а слева страницы, тогда откройте файл index.html, и в нижнем коде кнопки исправьте «left» на «center». Вот кусок этого кода

<div class="jsvg-acl"><div align='left' width='100%'>

Видео: как создать появляющуюся кнопку в видео


____________________
К уроку 203. Подключаем шрифты Google Fonts к сайту

2 Comments

  1. Добрый день. Вы описали как создать кнопку на хостинге. А на самом Youtube? Я вижу у очень многих есть кнопки.Не обязательно для продажи, просто для красоты.

    mcaris74
    • Здравствуйте. Вы имеете в виду, что у многих есть кнопки на Youtube в самом видео? Если да, то это легко делается в видео редакторе. Я лично пользуюсь редактором Camtasia Studio. Можно не только кнопки вставлять, но и многое другое, например, логотип, или картинку

Leave a Reply

Яндекс.Метрика