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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі