От автора: при создании сайтов очень часто возникает необходимость в публикации видеоматериалов на его страницах, а для отображения видео, как Вы знаете, необходим видеоплеер. Поэтому в данном уроке мы с Вами рассмотрим, как установить видео плеер на странице сайта, как добавить видео для воспроизведения и как настроить видеоплеер под свои собственные нужды.
В данном уроке мы с Вами будем говорить об одном из наиболее популярных и наиболее удобных видеоплееров под названием jwplayer.
1. Введение
Данный плеер обладает очень хорошим функционалом, поддерживает такие видео форматы как flv, mp4, аудио mp3, aac, также возможно проигрывание роликов с канала youtube. Поддерживается всеми известными браузерами, такими как Chrome, Firefox, IE, Opera, Safari, мобильный операционной системой Android, и такими устройствами как iPhone / iPad.
Краткие характеристики:
Технологии FLASH и HTML5, то есть плеер легко отображается на всех устройствах.
Удобный и доступный JavaScript API
Поддержка потокового видео протокола RTMP и HTTP псевдо-потока.
Возможность загрузки скинов (только для платной версии).
Для работы нам потребуется небольшой тестовый сайт, либо одна интернет страница, на которой мы и будем выводить видео плеер. Данный сайт уже заранее подготовил, вот так он выглядит:
Думаю, приводить исходный код здесь по тексту нет необходимости, так как он очень простой, к тому же в исходных материалах к уроку он будет приведен.
Теперь давайте установим данный плеер.
2. Установка плеера jwplayer.
Первым делом необходимо скачать плеер. Для этого переходим на официальный сайт разработчика, по адресу: //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):
|
1 |
<script type="text/javascript" src="js/jwplayer.js"></script> |
После этого необходимо создать блок, в котором будет выведен плеер, поэтому создадим блок div с идентификатором player:
|
1 |
<div id="player">For player</div> |
Строка For player при загрузке плеера показана не будет. Далее, используя javascript необходимо прописать код, который будет выводить плеер в созданном блоке. Для этого можно создать отдельный файл и все кодирование вести в нем, или писать в этом же файле, открыв теги script. Но мне удобней использовать отдельный файл, поэтому давайте создадим пустой файл под названием script.js и сразу же его подключим. Только данный файл необходимо подключать после того как Вы создали блок, для отображения плеера. Поэтому подключаем данный файл:
|
1 |
<script type="text/javascript" src="js/script.js"></script> |
Итак, установка плеера завершена, теперь осталось его вызвать для отображения на экране.
3. Воспроизведение видео.
Итак, давайте выведем плеер в указанном блоке, для этого открываем файл script.js и пишем следующий код:
|
1 2 3 4 |
jwplayer("player").setup({ file:"files/video.mp4", image:"files/pic.jpg" }); |
Обратите внимание, что вызывается метод jwplayer() – данный метод входит в состав файла jwplayer.js и является основным при отображении плеера. То есть вызывая данный метод мы передаем ему параметром идентификатор того блока, в котором он должен быть отображен на экране. В нашем случае это блок div с идентификатором player. Затем вызываем метод setup – который определяет все основные параметры плеера:
file – путь к файлу, который должен быть воспроизведен в плеере. В нашем случае это видео в формате mp4 и файл video.mp4.
image – путь к изображению, которое будет показано до начала воспроизведения видео (либо музыки, либо ролика канала youtube).
Теперь давайте сохраним изменения и посмотрим, что отображается на экране браузера.
Как Вы видите, плеер нормально отображается и если, нажать по кнопке воспроизвести, то начнется воспроизведение видео ролика. Теперь, если Вам необходимо воспроизвести аудио файл, для этого необходимо указать путь к этому файлу в параметре file:
|
1 |
file:"files/1.mp3" |
Если необходимо отобразить видео-ролик из канала youtube, для этого ссылку на данный ролик также указываете в параметре file:
|
1 |
file:" //www.youtube.com/watch?v=eLJ_O5Ekxqw" |
Согласитесь все очень просто. Теперь давайте поговорим о настройках данного плеера.
4. Настройка плеера.
Первым делом давайте настроим размеры данного плеера. Для этого необходимо указать два параметра width и height:
|
1 2 3 4 5 6 |
jwplayer("player").setup({ file:"files/1.mp3", image:"files/pic.jpg", width:"640", height:"480" }); |
Думаю, что Вы уже догадались, что width это ширина, а height – высота. Размерность – пиксели. Теперь давайте посмотрим, что у нас получилось:
Как Вы видите, размеры плеера изменились. Теперь давайте добавим еще несколько настроек:
|
1 2 3 4 5 6 7 8 9 10 11 |
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 также поддерживает плейлисты, поэтому давайте научимся с ними работать, и добавим несколько файлов к воспроизведению. Для этого пишем следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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 – размер блока в пикселях.
Теперь давайте посмотрим в браузере, что у нас получилось:
Как Вы видите, плейлист успешно отобразился. Теперь давайте посмотрим, как задать несколько источников на одно и то же видео. К примеру, если у нас есть видео и оно сохранено в различных файлах и при этом у каждого файла различное качество. Для этого пишем следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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", sources : [ { 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, вот такого содержания:
|
1 2 3 4 5 6 7 |
WEBVTT 00:00:05 --> 00:00:08 <b>hello world I am subtitle</b> 00:00:10 --> 00:00:12 <b>erdefsd</b><font color="#3333CC"> fsdf sd</font> fsd fsd fsd f |
Смотрите, вначале указываете ключевое слово WEBVTT, затем указываете временные интервалы и текст, который будет отображен в определенном интервале времени. При отображении текста можно использовать некоторые html теги. Для форматирования текста. К примеру, теги b — для придания жирности текста и font color=»#3333CC» для определения цвета текста. Для отображения субтитров необходимо добавить следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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):
|
1 2 3 4 5 6 7 |
WEBVTT 00:00 --> 00:05 0_0.jpg 00:05 --> 00:10 0_1.jpg |
Далее пишем следующий код:
|
1 2 3 4 5 6 7 8 9 |
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. Сейчас мы рассмотрим только несколько из них. Подробное описание данных функций и методов Вы найдете в официальной документации по плееру, по адресу //www.longtailvideo.com/support/jw-player/28832/about-jw-player.
Теперь давайте создадим несколько кнопок, для управления плеером. Для этого откроем файл index,php и добавим несколько строк (которые будут служить кнопками):
|
1 2 3 4 5 |
<ul> <li onclick="jwplayer('player').play()">Start</li> <li onclick="alert(jwplayer('player').getVolume())">Get volume</li> <li onclick="add_volume()">Set volume</li> </ul> |
А в файле script.js, создадим функцию add_volume(), которая будет увеличивать громкость воспроизведения видео:
|
1 2 3 4 5 6 7 8 |
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), устанавливаем новое значение громкости (новое значение передается параметром методу).
Теперь если проверить в браузере, то все работает нормально.
Итак, данный урок можно завершать. Надеюсь, Вам понравился рассматриваемый плеер и Вы будете использовать его у себя на сайтах.
Всего Вам доброго, удачного кодирования и до новых встреч!
Комментарии (61)