Установка и настройка плеера Flowplayer

Установка и настройка плеера Flowplayer

От автора: очень часто на страницах сайта необходимо публиковать различный видео контент. А при этом не обойтись без видео плеера. Поэтому в данном уроке мы с Вами научимся работать с очень хорошим и функциональным плеером под названием 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 и подключим нужные компоненты (либо любой другой файл, который выводит на экран страницу, где должен быть отображен плеер):

<script src="js/jquery.js"></script>
<script src="js/flowplayer.js"></script>

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

<script src="js/script.js"></script>

Теперь давайте, посмотрим на стили, которые мы получили при распаковке архива с плеером (напомню, что мы их скопировали в папку css). Смотрите, мы с Вами получили несколько файлов CSS и каждый из них отвечает за определенное визуальное оформление видео плеера (тема оформления плеера, или skin). Исключение составляет файл all-skins, который содержит в себе все темы оформления. Поэтому, для сегодняшнего урока мы с Вами будем использовать стиль functional.css:

<link rel="stylesheet" href="css/functional.css">

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

<div class="flowplayer">
	<video>
	<source type="video/mp4" src="//localhost/flow/file/video1.mp4">
	</video>
</div>

Это, так называемый автоматический способ установки плеера. То есть мы создаем обычный блок div с классом flowplayer, а затем, используя блок video и source, указываем видео файл, который необходимо отобразить на экране. Напомню, что в данном уроке, мы с Вами рассматриваем установку плеера используя html5. Если обновить страницу в браузере мы увидим следующее:

Как Вы видите, теперь видео плеер отображается на экране. Для начала воспроизведения, нужно нажать кнопку Play, расположенную в центре. Если же Вы хотите установить плеер в блок с произвольным классом, то необходимо сделать следующее. Создать блок, в который будет помещен плеер, к примеру:

<div class="player">
</div>

Теперь необходимо используя 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 можно создавать собственные плейлисты, тем самым, создав цепочку из видеоматериалов, которые будут проигрываться один за другим. Если плеер установлен автоматически, то создать плейлист можно следующим образом:

<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="http://localhost/flow/file/video1.mp4">Title 1</a>
		<a href="http://localhost/flow/file/video2.mp4">Title 2</a>
		<a href="http://localhost/flow/file/video.mp4">Title 3</a>
	</div>
</div>

Как Вы видите для создания плейлиста, нужно добавить несколько блоков 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 добавить на фон любое изображение, в данном уроке я этого делать не буду, так как Вы вполне сможете это сделать сами. Теперь давайте посмотрим, на изменения в плеере:

Как Вы видите, теперь мы можем просматривать несколько видеороликов – поочередно, и перемещаться по позициям плейлиста, используя ссылки управления. Если же Вы установили плеер вручную, то для создания плейлиста, достаточно добавить в настройку playlist, еще несколько источников на видео. Вот таким образом. Html – код:

<div class="player">
	   <span class="fp-prev">Назад</span>
	   <span class="fp-next">Вперед</span>
	</div>

Как Вы видите в этом случае, достаточно создать блок, в котором будет выведен плеер, и добавить в него ссылки для перехода к следующему или предыдущему видео (в нашем случае это блоки 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/sub.vtt">

Тегу 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 осуществляется, в основном, путем добавления определенных классов 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

<div class="flowplayer" data-ratio="0.417">
</div>

Соотношение сторон 9/16

<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.

Давайте немного изменим настройки нашего плеера:

<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="http://localhost/flow/file/video1.mp4">Titile 1</a>
		  <a href="http://localhost/flow/file/video2.mp4">Title 2</a>
		  <a href="http://localhost/flow/file/video.mp4">Title 3</a>
	   </div>
	</div>

И добавим прозрачности в панель управления плеером, для этого добавим следующие стили в файл style.css:

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

Вот таким вот образом, можно изменять внешний вид плеера, используя обычный CSS. Так же, у плеера Flowplayer есть еще и классы состояний. Классы состояний это классы, которые добавляются плееру, при определенном его состоянии. К примеру, режим паузы воспроизведения, начало и остановка видео. Вот несколько классов состояния:

is-fullscreen – при полноэкранном режим е воспроизведения;

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

is-loading — при загрузке видеоролика

is-muted — если звук плеера отключен

is-paused –если включен режим паузы воспроизведения;

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

is-ready – когда плеер полностью загружен;

К примеру, если в стили добавить следующий код:

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

То на экране мы увидим следующее:

То есть при воспроизведении, к блоку div с классом flowplayer добавляется класс is-playing и мы видим, зеленую рамку. Вот и все что я хотел рассмотреть в данном уроке. Конечно, еще есть множество различных параметров и настроек, которые мы с Вами не рассмотрели, но основные мы изучили и их вполне достаточно для использования данного плеера. Если Вы хотите изучить данный плеер более подробно, то на странице http://flowplayer.org/docs/setup.html, содержится полная официальная документация по Flowplayer.

Всего доброго, удачного кодирования! И увидимся в следующих уроках!

Фреймворк YII2: теория и первая практика

Овладейте азами фреймворка Yii2 за 5 дней!

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (12)

  1. Александр Борисов

    Виктор привет. Супер мануал. Спасибо! Что-то вот только не могу ни как в интернете найти информацию о том, как сделать так, чтобы у плеера исчезла полоса прокрутки. То есть чтобы человек видео мотать не смог. Это какой класс?

  2. Серега

    Здравствуйте могли бы еще показать настройку плеера Projekktor ?

  3. Владимир

    Добрый день, Виктор!
    Сегодня решил скачать Flowplayer с официального сайта. Уже бесплатно доступна только версия плеера с ограничением времени видео 4 минуты. Удастся ли мне пользоваться плеером, взятым из исходников Вашего урока?

    • Виктор Гавриленко

      Добрый день, Владимир!
      Исходники урока рабочие. Попробуйте запустить на реальном сервере в интернете, так как на локальном компьютере все работает нормально. Думаю проблем не должно возникнуть, хотя могу ошибаться.

  4. Basile

    Виктор, здравствуйте!
    Я запускаю свой плеер таким кодом.

    <source type="video/mp4" src="»>

    Т.е. открывается страничка с этим кодом и переданный ей клип сразу проигрывается. Но мне хотелось бы, чтобы он проигрывался сразу в полноэкранном режиме. Как этого добиться что-то никак не соображу… Подскажите пожалуйста.

  5. Basile

    Код почему-то отобразился не полностью…
    Угловые скобки заменяю на квадратные:

    [div class="flowplayer" data-swf="flowplayer/flowplayer.swf" data-fullscreen="true"]
    [video autoplay]
    [source type="video/mp4" src="[?php echo $video; ?]«]
    [/video]
    [/div]

  6. webrabota77

    Спасибо. Было очень интересно

  7. Серега

    Могли бы подсказать как добавить кнопку вкл и выкл субтитров ?

    • Виктор Гавриленко

      Здравствуйте!
      В глобальных настройках нет параметра отвечающего за отображение кнопки включения и выключения субтитров. Поэтому необходимо самостоятельно создавать скрипт данной кнопки. Для этого необходимо использовать API плеера flowplayer. Возможно данная страница Вам поможет: Ссылка

  8. Александр

    Спасибо! Очень полезный материал!

  9. Александр

    Здравствуйте Виктор, возможно вы поможете в моём вопросе. Установил плагин плеере на вордпрес, всё работает, но к сожалению при использовании кнопки поделиться, в конечном посте на странице ( например фейсбук ) не появляется фото «poster», только урл на страницу сайта с описанием. Страница сайта.
    Заранее спасибо, с уважением Александр

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree