Як створити відео галерею для сайту. Як створити свій сайт відео

15

Від автора: у цьому уроці ми реалізуємо відео галерею для сайту. Даний урок розбитий на 2 частини: у першій частині ми отримуємо флеш-плеєр і публікуємо його на сторінці сайту, в другій частини за допомогою бібліотеки jQuery і плагіна fancybox вже безпосередньо створюємо відео галерею.

Важливо! Галерея працює тільки на сервері, для перегляду мого варіанта (якщо ви використовуєте Денвер) просто скопіюйте папку video з усім вмістом в корінь localhost/www і перейдіть за адресою http://localhost/video/

Для вивчення даного уроку рекомендую завантажити відео-версію.

Також завантажте вихідні коди собі на комп’ютер.

Отже, приступимо до уроку, з якого ви дізнаєтеся, як створити свій відео на сайті.

Частина 1

Нам знадобиться флеш плеєр, який може програвати відео на сайті. При наявності певних знань про Flash та ActionScript можна створити такий плеєр з нуля. А можна скористатися сервісами, які надають вже готовий плеєр. Ми скористаємося сервісом Uppod (http://uppod.ru/). Цей сервіс надає багатофункціональний плеєр з більш ніж 100 налаштуваннями і можливостями, що підтримує безліч форматів відео, крім того, створити його досить просто, швидко і, головне, безкоштовно (є платний аккаунт, надає ряд додаткових опцій… але опцій безкоштовного аккаунта, на мій погляд, більш ніж достатньо).

Насамперед, необхідно пройти процес реєстрації. Після чого ми логинимся і потрапляємо в особистий кабінет.

Як створити відео галерею для сайту. Як створити свій сайт відео

За посиланням зліва «Завантажити плеєр» качаємо поточну версію плеєра. За посиланням нижче — «Налаштування» — задаємо параметри шляхів, а саме: шлях до плеєра, шлях до папки зі стилями та шлях до папки з плей-листами (останнє нам, в принципі, не знадобиться, оскільки наше завдання не один плеєр з плей листом, а відео галерея). Слід відзначити, що плеєр за замовчуванням працює тільки на сервері (можна вільно тестувати на локальному сервері, наприклад, пакет Денвер), а тому посилання повинні бути абсолютними, тобто, виду http://… . Надалі ми завжди можемо змінити дані посилання в особистому кабінеті, або безпосередньо в коді публікації плеєра на сайті.

Після завдання налаштувань плеєра, повертаємося на головну сторінку особистого кабінету (посилання «Мій плеєр») і переходимо до створення файлу стилів нашого плеєра. Для цього вибираємо пункт «Відео — Стилі». Після цього натискаємо на знак «+ » і додаємо новий стиль. Я назву свій стиль за розмірами роликів, які я туди додам — 599_500, ви можете назвати його як завгодно, і в подальшому таких стилів у вас може бути не один.

Як створити відео галерею для сайту. Як створити свій сайт відео

Після створення нового стилю ініціалізується сторінка плеєра з налаштуваннями за замовчуванням. Зліва розташована панель налаштувань (з вкладки «Вид», «Панель», «Кнопки», «Опції», «Плейлист», «Логотип» та «Модулі»), а в правій частині знаходиться плеєр, в якому можна відразу ж подивитися зміна налаштувань, тобто, редагування стилів відбувається «на льоту».

Як створити відео галерею для сайту. Як створити свій сайт відео

Я по мінімуму зміню налаштування плеєра, ви можете змінювати налаштування по вашому смаку і під потреби вашого сайту.

Пам’ятайте, що в будь-який момент можна провести нові зміни. Отже, у вкладці «Вид» я зміню розміри екрану на потрібні мені — 599*500, а у вкладці «Параметри» в розділі «Завантаження» виберемо опцію «Чекати активності».

З розмірами зрозуміло — це дозвіл мого відео (хоча в плеєрі з екраном 599*500 потім можна програвати відео і іншого дозволу, але для прийнятної якості бажано, щоб дозвіл відео і розміри екрану не дуже різнилися).

Що стосується опції «Завантаження», то бажано вказувати «Чекати активності» з однієї простої причини — напевно, жодному користувачеві не сподобається, коли безконтрольно витрачається його трафік, тому не варто завантажувати відео, поки користувач сам того не побажає.

Після задання стилю для нашого плеєра тиснемо кнопку «Зберегти» (над плеєром) і, після успішного збереження, тиснемо там же кнопку «Завантажити стилі» і зберігаємо файл стилів в папку, яку ми визначили у налаштуваннях плеєра (я зберігаю в одній папці з плеєром). Потім повертаємося на попередню сторінку для цього тиснемо кнопку плеєр.

Як створити відео галерею для сайту. Як створити свій сайт відео

Далі нам необхідно додати 1 файл відео. Для цього вибираємо пункт меню Файли і додаємо файл відео — вказуємо назву ролика, шлях до нього і вибираємо наш стиль, створений для нього.

Як створити відео галерею для сайту. Як створити свій сайт відео

Тиснемо «Ок» і бачимо, що ролик доданий. Натискаємо на нього і в меню вибираємо пункт код для отримання коду публікації плеєра з відео. Нам пропонується вибір з кількох варіантів публікації: класичний HTML і відносно новий на JavaScript (через скрипт SWFObject). Я виберу класичний спосіб, оскільки в нашому випадку він більш наочний.

Як створити відео галерею для сайту. Як створити свій сайт відео

Отже, копіюємо код HTML з повною підтримкою IE і вставляємо його на сторінку у потрібному нам місці:

Якщо все зроблено правильно і не наплутано з шляхами, то на сторінці з’явиться плеєр і по кліку на кнопку відтворення почне програватися наш відео файл. Розберемо трохи зміст коду на моєму прикладі (нагадую, всі шляхи повинні бути абсолютними):

Тут прописаний шлях до плеєра uppod.swf

Тут вказано шлях до файлу стилів video10-1509.txt і до ролика 3_599-500.flv

На цьому перша частина уроку закінчена, і ми можемо сміливо приступити до другої частини, в якій ми реалізуємо нашу мету — створення відео галереї.

Частина 2

Качаємо скрипти

Перше, що нам необхідно зробити — це завантажити з офсайта бібліотеку jQuery і плагін fancybox з необхідними стилями і картинками (все це додається в исходниках). jQuery качаємо за адресою http://jquery.com/ , fancybox — http://fancybox.net/.

Підключення скриптів

Далі підключаємо між тегами head скрипти і стилі. У мене вони знаходяться в каталозі fancybox:

Викликаємо fancybox

Після цього необхідно викликати fancybox і вказати об’єкти, на які ми його повісимо, тобто, ті об’єкти, з якими буде працювати потрібна нам функція. Робиться це, знову — таки, між тегами head:

$(document).ready(function() {
$(«a.video»).fancybox({
});
});

Даним кодом ми вказуємо, що fancybox буде обробляти посилання (тег a) з класом video (a.video).

Створюємо перший файл відео галереї.

Далі ми трохи допишемо код публікації плеєра:

Як створити відео галерею для сайту. Як створити свій сайт відео

Що ми зробили?

По-перше, уклали код плеєра в блок:

У цього блоку ми вказали ідентифікатор video1 (так як таких відео буде не одне) і прописали стилі, якими вказали ширину і висоту трохи більші (пікселів на 5 — вони підуть на бордюр модального вікна), ніж розміри плеєра, а також, за допомогою властивості overflow: auto ми вказали, що якщо вміст блоку більше, ніж розміри самого блоку, то з’являться смуги прокручування.

По-друге, отриманий блок з кодом ми уклали ще в один блок:

Блок приховує все своє вміст за допомогою властивості display:none

По-третє, ми прописали код з картинки і зробили її посиланням на блок з ідентифікатором video1:

Тепер можна оновити нашу сторінку і, якщо ми все зробили правильно, то при натисканні на превью має спливати модальне вікно, в якому знаходиться плеєр і по кліку на кнопку відтворення почне програватися наш відео файл.

Як створити відео галерею для сайту. Як створити свій сайт відео

Для додавання другого (і кожного наступного) відео у відео нашу галерею достатньо скопіювати весь отриманий код першого відео, вставити його в потрібному місці після першого відео і змінити у другого відео ідентифікатор і ім’я відтвореного файлу:

Як створити відео галерею для сайту. Як створити свій сайт відео

Як створити відео галерею для сайту. Як створити свій сайт відео

У підсумку отримуємо 2 превью, при кліці на кожен з яких спливає модальне вікно зі своїм відео.

Як створити відео галерею для сайту. Як створити свій сайт відео

Модального вікна налаштування

За бажанням ми можемо змінити налаштування модальних вікон — їх опис можна подивитися за посиланням http://fancybox.net/api

Я зміню спосіб появи і зникнення вікна, а також їх швидкість. Робиться це в функції fancybox:

$(document).ready(function(){
$(«a.video»).fancybox({
‘transitionIn’ :’elastic’,
‘transitionOut’ :’elastic’,
‘speedIn’ :1000,
‘speedOut’ :1000
});
});

На цьому урок закінчений.

Сподіваюся, він був корисний вам.

Для тих, хто не зовсім зрозумів як це реалізувати на практиці, настійно рекомендуємо переглянути відео-урок:

Пишіть зауваження і побажання в коментарях.

Як створити відео галерею для сайту. Як створити свій сайт відео

E-mail: [email protected]

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.