От автора: в этом уроке мы реализуем видео галерею для сайта. Данный урок разбит на 2 части: в первой части мы получаем флеш-плеер и публикуем его на странице сайта, во второй части при помощи библиотеки jQuery и плагина fancybox уже непосредственно создаем видео галерею.
Важно! Галерея работает только на сервере, для просмотра моего варианта (если вы используете Денвер) просто скопируйте папку video со всем содержимым в корень localhost/www и перейдите по адресу //localhost/video/
Для изучения данного урока рекомендую скачать видео-версию.
Также скачайте исходники себе на компьютер.
Итак, приступим к уроку, из которого вы узнаете, как создать свой видео сайт.
Часть 1
Нам понадобится флеш плеер, который может проигрывать видео на сайте. При наличии определенных знаний во Flash и ActionScript можно создать такой плеер с нуля. А можно воспользоваться сервисами, предоставляющими уже готовый плеер. Мы воспользуемся сервисом Uppod (//uppod.ru/). Этот сервис предоставляет многофункциональный плеер с более чем 100 настройками и опциями, поддерживающего множество форматов видео, кроме того, создать его довольно просто, быстро и, главное, бесплатно (есть платный аккаунт, предоставляющий ряд дополнительных опций… но опций бесплатного аккаунта, на мой взгляд, — более чем достаточно).
Прежде всего, необходимо пройти процесс регистрации. После чего мы логинимся и попадаем в личный кабинет.
По ссылке слева "Скачать плеер" качаем текущую версию плеера. По ссылке ниже — "Настройки" — задаем настройки путей, а именно: путь к плееру, путь к папке со стилями и путь к папке с плей листами (последнее нам, в принципе, не понадобится, поскольку наша задача не один плеер с плей листом, а видео галерея). Следует отметить, что плеер по умолчанию работает только на сервере (можно свободно тестировать на локальном сервере, например, пакет Денвер), а потому ссылки должны быть абсолютными, т.е., вида //… . В дальнейшем мы всегда можем изменить данные ссылки либо в личном кабинете, либо непосредственно в коде публикации плеера на сайте.
После задания настроек плеера, возвращаемся на главную страницу личного кабинета (ссылка "Мой плеер") и переходим к созданию файла стилей нашего плеера. Для этого выбираем ссылку "Видео — Стили". После этого кликаем на знак "+ " и добавляем новый стиль. Я назову свой стиль по размерам роликов, которые я туда добавлю — 599_500, вы можете назвать его как угодно, и в дальнейшем таких стилей у вас может быть не один.
После создания нового стиля инициализируется страница плеера с настройками по умолчанию. В левой части страницы расположена панель настроек (с вкладками "Вид", "Панель", "Кнопки", "Опции", "Плейлист", "Логотип" и "Модули"), а в правой части находится плеер, в котором можно сразу же посмотреть изменение настроек, т.е., редактирование стилей происходит «на лету».
Я по минимуму изменю настройки плеера, вы можете менять настройки по вашему вкусу и под нужды вашего сайта.
Помните, что в любой момент можно произвести новые изменения. Итак, во вкладке "Вид" я изменю размеры экрана на нужные мне — 599*500, а во вкладке "Опции" в списке "Загрузка" выберем опцию "Ждать активности".
С размерами понятно — это разрешение моего видео (хотя в плеере с экраном 599*500 затем можно проигрывать видео и другого разрешения, но для приемлемого качества желательно, чтобы разрешение видео и размеры экрана не очень отличались).
Что касается опции "Загрузки", то желательно указывать "Ждать активности" по одной простой причине — наверное, ни одному пользователю не понравится, когда бесконтрольно расходуется его трафик, поэтому не стоит загружать видео, пока пользователь сам того не пожелает.
После задания стилей для нашего плеера жмем кнопку "Сохранить" (над плеером) и, после успешного сохранения, жмем там же кнопку "Скачать стили" и сохраняем файл стилей в папку, которую мы определили в настройках плеера (я сохраняю в одной папке с плеером). Затем возвращаемся на предыдущую страницу — для этого жмем кнопку плеер.
Далее нам необходимо добавить 1 файл видео. Для этого выбираем пункт меню Файлы и добавляем файл видео — указываем название ролика, путь к нему и выбираем наш созданный стиль для него.
Жмем "Ок" и видим, что ролик добавлен. Кликаем на него и в появившемся меню выбираем пункт код для получения кода публикации плеера с видео. Нам предлагается выбор из нескольких вариантов публикации: классический HTML и относительно новый на JavaScript (через скрипт SWFObject). Я выберу классический способ, поскольку в нашем случае он более нагляден.
Итак, копируем код HTML с полной поддержкой IE и вставляем его на страницу в нужном нам месте:
|
1 2 |
<object id="videoplayer18112" width="599" height="500"><param name="allowFullScreen" value="true" /> <param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /> <param name="movie" value="//localhost/video/uppod.swf" /><param name="flashvars" value="comment=Video1&st=//localhost/video/video10-1509.txt&file=//localhost/video/files/4_599-500.flv" /><embed src="//localhost/video/uppod.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" flashvars="comment=Video1&st=//localhost/video/video10-1509.txt&file=//localhost/video/files/4_599-500.flv" width="599" height="500"></embed></object> |
Если все сделано правильно и не напутано с путями, то на странице появится плеер и по клику на кнопку воспроизведения начнет проигрываться наш видео файл. Разберем немного содержание кода на моем примере (напоминаю, все пути должны быть абсолютными):
|
1 |
<param name="movie" value="//localhost/video/uppod.swf" /> |
Здесь прописан путь к плееру uppod.swf
|
1 |
<param name="flashvars" value="comment=Video1&st=//localhost/video/video10-1509.txt&file=//localhost/video/files/3_599-500.flv" /> |
Здесь указан путь к файлу стилей video10-1509.txt и к ролику 3_599-500.flv
На этом первая часть урока окончена, и мы можем смело приступить ко второй части, в которой мы реализуем нашу задачу — создание видео галереи.
Часть 2
Качаем скрипты
Первое, что нам необходимо сделать — это скачать с офсайта библиотеку jQuery и плагин fancybox с необходимыми стилями и картинками (все это прилагается в исходниках). jQuery качаем по адресу //jquery.com/ , fancybox — //fancybox.net/.
Подключение скриптов
Далее подключаем между тегами head скрипты и стили. У меня они находятся в каталоге fancybox:
|
1 2 3 4 |
<script type="text/javascript" src="fancybox/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" /> |
Вызываем fancybox
После этого необходимо вызвать fancybox и указать объекты, на которые мы его повесим, т.е., те объекты, с которыми будет работать нужная нам функция. Делается это, опять- таки, между тегами head:
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function() { $("a.video").fancybox({ }); }); </script> |
Данным кодом мы указываем, что fancybox будет обрабатывать ссылки (тег a) с классом video (a.video).
Создаем первый файл видео галереи.
Далее мы немного допишем код публикации плеера:
|
1 2 3 4 5 6 7 |
<!-- Видео 1 --> <a class="video" href="#video1" title=""><img src="files/1.jpg" alt="" width="100" height="75" /></a> <div style="display:none;"> <div id="video1" style="width:605px; height:505px; overflow: auto;"> <object id="videoplayer18112" width="599" height="500"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><param name="movie" value="//localhost/video/uppod.swf" /><param name="flashvars" value="comment=Video1&st=//localhost/video/video10-1509.txt&file=//localhost/video/files/3_599-500.flv" /><embed src="//localhost/video/uppod.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" flashvars="comment=Video1&st=//localhost/video/video10-1509.txt&file=//localhost/video/files/3_599-500.flv" width="599" height="500"></embed></object> </div> </div> |
Что мы сделали?
Во-первых, заключили код плеера в блок:
|
1 |
<div id="video1" style="width:605px; height:505px; overflow: auto;"></div> |
У этого блока мы указали идентификатор video1 (так как таких видео будет не одно) и прописали стили, которыми указали ширину и высоту немного большие (пикселей на 5 — они пойдут на бордюр модального окна), чем размеры плеера, а также, при помощи свойства overflow: auto мы указали, что если содержимое блока больше, чем размеры самого блока, то добавятся полосы прокрутки.
Во-вторых, полученный блок с кодом мы заключили еще в один блок:
|
1 |
<div style="display:none;"></div> |
Блок скрывает все свое содержимое при помощи свойства display:none
В-третьих, мы прописали код картинки и сделали ее ссылкой на блок с идентификатором video1:
|
1 |
<a class="video" href="#video1" title=""> |
Теперь можно обновить нашу страницу и, если мы все сделали правильно, то при клике на превью должно всплывать модальное окно, в котором находится плеер и по клику на кнопку воспроизведения начнет проигрываться наш видео файл.
Для добавления второго (и каждого следующего) видео в нашу видео галерею достаточно скопировать весь получившийся код первого видео, вставить его в нужном месте после первого видео и изменить у второго видео идентификатор и имя воспроизводимого файла:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- Видео 1 --> <a class="video" href="#video1" title=""><img src="files/1.jpg" alt="" width="100" height="75" /></a> <div style="display:none;"> <div id="video1" style="width:605px; height:505px; overflow: auto;"> <object id="videoplayer18112" width="599" height="500"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><param name="movie" value="//localhost/video/uppod.swf" /><param name="flashvars" value="comment=Video1&st=//localhost/video/video10-1509.txt&file=//localhost/video/files/3_599-500.flv" /><embed src="//localhost/video/uppod.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" flashvars="comment=Video1&st=//localhost/video/video10-1509.txt&file=//localhost/video/files/3_599-500.flv" width="599" height="500"></embed></object> </div> </div> <!-- Видео 2 --> <a class="video" href="#video2" title=""><img src="files/2.jpg" alt="" width="100" height="75" /></a> <div style="display:none;"> <div id="video2" style="width:605px; height:505px; overflow: auto;"> <object id="videoplayer18112" width="599" height="500"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><param name="movie" value="//localhost/video/uppod.swf" /><param name="flashvars" value="comment=Video1&st=//localhost/video/video10-1509.txt&file=//localhost/video/files/4_599-500.flv" /><embed src="//localhost/video/uppod.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" flashvars="comment=Video1&st=//localhost/video/video10-1509.txt&file=//localhost/video/files/4_599-500.flv" width="599" height="500"></embed></object> </div> </div> |
В итоге получаем 2 превью, при клике на каждый из которых всплывает модальное окно со своим видео.
Настройки модального окна
По желанию мы можем изменить настройки модальных окон — их описание можно посмотреть по ссылке //fancybox.net/api
Я изменю способ появления и исчезновения окна, а также их скорость. Делается это в функции fancybox:
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> $(document).ready(function(){ $("a.video").fancybox({ 'transitionIn' :'elastic', 'transitionOut' :'elastic', 'speedIn' :1000, 'speedOut' :1000 }); }); </script> |
На этом данный урок закончен.
Надеюсь, он был полезен вам.
Для тех, кто не совсем понял как это реализовать на практике, настоятельно рекомендуем просмотреть видео-урок:
Пишите замечания и пожелания в комментариях.
Автор: Андрей К
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
E-mail: contact@webformyself.com
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Комментарии (92)