Встановлення та налаштування плеєра Flowplayer

11

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

Встановлення та налаштування плеєра Flowplayer

Автор: Віктор Гавриленко

Мене звати Віктор Гавриленко, за освітою я інженер електромеханік. Ще навчаючись в інституті, почав захоплюватися комп’ютерними технологіями та програмуванням, протягом двох років посилено займаюся розробкою інтернет-сайтів та веб-програмуванням. Захоплююсь написанням невеликих скриптів на мові PHP, у зв’язці базами даних MySQL, SQLite, непогано знаю такі движки як WordPress, Drupal, Joomla.

Встановлення та налаштування плеєра FlowplayerВстановлення та налаштування плеєра Flowplayer

Введення

Flowplayer – це безкоштовний відео-плеєр, який призначенні для відтворення відео роликів на веб-сторінках. Переваги Flowplayer:

підтримка різних медіа-форматів — AVI, SWF, MP4, H. 264 video, MP3, JPG, PNG;

повна підтримка html5, що особливо актуально в даний час;

величезна кількість різних налаштувань;

прогресивна закачування, що забезпечує просте і швидке відображення відео на екрані;

потокове відео;

підтримка плейлистів;

повноекранний режим;

Доступний API, за допомогою якого можна керувати плеєром використовуючи javaScript.

Установка плеєра

Отже, насамперед необхідно завантажити плеєр Flowplayer. Для цього перейдемо на офіційний сайт flowplayer.org:

Встановлення та налаштування плеєра Flowplayer

Потім переходимо по посиланню Download:

Встановлення та налаштування плеєра Flowplayer

І, клікаєм Download Zip – тобто, завантажуємо zip-архів з вихідним кодом плеєра. Для сьогоднішнього уроку, ми будемо використовувати тестову сторінку, створену за допомогою html5. Так як у даному уроці ми будемо розглядати установку і налаштування плеєра стосовно до html5. Далі распакуем отриманий архів. В результаті розпакування ми отримаємо наступний набір файлів:

scin – пака містить у собі css файли, що відповідають за зовнішній вигляд плеєра. Вміст даної папки скопіювати в папку css, в якій містяться всі файли css нашого сайту;

embed.min.js – файл, який відповідає за поширення відео в соц мережах. Створюємо в корені сайту папку js, яка буде зберігати всі javaScript файли і копіюємо його в папку;

flowplayer.js – файл, який відповідає за працездатність плеєра. Копіюємо в папку js;

flowplayer.min.js – файл, який відповідає за працездатність плеєра – повна копія предыдущениго. Це стисла копія файлу flowplayer.js. Копіюємо в папку js;

flowplayer.swf флеш плеєр. Для зручності копіюємо в корінь нашого сайту;

index.html – демонстраційний файл, що дозволяє оцінити плеєр Flowplayer даний файл нам не знадобитися;

LECENSE.md – інформація про ліцензії. Даний файл нам не знадобитися;

Тепер завантажити бібліотеку jQuery, яка необхідна для роботи плеєра. Нагадаю, що дана бібліотека, написана на мові javaScript і містить безліч різних методів, за вибіркою, взаємодії та редагування елементів веб-сторінки. А також містить методи створення різних анімаційних ефектів. Отже, переходимо на офіційний сайт цієї бібліотеки jquery.com:

Встановлення та налаштування плеєра Flowplayer

Потім клацаємо по посиланню Download jQuery і потрапляємо на сторінку, вибору версії для скачування. Вибираємо саму актуальну версію і викачуємо бібліотеку. Отриманий файл також зберігаємо в папці js. Далі необхідно підключити відповідні файли. Для цього перейдемо в файл index.html і підключимо потрібні компоненти (або будь-який інший файл, який виводить на екран сторінку, де повинен бути відображений плеєр):

Далі, створимо і підключимо файл script.js, в якому ми будемо писати код на мові javaScript

Тепер давайте подивимося на стилі, які ми отримали при розпакуванні архіву з плеєром (нагадаю, що ми їх скопіювали в папку css). Дивіться, ми з Вами отримали кілька файлів CSS і кожен з них відповідає за певний візуальне оформлення відео плеєра (тема оформлення плеєра, або skin). Виняток становить файл all-skins, який містить в собі всі теми оформлення. Тому, для сьогоднішнього уроку ми з Вами будемо використовувати стиль functional.css:

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

