Видео в LightBox для блога на Blogger/Blogspot

<<

Admin

Аватара пользователя

Автор темы

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 26 апр 2011, 23:30

Видео в LightBox для блога на Blogger/Blogspot

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

Демо блог.

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

Я решила построить статью из расчета, что вы размещаете много видео-контента в своем блоге. Поэтому статья будет разделена на два этапа - подготовительный и публикация видео в блоге.

Подготовительный этап - делаем один раз и забываем.

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

Добавляем ссылку на видео, можно работать с видео разных ресурсов, среди которых есть YouTube, Facebook и другие. Полный список увидите в программе. При наведении на ссылку ресурса появляется подсказка, как должна выглядеть ссылка на видео, которое вы хотите поместить в LightBox, в общем, не ошибетесь. Для вставки видео с YouTube я просто скопировала ссылку в адресной строке браузера.

Если вам нужно вставить несколько видео, то поочередно добавляйте по ссылке и жмите кнопку Add video. Программа закачает все добавленные ссылки к себе.

Добавляем ссылку, переходим на следующую вкладку. В ней создается превью видео, выбрав внешний вид превью, переходим на следующую вкладку – на ней уже выбираем внешний вид самого LightBox. Последняя вкладка Publish.
На этом шаге создаем на своем компьютере папку, возвращаемся в программу и на вкладке Публикация выбираем Опубликовать в папку, а через обзор выбираем ту папку, которую только что создавали на компьютере.

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

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

Открываем папку, в которую сохранили видео. В папке находятся:
  • папка data
  • папка engine
  • файл favicon.ico
  • файл index.html
Открываем папку data и вложенную в нее папку thumbnails, в этой папке сохранены превью видео-роликов, загружаем их в свой альбом на Picasa.
Далее открываем папку engine - images, находящиеся в ней изображения также загружаем на Picasa.

Затем открываем папку css и в ней файл overlay-minimal.css открываем в редакторе (блокноте). Находим строчки вида
  Код:
background-image:url(../images/white.png);

и заменяем адреса картинок на те, которые загрузили на Picasa. Адреса картинок меняем в соответствии с их названием. Сохраняем файл.

Далее файлы
  • в папке css -
    • overlay-minimal.css
    • videolightbox.css
  • и файлы в папке js -
    • jquery.tools.min.js,
    • swfobject.js и
    • videolightbox.js
сохраняем в своем предварительно созданном сайте Google (как создать сайт на гугл).

Открываем файл index.html в редакторе. Меняем все адреса файлов на те, которые вы получили после загрузки на сайт Google, не забываем удалять окончания ссылок, начиная со знака вопроса ?.

Далее, копируем код, который обозначен комментариями (именно в него вы вставляли адреса своих файлов)
  Код:
      <!-- Start VideoLightBox.com HEAD section -->
      <link rel="stylesheet" href="https://sites.google.com/site/seobiblioteka/videolightbox.css" type="text/css" />
      <style type="text/css">#videogallery a#videolb{display:none}</style>
      
         <link rel="stylesheet" type="text/css" href="https://sites.google.com/site/seobiblioteka/overlay-minimal.css"/>
         <script src="https://sites.google.com/site/seobiblioteka/jquery.tools.min.js" type="text/javascript"></script>
         <script src="https://sites.google.com/site/seobiblioteka/swfobject.js" type="text/javascript"></script>
         <!-- make all links with the 'rel' attribute open overlays -->
         <script src="https://sites.google.com/site/seobiblioteka/videolightbox.js" type="text/javascript"></script>
      <!-- End VideoLightBox.com HEAD section -->

Открываем шаблон и вставляем его до закрывающего тега </head>.

Возвращаемся к файлу index.html, в нем будет такой код:
  Код:
<script type="text/javascript">

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("video_overlay");
ytplayer.setVolume(100);
}

</script> 

Я так понимаю, у вас он будет точно такой же, как и у меня. Этот код вставляем в гаджет html/javascript или непосредственно в шаблон блога, например перед закрывающим тегом </body>.

На этом блог готов к тому, чтобы в нем можно было публиковать любые видео с YouTube. Переходим к публикации.

Публикация видео в блоге.

В файле index.html остался код, который отвечает непосредственно за видео в сообщениях блога. Возвращаемся к этому файлу.
Находим такой код:
  Код:
<div id="videogallery">
   <a rel="#voverlay" href="http://www.youtube.com/v/CSdGB_r6ZkQ?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="Маша и Медведь - Первая встреча"><img src="data/thumbnails/0.png" alt="Маша и Медведь - Первая встреча" /><span></span></a>
<a id="videolb" href="http://videolightbox.com">Lightbox Video Player by VideoLightBox.com v1.11</a>
   </div>

Объем кода зависит от общего количества видео роликов. В этом коде нам нужно поменять адрес картинки превью видео
  Код:
<img src="data/thumbnails/0.png" alt="Маша и Медведь - Первая встреча" />

на адрес, который мы получили после загрузки превью на Picasa.

Далее можно удалить из этого кода ссылку на разработчиков программы (в любом случае авторство будет на самом лайтбоксе):
  Код:
<a id="videolb" href="http://videolightbox.com">Lightbox Video Player by VideoLightBox.com v1.11</a>


Отредактированный код размещаем непосредственно в статье в том месте, где должен быть видео-ролик. Публикуем. Наслаждаемся просмотром.

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

Идем в папку data и вложенную в нее папку thumbnails - загружаем превью нового видео в альбом на Picasa.
Открываем файл index.html в редакторе, заменяем адрес превью, удаляем ненужную ссылку и полученный код вставляем в сообщение блога.
Все!

Надеюсь, вам понравится :curtsey:
<<

Иван

Аватара пользователя

Сообщения: 184

Зарегистрирован: 12 апр 2011, 08:51

Благодарил (а): 44 раз.
Поблагодарили: 11 раз.

Сообщение 28 апр 2011, 13:44

Re: Видео в LightBox для блога на Blogger/Blogspot

Классная штука!
Не забывайте говорить спасибо!

Вернуться в Скрипты для Blogger

Кто сейчас на конференции

Зарегистрированные пользователи: Google [Bot], Yandex [Bot]

Работает на phpBB © 2000, 2002, 2005, 2007 phpBB Group. Дизайн ST Software и Blogger Форум. Русская поддержка phpBB
ЧПУ ссылки от phpbb seo