Встраиваемый Видео-виджет для любого сайта

виджеты, vue.js

Веб-мастерская MAKE-WEBSITE.ru

Всем привет! Меня зовут Геннадий. Я профессиональный вебмастер и автор этого виджета. Люблю разработку на Vue.js, создаю сайты на движках MODx и PrestaShop. Умею рисовать в Photoshop и CorelDRAW. Обращайтесь с любыми вопросами! Написать.

Виджет «Видео-приветствие»

Этот виджет можно использовать как дополнительный маркетинговый инструмент на вашем сайте. Он станет отличной мотивирующей видео-презентацией вашего продукта или услуги.

Чтобы посмотреть ролики просто кликните на окно-превью (справа внизу экрана).

Виджет можно встроить в любой сайт посредством вставки кода на страницу. Для формирования кода понадобится предварительная настройка виджета. В конфигураторе вы можете добавить свои видеоролики (до 8 клипов), выполнить настройку внешнего вида виджета: форма (круг/квадрат), позиция (слева/спрва), размер превью-окна, цвет рамки, шрифт, его размер, насыщенность и цвет.

К каждому видео есть возможность добавить кнопки-ссылки на целевые веб-страницы и страницы соцсетей.

Основное (первое) видео рекомендуется сделать вертикального формата для оптимального отображения виджета и на компьютерах, и на смартфонах. Последующие ролики будут адаптированы по ширине основного. В демо примере ролики сняты на телефоне Самсунг.

В настройках есть возможность отпозиционировать и изменить масштаб основного видео в превью-окне виджета, а также наложить надпись-заголовок и определить его местоположение в пределах превью-блока.

Окно просмотра видеороликов открывается по клику на превью на высоту экрана с отступами на компьютере и без отступов на телефоне. Оно снабжено прогресс-баром и кнопками: Закрыть, Воспроизведение/Пауза, Отключение звука, навигационные кнопки (если роликов больше 1), а также Поделиться в соцсетях или мессенджерах.

Примеры виджета

  1. Здесь на странице вы можете поиграть с настройками. Оставить один ролик или добавить еще до 8 видео.
  2. Vue.js widget — на этой странице установлен и работает виджет.
  3. Подобный виджет — на сайте driveavto.ru

Конфигуратор для Video виджета

Виджет разработан на Vue.js. По своему функционалу он подобен сторис Instagram.

Пример кода для встраивания на сайт:


<vue-widget src="https://make-website.ru/video-widget/video-widjet-4.mp4" mainvideo="18,14,0.6" shape="circle,200" position="right" colors="#696E7D,#D27804" caption="Узнай, как получить скидку! &#128293;" captionpos="0,65" captionfont="Arial,18,normal,#D27804" linksname="Friday discount" linksurl="http://yg-garments.ru/models/majka-toledo.html"></vue-widget>
<script src="https://make-website.ru/video-widget/app.js"></script>

Вы можете протестировать этот демо-пример прямо сейчас, вставив код на страницу своего сайта.

Оптимизация видеороликов для виджета

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

Тогда в консоли браузера (клавиша F12) вы можете наблюдать ошибку: Failed to load resource: net::ERR_CACHE_OPERATION_NOT_SUPPORTED (Не удалось загрузить ресурс):

Не удалось загрузить видео

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

Уменьшение и сжатие роликов Демо-примера

  1. 1 видео: video-widjet-4.mp4
    Оригинал с смартфона 34.6 Мб
    Уменьшение размера ролика до 426 х 757 в редакторе «VideoPad»: 2.46 Мб
    Сжатие в сервисе Videosmaller: 2.46 Мб => 1.33 Мб (-45.98%)
  2. 2 видео: video-clip-6.mp4
    Оригинал с смартфона 122 Мб
    Обрезка видео и уменьшение размера ролика до 426 х 757 в редакторе «VideoPad»: 4.27 Мб
    Сжатие в сервисе Videosmaller: 4.27 Мб => 1.03 Мб (-75.87%)
  3. 3 видео: video-widjet-5
    Оригинал с смартфона 22.8 Мб
    Уменьшение размера ролика до 757 х 757 в редакторе «VideoPad»: 2.10 Мб
    Сжатие в сервисе Videosmaller: 2.10 Мб => 1.44 Мб (-31.55%)

При этом в сервисе Videosmaller я не отмечал чекбокс: «Используйте низкий уровень сжатия (лучшее качество)»

Если у вас возникли вопросы, замечания или предложения, пишите их в комментариях. Я отвечаю в течение дня.

Вид виджета на смартфоне

Адаптивный виджет для сайта

Оставьте свой комментарий!


Разрешённые теги: <b><i><br>


Комментарии (4)

  1. Геннадий: Июль 10, 2020г. в 22:03

    Как вам видео-виджет?
    Удобно ли пользоваться Конфигуратором?

    Ответить
  2. Александр: Апрель 07, 2021г. в 14:20

    Геннадий, добрый день! Этот виджет бесплатный? Как можете настроить его для нас?

    Ответить
  3. Ехилевский Евгений: Май 27, 2021г. в 13:14

    Отличный виджет! Жаль, что отсутствует возможность закрыть его ("x"). Будет раздражать пользователей.

    Ответить
  4. Сергей: Август 14, 2021г. в 10:01

    Добрый день! Спасибо за виджет. Подскажите пожалуйста, как можно задать css для виджета (например так box-shadow: 0px 10px 20px rgb(0 0 0 / 40%);) Спасибо!

    Ответить
 

Давайте общаться

Я хотел бы поговорить о вашем бизнесе, отправьте мне письмо на make.website.info@gmail.com.