Це, так званий автоматичний спосіб установки плеєра. Тобто ми створюємо звичайний блок div з класом flowplayer, а потім, використовуючи блок video та source, вказуємо відео файл, який необхідно відобразити на екрані. Нагадаю, що у даному уроці ми з Вами розглядаємо установку плеєра використовуючи html5. Якщо оновити сторінку в браузері ми побачимо наступне:

Встановлення та налаштування плеєра Flowplayer

Як Ви бачите, тепер відео плеєр відображається на екрані. Для початку відтворення, потрібно натиснути кнопку Play, розташовану в центрі. Якщо ж Ви хочете встановити плеєр в блок з довільним класом, то необхідно зробити наступне. Створити блок, в який буде поміщений плеєр, наприклад:

Тепер необхідно використовуючи JavaScript встановити плеєр на екран. Для цього відкриємо файл script.js і додамо наступний код:

$(document).ready(function() {
$(«.player»).flowplayer({
swf:»http://localhost/flow/flowplayer.swf»,
playlist: [
[
{
mp4:»http://localhost/flow/file/video1.mp4″
}
]
]
});
});

Тобто, використовуючи бібліотеку jQuery, вибираємо блок з класом player (блок в якому повинен бути відображений плеєр). Далі викликаємо метод flowplayer, який і виведе плеєр на екран. Даним методом передаємо об’єкт з налаштуваннями, а саме:

swf:http://localhost/flow/flowplayer.swf – шлях до флеш плеєра, який ми отримали після розпакування архіву з плеєром;

playlist – джерела відео для відтворення. Тут дуже уважно з синтаксисом.

Створення плейлиста

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

Тому
Вперед

Title 1
Title 2
Title 3

Як Ви бачите для створення плейлиста, потрібно додати кілька блоків source, тим самим поставити кілька джерел відеоматеріалів. Далі, створюємо два блоки span, які будуть виконувати роль посилань — переходу до наступного або попереднього відеоматеріалу. Зверніть увагу, як треба називати класи, даних блоків — це спеціальні імена і вони необхідні для правильної роботи посилання. Клас fp-prev використовується для посилання переходу до попереднього відео ролику, клас — fp-next – для наступного.

Далі створимо блок div, в якому буде розташовуватися плейлист, а саме посилання на такі елементи плейлиста. Ім’я класу цього блоку, має бути fp-playlist, знову ж таки, для правильної роботи плейлиста. Тепер можна перевіряти працездатність плеєра і плейлиста, але необхідно налаштувати відображення посилань, управління плейлістом.

Так як всі посилання для управління плейлістом — це звичайні блоки div, значить ми можемо оформити їх відповідним чином, використовуючи звичайні правила CSS, що власне ми і зробимо (в цьому і полягає дуже важлива перевага плеєра flowplayer):

.fp-prev, .fp-next {
position: absolute;
cursor: pointer;
height: 40px;
width: 40px;
top:44%;
text-indent: -99999px;
}
.fp-prev {
left:-45px;
background-image: url(«img/play_white_rtl.png»);
background-size: 40px 40px;
}
.fp-next {
right: -45px;
background-image: url(«img/play_white.png»);
background-size: 40px 40px;
}
.fp-playlist {
position: absolute;
bottom: -80px;
left: 0px;
text-align: center;
width: 100%
}
.fp-playlist a {
border:4px solid white;
border-radius:5px;
display: inline-block;
height: 50px;
width: 50px;
margin: 0px 10px;
}

В плейлисті для кожної ссилки, можна за допомогою CSS додати на фон будь-яке зображення, в даному уроці я цього робити не буду, так як Ви цілком зможете це зробити самі. Тепер давайте подивимося, на зміни в плеєрі:

Встановлення та налаштування плеєра Flowplayer

Як Ви бачите, тепер ми можемо переглядати декілька відеороликів – по черзі, і переміщатися по позиціях плейлиста, використовуючи посилання управління. Якщо ж Ви встановили плеєр вручну, то для створення плейлиста, досить додати в налаштування playlist, ще кілька джерел на відео. Ось таким чином. Html – код:

Тому
Вперед

Як Ви бачите в цьому випадку достатньо створити блок, в якому буде виведений плеєр, і додати в нього посилання для переходу до наступного або попереднього відео (в нашому випадку це блоки span). Код javascript:

$(«.player»).flowplayer({
swf:»http://localhost/flow/flowplayer.swf»
playlist: [
[
{
mp4:»http://localhost/flow/file/video1.mp4″
}
],
[
{
mp4:»http://localhost/flow/file/video2.mp4″
}
],
[
{
mp4:»http://localhost/flow/file/video.mp4″
}
]
]
});

Як Ви бачите, нічого нового немає, просто додаємо додаткові джерела відео. Посилання в плейлисті отримують клас .is-active, якщо відео на яку вони посилаються або вибрано відображається в плеєрі. А це дуже корисно, якщо Вам потрібно відзначати відео, яке відображається

Висновок субтитрів

Flowplayer – також підтримує висновок субтитрів на екран. Нагадаю, що субтитри – це текстові рядки які виводяться, як правило, в нижній центральній частині плеєра. Для виведення субтитрів необхідно додати наступний код (між тегами video).

Тегу track – необхідно додати атрибут src, з зазначенням шляху до спеціального фалу з субтитрами. Даний файл описує коли і яку рядок необхідно виводити на екран. Тепер давайте розглянемо формат цього файла (файл, я зберіг у папці file):

WEBVTT FILE
1
00:00:01.000 —> 00:00:04.000
Це субтитр
1
00:00:05.000 —> 00:00:10.000
NEXT

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

Встановлення та налаштування плеєра Flowplayer

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

Налаштування плеєра

Налаштування плеєра Flowplayer здійснюється, в основному, шляхом додавання певних класів CSS до блоку в якому відображається плеєр. Тобто до блоку з класом flowplayer. Насамперед, давайте визначимося, як задати розмір відображуваного на екрані плеєра. Для цього, достатньо вказати ширину і висоту, за допомогою правил CSS для блоку з класом flowplayer:

.flowplayer {
background-image: url(«../file/fon.jpg»);
width:640px !important;
margin: 10px auto !important;
display: block !important;
}

А також можна додати зображення в якості фону плеєра, яке буде відображатися перед початком відтворення ролика, і різні правила для позиціонування плеєра в центрі екрану. Для вказівки параметрів співвідношення сторін, необхідно додати атрибут data-ratio, до блоку з класом flowplayer. Значення даного атрибуту і буде вказувати співвідношення сторін для плеєра. Наприклад: Співвідношення сторін 3/4

Співвідношення сторін 9/16

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

fixed-controls — панель управління плеєром, займає фіксоване положення на екрані;

aside-time – час, винесено з панелі управління і розташоване у верхньому лівому куті;

no-background – відключення фону в панелі управління;

no-mute – приховати панель керування гучністю;

no-time – приховати відображення шкали часу;

no-volume – приховати повзунка для керування гучністю

play-button — відображення кнопки PLAY/STOP.

Давайте трохи змінимо налаштування нашого плеєра:

Тому
Вперед

Titile 1
Title 2
Title 3

І додамо прозорості в панель керування плеєром, для цього додамо такі стилі в файл style.css:

.fp-controls {
opacity:0.5 !important;
}

Встановлення та налаштування плеєра Flowplayer

Ось таким ось чином, можна змінювати зовнішній вигляд плеєра, використовуючи звичайний CSS. Так само, у плеєра Flowplayer є ще й класи станів. Класи станів це класи, які додаються плеєра, при певному його стані. Наприклад, режим паузи відтворення, початок і зупинка відео. Ось кілька класів стану:

is-fullscreen – при повноекранному режим е відтворення;

is-help – при відображенні довідки;

is-loading — при завантаженні відеоролика

is-muted — якщо звук плеєра відключений

is-paused –якщо включений режим паузи відтворення;

is-playing – при відтворенні авто;

is-ready – коли плеєр повністю завантажений;

Приміром, якщо в стилі додати наступний код:

.is-playing {
border:2px solid green
}

На екрані ми побачимо наступне:

Встановлення та налаштування плеєра Flowplayer

Тобто при відтворенні, до блоку div з класом flowplayer додається клас is-playing і ми бачимо, зелену рамку. Ось і все що я хотів розглянути в даному уроці. Звичайно, ще є безліч різних параметрів і налаштувань, які ми з Вами розглянули, але ми вивчили і їх цілком достатньо для використання даного плеєра. Якщо Ви хочете вивчити даний плеєр більш детально, то на сторінці http://flowplayer.org/docs/setup.html, міститься повна офіційна документація по Flowplayer.

Всього доброго, вдалого кодування! І побачимося в наступних уроках!