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
-- 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
Комментариев нет:
Отправить комментарий