Встраиваемый Видео-виджет для любого сайта
Веб-мастерская MAKE-WEBSITE.ru
Всем привет! Меня зовут Геннадий. Я профессиональный вебмастер и автор этого виджета. Люблю разработку на Vue.js, создаю сайты на движках MODx и PrestaShop. Умею рисовать в Photoshop и CorelDRAW. Обращайтесь с любыми вопросами! Написать.
Виджет «Видео-приветствие»
Этот виджет можно использовать как дополнительный маркетинговый инструмент на вашем сайте. Он станет отличной мотивирующей видео-презентацией вашего продукта или услуги.
Чтобы посмотреть ролики просто кликните на окно-превью (справа внизу экрана).
Виджет можно встроить в любой сайт посредством вставки кода на страницу. Для формирования кода понадобится предварительная настройка виджета. В конфигураторе вы можете добавить свои видеоролики (до 8 клипов), выполнить настройку внешнего вида виджета: форма (круг/квадрат), позиция (слева/спрва), размер превью-окна, цвет рамки, шрифт, его размер, насыщенность и цвет.
К каждому видео есть возможность добавить кнопки-ссылки на целевые веб-страницы и страницы соцсетей.
Основное (первое) видео рекомендуется сделать вертикального формата для оптимального отображения виджета и на компьютерах, и на смартфонах. Последующие ролики будут адаптированы по ширине основного. В демо примере ролики сняты на телефоне Самсунг.
В настройках есть возможность отпозиционировать и изменить масштаб основного видео в превью-окне виджета, а также наложить надпись-заголовок и определить его местоположение в пределах превью-блока.
Окно просмотра видеороликов открывается по клику на превью на высоту экрана с отступами на компьютере и без отступов на телефоне. Оно снабжено прогресс-баром и кнопками: Закрыть, Воспроизведение/Пауза, Отключение звука, навигационные кнопки (если роликов больше 1), а также Поделиться в соцсетях или мессенджерах.
Примеры виджета
- Здесь на странице вы можете поиграть с настройками. Оставить один ролик или добавить еще до 8 видео.
- Vue.js widget — на этой странице установлен и работает виджет.
- Подобный виджет — на сайте 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="Узнай, как получить скидку! 🔥" 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 видео: video-widjet-4.mp4
Оригинал с смартфона 34.6 Мб
Уменьшение размера ролика до 426 х 757 в редакторе «VideoPad»: 2.46 Мб
Сжатие в сервисе Videosmaller: 2.46 Мб => 1.33 Мб (-45.98%) - 2 видео: video-clip-6.mp4
Оригинал с смартфона 122 Мб
Обрезка видео и уменьшение размера ролика до 426 х 757 в редакторе «VideoPad»: 4.27 Мб
Сжатие в сервисе Videosmaller: 4.27 Мб => 1.03 Мб (-75.87%) - 3 видео: video-widjet-5
Оригинал с смартфона 22.8 Мб
Уменьшение размера ролика до 757 х 757 в редакторе «VideoPad»: 2.10 Мб
Сжатие в сервисе Videosmaller: 2.10 Мб => 1.44 Мб (-31.55%)
При этом в сервисе Videosmaller я не отмечал чекбокс: «Используйте низкий уровень сжатия (лучшее качество)»
Если у вас возникли вопросы, замечания или предложения, пишите их в комментариях. Я отвечаю в течение дня.
Вид виджета на смартфоне
Посмотрите короткое видео об этом виджете:
Оставьте свой комментарий!
Комментарии (4)
Давайте общаться
Я хотел бы поговорить о вашем бизнесе, отправьте мне письмо на make.website.info@gmail.com.
Геннадий: Июль 10, 2020г. в 22:03
Как вам видео-виджет?
ОтветитьУдобно ли пользоваться Конфигуратором?
Александр: Апрель 07, 2021г. в 14:20
Геннадий, добрый день! Этот виджет бесплатный? Как можете настроить его для нас?
ОтветитьЕхилевский Евгений: Май 27, 2021г. в 13:14
Отличный виджет! Жаль, что отсутствует возможность закрыть его ("x"). Будет раздражать пользователей.
ОтветитьСергей: Август 14, 2021г. в 10:01
Добрый день! Спасибо за виджет. Подскажите пожалуйста, как можно задать css для виджета (например так box-shadow: 0px 10px 20px rgb(0 0 0 / 40%);) Спасибо!
Ответить