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

17

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

У даному уроці ми з Вами будемо говорити про один з найбільш популярних та найбільш зручних відеоплеєрів під назвою jwplayer.

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

1. Введення

Даний плеєр володіє дуже хорошим функціоналом, підтримує такі відео формати flv, mp4, аудіо mp3, aac, також можливе програвання роликів з каналу youtube. Підтримується усіма відомими браузерами, такими як Chrome, Firefox, IE, Opera, Safari, мобільний операційною системою Android, і такими пристроями як iPhone / iPad.

Короткі характеристики:

Технології FLASH і HTML5, тобто плеєр легко відображається на всіх пристроях.

Зручний і доступний JavaScript API

Підтримка потокового відео протоколу RTMP і HTTP псевдо-потоку.

Можливість завантаження скінів (тільки для платної версії).

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

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

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

Тепер давайте встановимо даний плеєр.

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

Насамперед необхідно завантажити плеєр. Для цього переходимо на офіційний сайт розробника, за адресою: http://www.longtailvideo.com/.

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

Далі переходимо за посиланням Get JW Player — відкрилася сторінка скачування плеєра.

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

Вводите адресу своєї поштової скриньки у полі e-mail і клацає по посиланню FREE DOWNLOAD для скачування. Зверніть увагу, що даний плеєр поставляється в двох версіях: платною і безкоштовною. Безкоштовна версія має, звичайно, обмеженим функціоналом, але його цілком достатньо для нормального відображення відео і повноцінної налаштування під Ваші потреби. Приміром, в платній версії є можливість вибору, різних скінів (зовнішній вигляд плеєра), також шарінг в соціальних мережах (посилання поділитися цим відео) і т. д.

В результаті скачування ми отримуємо архів: jwplayer-3242.zip. Давайте його распакуем в папку js тестового сайту. В результаті в даній папці ми отримали наступні файли:

jwplayer.flash.swf

jwplayer.html5.js

jwplayer.js

Далі необхідно підключити файл jwplayer.js до нашого тестового сайту. Для цього відкриваємо файл index.php і пишемо наступний код (між тегами head):

Після цього необхідно створити блок, в якому буде виведений плеєр, тому створимо блок div id player:

For player

Рядок For player при завантаженні плеєра показана не буде. Далі, використовуючи javascript необхідно прописати код, який буде виводити плеєр у створеному блоці. Для цього можна створити окремий файл і все кодування вести в ньому, або писати в цьому ж файлі, відкривши теги script. Але мені зручніше використовувати окремий файл, тому давайте створимо порожній файл під назвою script.js і відразу ж його підключимо. Тільки цей файл необхідно підключати після того як Ви створили блок, для відображення плеєра. Тому підключаємо файл:

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

3. Відтворення відео.

Отже, давайте виведемо плеєр у зазначеному блоці, для цього відкриваємо файл script.js і пишемо наступний код:

jwplayer(«player»).setup({
file:»files/video.mp4,
image:»files/pic.jpg»
});

Зверніть увагу, що викликається метод jwplayer() – цей метод входить до складу файлу jwplayer.js і є основним при відображенні плеєра. Тобто викликаючи даний метод ми передаємо йому параметром ідентифікатор того блоку, в якому він повинен бути відображений на екрані. У нашому випадку це блок div id player. Потім викликаємо метод setup – який визначає всі основні параметри плеєра:

file – шлях до файлу, який повинен бути відтворений в плеєрі. У нашому випадку це відео в форматі mp4 і файл video.mp4.

image – шлях до зображення, яке буде показане до початку відтворення відео або музики або відео каналу youtube).

Тепер давайте збережемо зміни і подивимося, що відображається на екрані браузера.

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

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

file:»files/1.mp3″

Якщо необхідно переглянути відео-ролик з каналу youtube, для цього посилання на цей ролик також вказуєте в параметрі file:

file:» http://www.youtube.com/watch?v=eLJ_O5Ekxqw»

Погодьтеся все дуже просто. Тепер давайте поговоримо про налаштування даного плеєра.

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

Насамперед давайте налаштуємо розміри даного плеєра. Для цього необхідно вказати два параметри width і height:

jwplayer(«player»).setup({
file:»files/1.mp3″
image:»files/pic.jpg»,
width:»640″,
height:»480″
});

Думаю, що Ви вже здогадалися, що width це ширина, а height – висота. Розмірність – пікселі. Тепер давайте подивимося, що у нас вийшло:

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

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

jwplayer(«player»).setup({
file:»files/1.mp3″
image:»files/pic.jpg»,
width:»640″,
height:»480″,
controls:true,
autostart:false,
mute:false,
stretching:»uniform»,
title:»hello world»,
});

Давайте по-порядку розглянемо кожен параметр:

controls:true – відповідає за відображення панелі управління плеєра. Якщо буде встановлено значення false, то панель управління відображатися не буде. За замовчуванням – true;

autostart:false – якщо встановити значення true, то відтворення даного ролика почнеться відразу ж поле завантаження сторінки з плеєром. За замовчуванням – false;

mute:false – якщо встановити значення true, то при відтворенні буде вимкнено звук (звичайно, використовуючи панель керування плеєром го можна включити). За замовчуванням – false;

stretching:»uniform» – масштабування відео у вікні плеєра. Має наступні значення: none – реальний розмір відео; exactfit – відео бут розтягнуто за величиною вікна плеєра (не пропорційно), при цьому може спостерігатися втрата якості, тобто, відео може бути витягнутим, або розтягнутим; uniform – масштабування пропорційно, що б відео помістилося у вікно плеєра; fill – пропорційне масштабування відео до розмірів екрану, але якщо через формату відео, воно не буде поміщатися в вікно плеєра, зайві частини будуть обрізані. За замовчуванням – uniform;

title:»hello world» – заголовок відео ролика.

Давайте збережемо зміни і подивимося, що у нас вийшло:

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

Якщо встановити значення висоти плеєра, що дорівнює 40 пікселів, то на екрані ми побачимо ось такий плеєр:

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

На мій погляд, дуже зручно використовувати при відтворенні музичних файлів.

5. Робота з playlist.

Playlist – це заздалегідь визначений список файлів, які повинні бути відтворені в плеєрі. Плеєр jwplayer також підтримує плейлисти, тому давайте навчимося з ними працювати, і додамо кілька файлів до відтворення. Для цього пишемо наступний код:

jwplayer(«player»).setup({
width:»640″,
height:»480″,
listbar: {
position:’bottom’,//right
size:150
},
playlist: [
{
file:»files/video.mp4,
title:»hello world»,
image:»files/pic.jpg»,
description:»dsf sdjfhv sdjfhsdj fhsd vsdfj»,
},
{
file:»files/video1.mp4,
title:»Second video»,
image:»files/pic1.jpg»
},
{
file:»files/video2.mp4,
title:» next video»,
image:»files/pic2.jpg»
},
{
file:»files/1.mp3″
title:»Music»,
image:»files/pic1.jpg»
}
]
});

Зверніть увагу, що за відображення плейлиста відповідає параметр playlist, у якого так само є свої параметри. Тут будьте дуже уважні з синтаксисом. Дивіться код параметра playlist виділено квадратними дужками, а кожен новий файл плейлиста відділений фігурними дужками (позиції плейлиста). Тепер про параметри playlist:

file – шлях до файлу, для відтворення;

image – зображення, яке виводиться перед вказаним файлом;

title – заголовок файлу;

description – короткий опис файлу, що програється.

Тепер для того, що б показати сам плейлист (список файлів), необхідно також вказувати параметр listbar, у якого також є дві установки:

position:’bottom’ – позиція відображення плейлиста. В даному випадку внизу, також є можливість розташувати даний блок праворуч. Для цього необхідно вказати значення right;

size:150 – розмір блоку в пікселях.

Тепер давайте подивимося в браузері, що у нас вийшло:

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

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

jwplayer(«player»).setup({
width:»640″,
height:»480″,
listbar: {
position:’bottom’,//right
size:150
},
playlist: [
{
title:»Sources»,
image:»files/pic2.jpg»,
description:»dsf sdjfhv sdjfhsdj fhsd vsdfj»,
джерела : [
{
file:»files/video.mp4,
label:»360p»,
title:»hello world»,
image:»files/pic.jpg»,
},
{
file:»files/video1.mp4,
label:»780p»,
title:»second video»,
image:»files/pic2.jpg»,
default:true
}
]
}
]
});

Як Ви бачите, використовується все той же параметр playlist, але тепер він має лише одну секцію (як би всього одна позиція в списку відтворення). Описуємо вже знайомі нам параметри title, image, description, але замість параметра file, пишемо параметр sources. Даний параметр визначає джерела одного і того ж відео файлу і як Ви бачите в ньому також є свої налаштування:

file – шлях до файлу для відтворення;

label – заголовок, який буде відображений у спеціальному меню вибору джерел відео;

