Видео плеер для сайта Video Lightbox
Опубликовано: 01.09.2018
Видео плеер для сайта, в принципе, особо не нужен. Если у вас видео размещено на том же YouTube, там есть свой код, и особо заморачиваться необходимости нет. Так же и для других видео хостингов. Во многих темах уже есть встроенные видео плееры, только код нужно добавить с адресом файла.
Совсем другая картина получается тогда, когда надо разместить на одной странице несколько видео роликов. Вот тут не всё так просто, как кажется.
Появилась у меня тут необходимость разместить 20 видео роликов с YouTube на одной странице. Казалось бы, что сложного, делай разметку, вставляй нужные коды. Элементарная задачка.
Кто не сталкивался не поймет, кто пытался – знает то, что получается на выходе.
А получается тяжеленная страница, в которой долго-долго подгружаются видео файлы, и совсем не факт, что браузер не зависнет от такой задачи. О скорости загрузки можно забыть.
Вывод один — надо искать решение, которое бы и позволяло оптимально размещать большое количество видео роликов на одной странице.
Есть у нас, всем знакомое решение, называется всплывающее окно. Это когда жмём на маленькое изображение на странице, и, видим большое изображение в новом окне без перезагрузки. На этом сайте есть статейка про такой плагин и скрипт под названием PrettyPhoto . Хотелось бы найти что-то подобное и для видео файлов.
Кто ищет, тот всегда найдет. Поисковик выдал сайт Videolightbox.com, где ребята предлагаю легкую программку с видео плеером для сайта с показом видео в красивом всплывающем окне.
Если заинтересовало, то можете посмотреть демо материалы на их сайте. Действительно, хорошо сделано. Красиво, понятно, сложностей никаких нет. Вариантов внешнего вида превьюшек и видео плеера, более чем, достаточно. Есть из чего выбрать.
Как сделать видео плеер для сайта с программой Video Lightbox
Видео плеер для сайта Video Lightbox
Идем на сайт программы, жмём на кнопочку Free Download , и скачиваем последнюю версию программы. Есть и платный вариант, но нам, более чем достаточно будет версии для некоммерческого использования.
Скачали. В установке сложного ничего нет, думаю, любой разберется. Запускаем программку.
Загрузка видео файлов в программу Video Lightbox
Смотрим рабочее окно первой вкладки. Вот сюда мы и будем добавлять наши видео файлы. Стрелочка под номером 1 – это куда вставлять адрес файла, Стрелочка под номером 2 – кнопка добавления.
Загрузка внешнего вида изображений в Video Lightbox
Дальше у нас настройка внешнего вида превьюшки. Это по которой мы будем щёлкать, чтобы открылось всплывающее окно.
Тут выбирается готовый шаблон внешнего вида. Изменения видны сразу. Выбираем высоту и ширину маленького изображения. Выбираем формат, в котором эта превьюшка сохранится и качество сохранения графического файла. Можно выбрать цвет фона для блока превьюшек. Можно настроить вывод превьюшек в несколько столбцов. Аж до 15. Можно вывести Заголовки для изображений. Можно разместить кнопку Play прямо на изображении.
Загрузка внешнего вида плеера в Video Lightbox
Теперь будем настраивать внешний вид видео плеера для сайта. То бишь, самого вплывающего окна с видео файлом.
Выбираем внешний вид. Довольно неплохая подборка, изменения видны сразу. Выбираем размер всплывающего окна. Можно изменить цвет заливки. А вот дальше, есть пункт Watermark, тут ничего изменить не получится, можно только перейти по ссылке и коммерческую версию. Как с этим справится без финансовых затрат, я расскажу ниже. Можно сделать так, чтобы видео плеер закрывался после проигрывания.Четвертая вкладка – Publish (Публикация). Тут сложного ничего нет, просто укажите место, где вы хотите сохранить файлы и нажмите внизу кнопку Publish .
Всё, в результате нетрудных манипуляций, мы получаем нужные файлы на своём компьютере. Остаётся только открыть файл index.html, скопировать нужный код и подключения файлов скрипта. Залить папку на хостинг, а код вставить в нужное место на странице.
Вот видеоролик, который сняли сами разработчики, где можно по шагам увидеть весь процесс создания галереи: 
Как удалить ссылки на сайт разработчиков Video Lightbox
Тут уж, каждый для себя сам должен решить, как ему поступать. Либо платить 49 долларей за одиночную лицензию, либо 69 долларей за безлимитную. Либо пользоваться свободной версией, но со ссылкой. Либо просто удалить ссылку из плеера путём правки кода. Выбирать вам, а ссылку можно удалить всего за два шага:
Первый шаг. Когда вы будете вставлять код из файла index.html на свою страницу нужно в конце текста найти и удалить тэг span с текстом:
<span class=»videolb»><a href=»http://videolightbox.com»>Embed Video HTML</a> by VideoLightBox.com v2.8</span>
Смотрим, что получилось и видим, что в видео плеере ссылка на сайт так и осталась. Можно и с этим справиться.
Второй шаг. Ищем в нашей папочке с плеером файл videolightbox.js, открываем. Несложно найти в первом абзаце, после зелёных комментариев два закодированных текста в кавычках. Это две переменные var t=”код” и var q=”код” . Это и есть закодированная ссылка на сайт. Всё что между кавычками удаляем и сохраняем. Ссылка больше наблюдаться не будет.
Вот такой у нас получился видео плеер для сайта. Выглядит неплохо, сайт не грузит, работает стабильно, к мобильным устройствам адаптирован.
Всем желаю творческих удач! 
✔ Этот сайт работает на быстром, надёжном, не дорогом хостинге GIGAHOST