Видео плеер для сайта Video Lightbox



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

Совсем другая картина получается тогда, когда надо разместить на одной странице несколько видео роликов. Вот тут не всё так просто, как кажется.

Появилась у меня тут необходимость разместить 20 видео роликов с YouTube на одной странице. Казалось бы, что сложного, делай разметку, вставляй нужные коды. Элементарная задачка.

Кто не сталкивался не поймет, кто пытался – знает то, что получается на выходе.

А получается тяжеленная страница, в которой долго-долго подгружаются видео файлы, и совсем не факт, что браузер не зависнет от такой задачи. О скорости загрузки можно забыть.

Вывод один — надо искать решение, которое бы и позволяло оптимально размещать большое количество видео роликов на одной странице.

Есть у нас, всем знакомое решение, называется всплывающее окно. Это когда жмём на маленькое изображение на странице, и, видим большое изображение в новом окне без перезагрузки. На этом сайте есть статейка про такой плагин и скрипт под названием PrettyPhoto. Хотелось бы найти что-то подобное и для видео файлов.

Кто ищет, тот всегда найдет. Поисковик выдал сайт Videolightbox.com, где ребята предлагаю легкую программку с видео плеером для сайта с показом видео в красивом всплывающем окне.

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

Как сделать видео плеер для сайта с программой Video Lightbox

Видео плеер для сайта Video Lightbox

Видео плеер для сайта Video Lightbox

Идем на сайт программы, жмём на кнопочку Free Download, и скачиваем последнюю версию программы. Есть и платный вариант, но нам, более чем достаточно будет версии для некоммерческого использования.

Скачали. В установке сложного ничего нет, думаю, любой разберется. Запускаем программку.

Загрузка видео файлов в программу Video Lightbox

Загрузка видео файлов в программу Video Lightbox

Смотрим рабочее окно первой вкладки. Вот сюда мы и будем добавлять наши видео файлы. Стрелочка под номером 1 – это куда вставлять адрес файла, Стрелочка под номером 2 – кнопка добавления.

Загрузка внешнего вида изображений в Video Lightbox

Загрузка внешнего вида изображений в Video Lightbox

Дальше у нас настройка внешнего вида превьюшки. Это по которой мы будем щёлкать, чтобы открылось всплывающее окно.

  • Тут выбирается готовый шаблон внешнего вида. Изменения видны сразу.
  • Выбираем высоту и ширину маленького изображения.
  • Выбираем формат, в котором эта превьюшка сохранится и качество сохранения графического файла.
  • Можно выбрать цвет фона для блока превьюшек.
  • Можно настроить вывод превьюшек в несколько столбцов. Аж до 15.
  • Можно вывести Заголовки для изображений.
  • Можно разместить кнопку Play прямо на изображении.
Загрузка внешнего вида плеера в Video Lightbox

Загрузка внешнего вида плеера в Video Lightbox

Теперь будем настраивать внешний вид видео плеера для сайта. То бишь, самого вплывающего окна с видео файлом.

  • Выбираем внешний вид. Довольно неплохая подборка, изменения видны сразу.
  • Выбираем размер всплывающего окна.
  • Можно изменить цвет заливки.
  • А вот дальше, есть пункт Watermark, тут ничего изменить не получится, можно только перейти по ссылке и коммерческую версию. Как с этим справится без финансовых затрат, я расскажу ниже.
  • Можно сделать так, чтобы видео плеер закрывался после проигрывания.

Четвертая вкладка – Publish (Публикация). Тут сложного ничего нет, просто укажите место, где вы хотите сохранить файлы и нажмите внизу кнопку Publish.

Всё, в результате нетрудных манипуляций, мы получаем нужные файлы на своём компьютере. Остаётся только открыть файл index.html, скопировать нужный код и подключения файлов скрипта. Залить папку на хостинг, а код вставить в нужное место на странице.

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

Как удалить ссылки на сайт разработчиков 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=”код”. Это и есть закодированная ссылка на сайт. Всё что между кавычками удаляем и сохраняем. Ссылка больше наблюдаться не будет.

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

Всем желаю творческих удач! :bye:

@ ПОДПИСАТЬСЯ НА НОВОСТИ САЙТА

Этот сайт работает на быстром, надёжном, не дорогом хостинге GIGAHOST

Поделиться:

Комментарии к «Видео плеер для сайта Video Lightbox»

  1. Игорь:

    А как сделать чтоб окно с видео не вылетало, в какой переменной убрать скорость появления на НОЛЬ? Чтоб просто появлялось окно!

  2. Владимир:

    Программка хорошая. Вот только описания к видео (загружаю с ютуба) в ней и в сохраненном проекте отображается кракозябрами, типа €“ отражени Можно конечно ручками переписать в исходнике, но если видео много, то … Пробовал посохранять некоторые файлы программы в utf-8, но не помогло. Буду признателен, если подскажете, как решить проблемку.

    1. Владимир, попробуйте во вкладке Функции — Язык выбрать нужный язык и сохраните.

      Удачи!  :bye:

      1. Владимир:

        Спасибо, за столь быстрый ответю Нужный язык (русский) я выбрал с самого начала — не помогло. Не хочет чего-то она отображать кириллицу.

        1. Владимир, тогда надо немного исправить файл index.html после публикации. Откройте в любом редакторе, лучше Notepad++ пропишите нужные названия в значениях alt и title. Всё будет отображаться как надо.

          Удачи! :bye:

  3. Владимир:

    Спасибо за статью. Удалось удалить значок. Только у меня на последней версии var x=»»;var t=»»

  4. Сергей:

    Добрый день!

    Поставил продукт на компьютер, отлично, сгенерировал страничку HTML, все работает на локальном компьютере.

    Перенес на внутренний сайт, фрагмент (иконка) есть, а при попытке проиграть вызывается пустое (черное) окно проигрывателя и надпись —  неверный источник.

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

    С уважением, Сергей

    1. Сергей, только что, не поленился, скачал новую версию программы и сваял галерею. Все прекрасно работает и на компьютере и на сайте. Скорее всего, у вас ошибка в подключении рабочих файлов галереи. Проверьте всё ещё раз внимательно.

      Удачи!  :bye:

      1. Добрый день!
        Огромное спасибо за такую быструю реакцию на вопрос.
        Я проверил пути подключения, вроде все нормально…
        Наверное, я не акцентировал внимание на то, что сайт расположен во внутренней сети предприятия без доступа к Интернету, и в качестве движка используется Microsoft IIS.
        Все написано на html и php. Когда обращаюсь через браузер Chrom, то окно плеера белое и крутится признак загрузки, на этом все. Такое впечатление, что не понимается формат mp4.
        Так как если написать ссылку в браузере типа http://www.sait.ru/index_videolb/video/v.mp4, то возникает
        сообщение об ошибке 404 файл или директория не найдены от IIS. Хотя через файловый сервис, все на месте, и этот файл проигрывается, если подключить сетевой диск.
        Может я не вижу очевидных вещей, но вот так получилось.
        С уважением, С.Крумин

        1. Сергей, откуда загружаться ролику, если нет подключения к Интернету. В этом и ответ. :wacko:

          1. Добрый день!
            Это адрес во внутренней сети…
            С уважением, Сергей. :unsure:

  5. Sergey, ситуация с видео из Youtube не самая весёлая. Постоянно выходит ошибка. Остаётся только ждать обновления программы. Уже год разработчики молчат. 

    1. Добрый день!
      А может есть другой сервис, наподобие этого…А то что то подсказывает что с ютьюбом теперь будут проблемы все время…А разрабы молчат….

      1. Виктор, есть похожая программа, называется Amazing Carousel. Но там несколько другой внешний вид. Вот статья про эту прогу: http://wwdiz.ru/amazing-carousel-delaem-slajder-s-video-i-kartinkami.html

        Удачи! :bye:

        1. Тоже самое…не вставляет видео с youtube, пишет не удалось получить название видео с youtube. Похоже это со стороны youtube ограничения…перепробовал разные видео, 100% с разрешением на встраивание

          1. Да, Виктор, очень на это похоже. Надо в этом деле сделать паузу, подождать пока разработчики обновят свои программы.  :wacko:

  6. Sergey:

    Добрый день! При вставки видео возникает ошибка  «видео не найдено»  не подскажете с чем это может быть связано?

  7. эйнштейн:

    Спасибо огромное! Раньше мучался с этой проблемой :good:

  8. Да, согласен.Спасибо!Так  и будем делать…

  9. да, я именно так и делаю…но блинннннн…столько мороки….интересно, что произошло?

    1. Виктор, Гугл на месте не стоит, придумывает различные фенечки и для удобства и для зарабатывания денег для себя любимого, бизнес. А программуля уже достаточно давно не обновлялась. Вот и косячок получился.

      А по неудобству, скриншотов нужного размера наклепать, да и закинуть в папочку, делов-то. Ну а если ваять галереи в промышленных масштабах, то, вообще можно одной дежурной фоткой обойтись.  :yes:

      Удачи!  :bye:

  10. Добрый день!Спасибо за ответ.Но в настройках канал указано как раз разрешение на встраивание видео.Я брал наугад с любых видео ютьюба — результат тот же.Пробовал с вимео — все нормально…Может что то ютьюб изменил?

    1. Виктор, специально запустил программу и проверил. Всё, как вы говорите. Вместо маленькой картинки (превьюшки) рожица со смайликом от Youtube. При этом, при сохранении проекта, видео проигрывается нормально.

      Решается ситуация просто. При сохранении проекта есть папка index_videolb в ней другая папка thumbnails там все эти превьюшки и находятся. Заменяем на нужные и получаем желанный эффект.

      Удачи!  :bye:

  11. Виктор:

    Добрый день! При вставке видео с ютьюба в окошко video url вместо иконки с картинкой с видео — получаю картинку со значком с ютьюба и какой то надписью…раньше все раюботало нормально.пробовал на разных компах, с разными видео…может что то с сервисом?

    1. Виктор, такое случается тогда, когда автор ролика, в настройках, указал то, что он не хочет, чтобы этот файл проигрывался на других сайтах.

      Удачи! :bye:

  12. Добрый день!

    Отличная статья, очень пригодилась, но есть проблема в том что картинка видео у меня на сайте только на главной странице нормально отображается, а на других страницах нет! И на главной все ровно работает при нажатии на картинку открывается плеер, а на других страницах и картинка не отображается и плеер не подгружается, а открывается сразу YouTube!

    Как бы исправить данную ситуацию?

    Заранее спс!

    Дуард

    1. Эдуард, благодарю за активность. То поведение скрипта, которое вы описываете, происходит в том случае, когда не правильно подключены нужные файлы в разделе head. Ищите файл single.php или header.php и подключите там.

      Удачи!  :bye:

      1. Добрый день! Проблема в том, что у меня самописный движок и нет файлов single.php или header.php
        Проблема остается быть!
        спс. :unsure:

        1. Эдуард, через поиск, в том же Total Commander, ищите файлы с текстом header. Как искать есть на этом сайте. Дальше ищете тот файл, который формирует одиночные записи, там и подключайте.

          Удачи! :bye:

  13. Polina:

    Добрый день! Плеер очень понравился. Проблема в том, что в Explorer 11 видео отображается без звука… Что делать? В остальных браузерах: Firefox, Google Chrome все нормально.

    1. Polina, только что зашёл на их сайт, специально проверил как работает видео в 11 Explorere. Всё нормально отображается. Ищите ошибку.

      Удачи!  :wacko:

  14. Добрый день!Большое спасибо за работу.Два вопроса.

    1. Как сделать так чтобы окно в котором играет видео было все время посередине экрана, а не находилось вверху. Неудобно, к нему нужно скроллингом подниматься…

    2. Код плеера при установке сбивает кодировку на странице…почему?

     

    1. Виктор, благодарю за активность.

      Кодировка на странице сбивается в тех случаях, когда не закрыты тэги. Проверьте.

      Для центрирования применяют тег

       

      Между ними и вставляйте нужный код.

      Удачи!  :bye:

      1. С кодировкой разобрался, спасибо!
        А по поводу центровки…куда именно нужно вставлять тег?..

        1. Виктор, читайте внимательно предыдущий ответ. Там где идёт текст «ваш код» туда и вставляется нужный код с видеофайлом. :wacko:

  15. Сергей:

    Здравствуйте. А как это все в запись то вставить, в пост? Индекс файл туда копировать что ли?

    1. Сергей, вставка кода видео галереи на свой сайт состоит из двух частей:

      Пункт первый — в секцию head надо вставить всё то, что находится в индексном файле между зелёными тегами !— Start VideoLightBox.com HEAD section — и !— End VideoLightBox.com HEAD section — до закрывающего тега /head

      Пункт второй — в запись вставляется всё то, что находится между теми же зелёными тегами !— Start VideoLightBox.com HEAD section — и !— End VideoLightBox.com HEAD section — но уже после тега body.

      Естественно, не забываем залить нужные файлы на хостинг и прописать нужные пути.

      Удачи!  :bye:

  16. Евгений:

    WWWDIZ

    Нашел переменную autoplay только в файле videolightbox.js. Замена 1 на 0 и удаление результата не дали. Может подскажите, в каком именно месте нужно поменять, чтобы видео начинало работать после нажатия кнопки “play”.

    1. Евгений, искать надо в файле index.html, это в том случае, если вы сохраняете код в папке у себя на компьютере. Там где начинается код для вставки, ищите ссылку на файл видеохостинга:

      Выглядит это вот так: «ссылка на видеохостинг?autoplay=1&rel… Вот эту единичку и надо заменить на 0, сложного ничего нет.

      Вот, в качестве примера кусок кода:

      a class=»voverlay» title=»Самое первое знакомство с интерфейсом программы» href=»http://www.youtube.com/v/-fIKYXdcjKo?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer»>Самое первое знакомство с интерфейсом программы

      Внимательно посмотрите, и всё найдёте. Удачи! :bye:

  17. Александр:

    Спасибо огромное ! Приятно иметь дело со специалистами.

    1. Евгений:

      Здравствуйте.Подскажите, видео начинает работать сразу после открытия lightbox картинки.Можно ли сделать так, чтобы видео не сразу начинало работать, а только после нажатия кнопки «play».

      1. Евгений, в коде для вставки на страницу есть переменная autoplay=1, либо удаляете всю эту переменную, либо меняете единицу на 0, и все заработает так как вы хотите. Удачи!  :bye:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

:bye: 
:good: 
:za-nas: 
:wacko: 
:yahoo: 
:skromnost: 
:heart: 
:rose: 
:-) 
:yes: 
:cry: 
:mail: 
:unsure: 
;-)