Jqvideobox - скрипт для роликов и фильмов online

Скрипт для роликов и фильмов

Jqvideobox - это крутой лёгкий и всеядный видеоплеер-лайтбокс для сайта или блога.
Устанавливается очень быстро и работает практически на любом движке, включая Blogger/Blogspot.

Перечень поддерживаемых видеохостингов впечатляет:
-- youtube.com
-- www.metacafe.com
-- video.google.com
-- www.dailymotion.com
-- rutube.ru
-- video.mail.ru
-- www.revver.com
-- www.veoh.com
-- vimeo.com
-- smotri.com
-- vkontakte.ru
-- video.qip.ru

Решили сделать сайт с фильмами online? Тогда этот плагин для вас. Однозначный его плюс - работа в модальном окне (всплывающее окно и затемнённый фон сайта). Режим плеера "полный экран" тоже поддерживается.

Демо:

Ролик Youtube:
Youtube

Ролик Вконтакте:
Vkontakte.ru video

Установка:
1) Библиотека jQuery обязательна.
2) Идём на GitHub страничку проекта и качаем zip-архив, в котором находятся скрипты, стили, катринки элементов навигации и даж олик экспресс-установки.
Скрипты и стили с картинками нужно залить на свой платный или бесплатный хостинг и прописать в головную часть шаблона (Blogger) <head></head> или файл, отвечающий за неё (Wordpress и др.) ссылки:
<link rel="stylesheet" href="http://хостинг/jqvideobox/css/jqvideobox.css" type="text/css" />
<script type="text/javascript" src="http://хостинг/jqvideobox/swfobject.js" charset="utf-8"></script>
<script type="text/javascript" src="http://хостинг/jqvideobox/jqvideobox.min.js" charset="utf-8"></script>
Обратите внимание на пути в ссылках. Дело в том, что css файл содержит относительные ссылки на картинки (аниммированный gif ожидания, кнопка закрыть, стрелки назад/вперёд), поэтому на хостинге я создал папку jqvideobox, куда скопировал все скрипты, а стили и картики положил в подпапку css.
Если хотите русифицировать надписи на кнопках, например, next или close, воспользуйтесь любым графическим редактором, к примеру, Gimp'ом.

3) Скрипт настроек. Копируется тоже перед </head>.
<script>
$(document).ready(function() {
$(".vidbox").jqvideobox({'width' : 400, 'height': 300, 'getimage': true, 'navigation': false});
}
);
</script>
В нём:
.vidbox - класс, который будет привязан к каждой ссылке на видеоролик
width - ширина плеера
height - высота плеера
getimage - картинка предпросмотра (thumbnail), которую генерирует здесь сервис www.thumbl.in
navigation - графические стрелки "назад" и "вперёд", используются для перемещения внутри группы файлов
animateCaption - включение/выключение анимации при захвате плеера в модальное окно

Подробнее про настройки можно почитать здесь (на странице разработчика).

4) Ссылка на видеоролик будет такого плана:
<a title="Название ролика" class="vidbox" href="http:/ссылка на ролик">I love Youtube</a>
Важный момент: присутствие класса (class="vidbox"), который мы определили в "настроечном" скрипте. Настроечных скриптов может быть сколько угодно (для разных групп роликов), но у каждого должен быть уникальный класс.

Как правильно оформлять ссылки?
Смотрим на скриншот (кликабелен) ↓


На котором выложены образцы оформления ссылок для всех, перечисленных выше, видеохостингов (от youtube до video.qip.ru).
Например, для фильма или ролика из vkontakte.ru нужно в обычной ссылке, в конце, поставить знак вопроса и добавить хвостик с hash, который можно получить, кликнув в самом контакте на активном ролике правой клавишей мыши и выбрав "копировать URL видео" ↓


Для Youtube тоже похожая процедура, только наоборот: нужно отрезать лишнюю часть ссылки (если она есть) ↓


Что ещё интересного?
Плеер с плейлистом с помощью jQuery Youtube Player

Комментариев нет:

Отправка комментария