От автора: очень часто на страницах сайта необходимо публиковать различный видео контент. А при этом не обойтись без видео плеера. Поэтому в данном уроке мы с Вами научимся работать с очень хорошим и функциональным плеером под названием Flowplayer. Данный плеер обладает огромным количеством различных параметров, и редактирование большинства из них сводится к обычному изменению правил CSS.
 |
Автор: Виктор ГавриленкоМеня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla. |
Введение
Flowplayer – это бесплатный видео-плеер, который предназначении для воспроизведение видео роликов на веб-страницах. Преимущества Flowplayer:
поддержка разнообразных медиа-форматов — FLV, SWF, MP4, H.264 video, MP3 JPG, PNG;
полная поддержка html5, что особенно актуально в данное время;
огромное количество различных настроек;
прогрессивная закачка, обеспечивающая более простое и быстрое отображение видео на экране;
потоковое видео;
поддержка плейлистов;
полноэкранный режим;
Доступный API, при помощи которого можно управлять плеером используя язык javaScript.
Установка плеера
Итак, первым делом необходимо скачать плеер Flowplayer. Для этого перейдем на официальный сайт flowplayer.org:
Затем, переходим по ссылке Download:
И, кликаем 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:
Затем кликаем по ссылке Download jQuery и попадаем на страницу, выбора версии для скачивания. Выбираем самую актуальную версию и скачиваем библиотеку. Полученный файл также сохраняем в папке js. Далее необходимо подключить нужные файлы. Для этого перейдем в файл index.html и подключим нужные компоненты (либо любой другой файл, который выводит на экран страницу, где должен быть отображен плеер):
|
1 2 |
<script src="js/jquery.js"></script> <script src="js/flowplayer.js"></script> |
Далее, создадим и подключим файл script.js, в котором мы будем писать код на языке javaScript
|
1 |
<script src="js/script.js"></script> |
Теперь давайте, посмотрим на стили, которые мы получили при распаковке архива с плеером (напомню, что мы их скопировали в папку css). Смотрите, мы с Вами получили несколько файлов CSS и каждый из них отвечает за определенное визуальное оформление видео плеера (тема оформления плеера, или skin). Исключение составляет файл all-skins, который содержит в себе все темы оформления. Поэтому, для сегодняшнего урока мы с Вами будем использовать стиль functional.css:
|
1 |
<link rel="stylesheet" href="css/functional.css"> |
После подключения, нужных файлов, необходимо вывести плеер на экран, для этого необходимо создать блок в который и будет помещен плеер. Поэтому в том месте страницы, где Вам необходимо отобразить плеер, добавим следующий код:
|
1 2 3 4 5 |
<div class="flowplayer"> <video> <source type="video/mp4" src="//localhost/flow/file/video1.mp4"> </video> </div> |
Это, так называемый автоматический способ установки плеера. То есть мы создаем обычный блок div с классом flowplayer, а затем, используя блок video и source, указываем видео файл, который необходимо отобразить на экране. Напомню, что в данном уроке, мы с Вами рассматриваем установку плеера используя html5. Если обновить страницу в браузере мы увидим следующее:
Как Вы видите, теперь видео плеер отображается на экране. Для начала воспроизведения, нужно нажать кнопку Play, расположенную в центре. Если же Вы хотите установить плеер в блок с произвольным классом, то необходимо сделать следующее. Создать блок, в который будет помещен плеер, к примеру:
|
1 2 |
<div class="player"> </div> |
Теперь необходимо используя JavaScript установить плеер на экран. Для этого откроем файл script.js и добавим следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(document).ready(function() { $(".player").flowplayer({ swf:"//localhost/flow/flowplayer.swf", playlist: [ [ { mp4:"//localhost/flow/file/video1.mp4" } ] ] }); }); |
То есть, используя библиотеку jQuery, выбираем блок с классом player (блок в котором должен быть отображен плеер). Далее вызываем метод flowplayer, который и выведет плеер на экран. Данному методу передаем объект с настройками, а именно:
swf://localhost/flow/flowplayer.swf – путь к флеш плееру, который мы получили после распаковки архива с плеером;
playlist – источники видео для воспроизведения. Здесь очень внимательно с синтаксисом.
Создание плейлиста
Используя Flowplayer можно создавать собственные плейлисты, тем самым, создав цепочку из видеоматериалов, которые будут проигрываться один за другим. Если плеер установлен автоматически, то создать плейлист можно следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="flowplayer"> <video> <source type="video/mp4" src="//localhost/flow/file/video1.mp4"> <source type="video/mp4" src="//localhost/flow/file/video2.mp4"> <source type="video/mp4" src="//localhost/flow/file/video.mp4"> </video> <span class="fp-prev">Назад</span> <span class="fp-next">Вперед</span> <div class="fp-playlist"> <a href="//localhost/flow/file/video1.mp4">Title 1</a> <a href="//localhost/flow/file/video2.mp4">Title 2</a> <a href="//localhost/flow/file/video.mp4">Title 3</a> </div> </div> |
Как Вы видите для создания плейлиста, нужно добавить несколько блоков source, тем самым задать несколько источников видеоматериалов. Далее, создаем два блока span, которые будут выполнять роль ссылок — переключения к следующему или предыдущему видеоматериалу. Обратите внимание, как нужно называть классы, данных блоков — это специальные имена и они необходимы для правильной работы ссылок. Класс fp-prev используется, для ссылки перехода к предыдущему видео ролику, класс — fp-next – для следующего.
Далее создадим блок div, в котором будет располагаться плейлист, а именно ссылки на следующие элементы плейлиста. Имя класса данного блока, должно быть fp-playlist, опять же, для правильной работы плейлиста. Теперь можно проверять работоспособность плеера и плейлиста, но необходимо настроить отображения ссылок, управления плейлистом.
Так как все ссылки для управления плейлистом — это обычные блоки div, значит мы можем оформить их соответствующим образом, используя обычные правила CSS, что собственно мы и сделаем (в этом и заключается очень важное достоинство плеера flowplayer):
|
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 |
.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 добавить на фон любое изображение, в данном уроке я этого делать не буду, так как Вы вполне сможете это сделать сами. Теперь давайте посмотрим, на изменения в плеере:
Как Вы видите, теперь мы можем просматривать несколько видеороликов – поочередно, и перемещаться по позициям плейлиста, используя ссылки управления. Если же Вы установили плеер вручную, то для создания плейлиста, достаточно добавить в настройку playlist, еще несколько источников на видео. Вот таким образом. Html – код:
|
1 2 3 4 |
<div class="player"> <span class="fp-prev">Назад</span> <span class="fp-next">Вперед</span> </div> |
Как Вы видите в этом случае, достаточно создать блок, в котором будет выведен плеер, и добавить в него ссылки для перехода к следующему или предыдущему видео (в нашем случае это блоки span). Код javascript:
|
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 |
$(".player").flowplayer({ swf:"//localhost/flow/flowplayer.swf" playlist: [ [ { mp4:"//localhost/flow/file/video1.mp4" } ], [ { mp4:"//localhost/flow/file/video2.mp4" } ], [ { mp4:"//localhost/flow/file/video.mp4" } ] ] }); |
Как Вы видите, ничего нового нет, просто добавляем дополнительные источники видео. Также ссылки в плейлисте получают класс .is-active, если видео на которое они ссылаются выбрано или отображается в плеере. А это очень полезно, если Вам нужно отмечать видео, которое отображается
Вывод субтитров
Flowplayer – также поддерживает вывод субтитров на экран. Напомню, что субтитры – это текстовые строки которые выводятся, обычно, в нижней центральной части плеера. Для вывода субтитров необходимо добавить следующий код (между тегами video).
|
1 |
<track src="file/sub.vtt"> |
Тегу track – необходимо добавить атрибут src, с указанием пути к специальному фалу с субтитрами. Данный файл описывает когда и какую строку необходимо выводить на экран. Теперь давайте рассмотрим формат данного файла (данный файл, я сохранил в папке file):
|
1 2 3 4 5 6 7 8 9 |
WEBVTT FILE 1 00:00:01.000 --> 00:00:04.000 Это субтитр 1 00:00:05.000 --> 00:00:10.000 NEXT |
Как Вы видите, в начале необходимо указать название файла, а затем указываем временной интервал, в котором должен быть показан определенный субтитр. Теперь давайте посмотрим, что у нас получилось:
Как Вы видите, все успешно работает. Теперь давайте поговорим, о том, как настроить плеер, под собственные нужды.
Настройка плеера
Настройка плеера Flowplayer осуществляется, в основном, путем добавления определенных классов CSS к блоку в котором отображается плеер. То есть к блоку с классом flowplayer. Первым делом, давайте определимся, как задать размер для отображаемого на экране плеера. Для этого, достаточно указать ширину и высоту, при помощи правил CSS для блока с классом flowplayer:
|
1 2 3 4 5 6 |
.flowplayer { background-image: url("../file/fon.jpg"); width:640px !important; margin: 10px auto !important; display: block !important; } |
А также можно добавить изображение в качестве фона плеера, которое будет отображаться перед началом воспроизведения ролика, и различные правила для позиционирования плеера в центре экрана. Для указания настроек соотношения сторон, необходимо добавить атрибут data-ratio, к блоку с классом flowplayer. Значение данного атрибута и будет указывать соотношение сторон для плеера. К примеру: Соотношение сторон 3/4
|
1 2 |
<div class="flowplayer" data-ratio="0.417"> </div> |
Соотношение сторон 9/16
|
1 2 |
<div class="flowplayer" data-ratio="0.5625"> </div> |
Теперь давайте рассмотрим настройки внешнего вида плеера. Для смены стандартной темы, достаточно выбрать один из файлов CSS, который мы получили при распаковке архива с плеером. Далее, используя следующие стандартные классы, можно настроить внешний вид плеера:
fixed-controls — панель управления плеером, занимает фиксированное положение на экране;
aside-time – время, вынесено из панели управления и расположено в верхнем левом углу;
no-background – отключение фона в панели управления;
no-mute – скрыть панель управления громкостью;
no-time – скрыть отображения временной шкалы;
no-volume – скрыть ползунок управления громкостью
play-button — отображение кнопки PLAY/STOP.
Давайте немного изменим настройки нашего плеера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="flowplayer aside-time play-button"> <video> <source type="video/mp4" src="//localhost/flow/file/video1.mp4"> <source type="video/mp4" src="//localhost/flow/file/video2.mp4"> <source type="video/mp4" src="//localhost/flow/file/video0.mp4"> <track src="file/sub.vtt"> </video> <span class="fp-prev">Назад</span> <span class="fp-next">Вперед</span> <div class="fp-playlist"> <a href="//localhost/flow/file/video1.mp4">Titile 1</a> <a href="//localhost/flow/file/video2.mp4">Title 2</a> <a href="//localhost/flow/file/video.mp4">Title 3</a> </div> </div> |
И добавим прозрачности в панель управления плеером, для этого добавим следующие стили в файл style.css:
|
1 2 3 |
.fp-controls { opacity:0.5 !important; } |
Вот таким вот образом, можно изменять внешний вид плеера, используя обычный CSS. Так же, у плеера Flowplayer есть еще и классы состояний. Классы состояний это классы, которые добавляются плееру, при определенном его состоянии. К примеру, режим паузы воспроизведения, начало и остановка видео. Вот несколько классов состояния:
is-fullscreen – при полноэкранном режим е воспроизведения;
is-help – при отображении справки;
is-loading — при загрузке видеоролика
is-muted — если звук плеера отключен
is-paused –если включен режим паузы воспроизведения;
is-playing – при воспроизведении авто;
is-ready – когда плеер полностью загружен;
К примеру, если в стили добавить следующий код:
|
1 2 3 |
.is-playing { border:2px solid green } |
То на экране мы увидим следующее:
То есть при воспроизведении, к блоку div с классом flowplayer добавляется класс is-playing и мы видим, зеленую рамку. Вот и все что я хотел рассмотреть в данном уроке. Конечно, еще есть множество различных параметров и настроек, которые мы с Вами не рассмотрели, но основные мы изучили и их вполне достаточно для использования данного плеера. Если Вы хотите изучить данный плеер более подробно, то на странице //flowplayer.org/docs/setup.html, содержится полная официальная документация по Flowplayer.
Всего доброго, удачного кодирования! И увидимся в следующих уроках!
Комментарии (12)