title – заголовок;

image – зображення, яке показано перед відтворенням;

default – якщо встановлено значення true, значить, даний джерело показується за замовчуванням

Тепер давайте перейдемо в браузер і подивимося, що у нас вийшло:

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

Як Ви бачите, все нормально відображається. Тепер на панель управління плеєром додана можливість вибору джерел.

6. Відображення субтитрів.

Плеєр jwplayer підтримує можливість відображення субтитрів. Для цього потрібно створити спеціальний текстовий файл з розширенням VTT, ось такого змісту:

WEBVTT
00:00:05 —> 00:00:08
hello world I am subtitle
00:00:10 —> 00:00:12
erdefsd fsdf sd fsd fsd fsd f

Дивіться, спочатку вказуєте ключове слово WEBVTT, потім вказуєте тимчасові інтервали і текст, що буде відображено в певному інтервалі часу. При відображенні тексту можна використовувати деякі html-теги. Для форматування тексту. Наприклад, теги b — для додання жирності тексту й font color=»#3333CC» для визначення кольору тексту. Для відображення субтитрів необхідно додати наступний код:

jwplayer(«player»).setup({
file:»files/video.mp4,
image:»files/pic.jpg»,
tracks: [
{
file:»files/sub.vtt»,
label:»English»
},
{
file:»files/sub.vtt»,
label:»Russian»,
default:true
}
]
});

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

file – шлях до VTT файлу (текст субтитрів і тимчасові інтервали);

label – назва субтитрів на панелі вибору субтитрів;

default – якщо цей параметр має значення true, значить, субтитр виводиться за замовчуванням.

Тепер давайте перейдемо в браузер і подивимося, що у нас вийшло:

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

Використовуючи параметр tracks, можна полегшити навігацію по відео файлу, використовуючи невеликі скріншоти відео ролика, показуються, при наведенні курсору миші на тимчасову панель плеєра. Для цього необхідно в фалі VTT, замість тексту, який відображався в субтитрах прописати імена файлів, які повинні відображатися в певні інтервали часу, наприклад (файл sub_th.vtt):

WEBVTT
00:00 —> 00:05
0_0.jpg
00:05 —> 00:10
0_1.jpg

Далі пишемо наступний код:

jwplayer(«player»).setup({
file:»files/video.mp4,
image:»files/pic.jpg»,
tracks: [
{
file:»files/sub_th.vtt»,
kind:»thumbnails»
}
});

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

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

7. Робота з javaScript API.

Плеєр jwplayer містить дуже великий набір різних функцій і методів, для роботи, використовуючи javaScript. Зараз ми розглянемо лише кілька з них. Детальний опис даних функцій і методів Ви знайдете в офіційній документації по плеєру, за адресою http://www.longtailvideo.com/support/jw-player/28832/about-jw-player.

Тепер давайте створимо кілька кнопок для управління плеєром. Для цього відкриємо файл index,php і додамо кілька рядків, які будуть служити кнопками):

  • Start
  • Get volume
  • Set volume

А у файлі script.js створимо функцію add_volume(), яка буде збільшувати гучність відтворення відео:

function add_volume() {
var volume = jwplayer(‘player’).getVolume();
if(volume < 100) {
volume = volume + 10;
}
jwplayer(‘player’).setVolume(volume);
}

Дивіться, у плеєра jwplayer є метод play(), викликаючи який ми починаємо відтворення, або зупиняємо його (якщо воно вже почалося). Що ми і робимо при натисканні кнопки Start. Тобто описали для даної кнопки обробник події onclick (він спрацює, коли за текстом клікнути мишею), іншими словами, при натисненні на кнопку Start буде викликаний метод play() (початок/зупинка відтворення).

Далі, при натисканні на кнопці Get volume – викликається метод getVolume() – повертає поточну гучність плеєра, її ми й виводимо на екран за допомогою функції alert().

І остання кнопка Set volume – використовується для плавного збільшення гучності плеєра. Для цього ми створили функцію add_volume(), яка викликається при натисканні мишею на цій кнопці. Дана функція дуже проста. Дивіться, спочатку отримуємо поточну гучність і записуємо її в змінну volume. Перевіряємо, чи не чи вийшла вона за межі максимального значення (значення 100). І використовуючи метод setVolume(volume), встановлюємо нове значення гучності (нове значення передається параметром методу).

Тепер якщо перевірити в браузері, то все працює нормально.

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

Всього Вам доброго і вдалого кодування і до нових зустрічей!