Просмотр видео на web-странице с помощью фловплеера (продолжение)

Продолжим изучение темы flowplayer. На предыдущем уроке мы рассмотрели установку версии Flowplayer-Minimalist с набором минимально необходимых функций и регулировок. Сейчас попробуем расширить этот набор: добавим плейлист, изменим дизайн и управление плеером. Такой плеер уже не будет запускаться «автоматом» с загрузкой страницы, появятся некоторые элементы управления. В связи с этим и установка немного усложнится, но надеюсь, с ней мы успешно справимся.

Установка на сайт

1. После скачивания, как обычно, распаковать архив в текущую папку на компьютере. В папке flow1 находятся:

• Папка css с файлами стилей;
• Папка file со вспомогательными файлами;
• Папка js со скриптами;
• Файл плеера flowplayer.swf;
• Индексный файл index.html.

2. Теперь необходимо правильным образом закачать файлы и папки на сервер своего сайта:

• Папки css и file закачиваем в корневую папку сайта. Будьте внимательны, папки с такими именами уже могут быть в корне вашего сайта. В этом случае в папку css вашего сайта закачайте только папку flows. Тогда пути к файлам стилей будут выглядеть так:

  <link rel="stylesheet" href="/css/flows/style.css">
  <link rel="stylesheet" href="/css/flows/playful.css">
  

  А с папкой file можно проделать то же самое или переименовать её, но, будем считать, что её не оказалось в корне вашего сайта.
• Содержимое папки js закачиваем в одноименную папку со скриптами в корень сайта;
• Файл плеера flowplayer.swf закачиваем в корень сайта;
• Файл index.html оставим на компьютере (в файловом менеджере) для дальнейшей разработки.

3. Подготовьте и загрузите на свой сайт в папку video четыре файла в формате mp4. Дайте им названия: video1, video2, video3, video4.

4. Файл index.html, как уже упоминалось, нам нужен для демонстрации размещения кода плеера на своей странице. Все нужные коды вставляем точно так, как в этом файле. Кто-то может справиться с этим без проблем, а кто испытывает некоторые трудности, пожалуйста, следуйте подсказкам:

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

<link rel="stylesheet" href="/css/flows/style.css">
<link rel="stylesheet" href="/css/flows/playful.css">

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

Обе папки: стилей -css и скриптов -js, находятся в корне сайта, поэтому вместо полных адресов пишем слэши (/).

В раздел body страницы в нужном вам месте вставляем код плеера:

<div class="wrap">
   <div class="flowplayer">
	<video>
			 <source type="video/mp4" src="/video/video1.mp4">
			 <source type="video/mp4" src="/video/video2.mp4">
		 	 <source type="video/mp4" src="/video/video3.mp4">
		 	 <source type="video/mp4" src="/video/video4.mp4">
		<track src="/file/sub.vtt">
	   </video>
	   <span class="fp-prev">Назад</span>
		<span class="fp-next">Вперед</span>
	   <div class="fp-playlist">
			
		  <a href="/video/video1.mp4">Часть 1</a>
		  <a href="/video/video2.mp4">Часть 2</a>
		  <a href="/video/video3.mp4">Часть 3</a>
		  <a href="/video/video4.mp4">Часть 4</a>
	   </div>
	</div>
</div>	

В этом коде Вы видите ваши четыре видеофайла, которые расположены в папке video, которая в свою очередь, находится в корне сайта. Эти же файлы прописаны и в плейлисте. А в строке <track src="/file/sub.vtt"> указан путь к файлу субтитров.

Flowplayer, как Вы уже поняли, поддерживает функцию вывода субтитров на экран. За это ответственен участок кода в индексном файле:

<track src="/file/sub.vtt">

В коде прописан путь к файлу субтитров sub.vtt, который, в свою очередь, нужно скорректировать согласно теме просматриваемого видеоматериала и установить временные интервалы:

WEBVTT FILE

1
00:00:01.000 --> 00:00:10.000
Это субтитр

1
00:00:11.000 --> 00:00:20.000
Следующий субтитр

И, наконец, нужно обратиться к файлу script.js, который находится в папке js и проверить, правильно ли прописаны пути к flowplayer.swf и к файлам видео в плейлисте:

$(document).ready(function() {
	$(".player").flowplayer({
		swf:"/flowplayer.swf",
		
		adaptiveRatio: true,
		
		playlist: [
		
			[
				{
					mp4:"/video/video1.mp4"
				}
			],
			
			
			
			[
				{
					mp4:"/video/video2.mp4"
				}
			],
			
			
			[
				{
					mp4:"/video/video3.mp4"
				}
			],
			
			
			[
				{
					mp4:"/video/video4.mp4"
				}
			]
			
		]
		
	});
	
	
});

Вот и всё! Далее откройте вашу страницу с установленным плеером и проверьте корректность его работы.

Минимальный набор настроек плеера

Количество проигрываемых видеофайлов можно изменять простым добавлением фрагмента кода в файле script.js (обращайте внимание на запятую в коде!):

            [
				{
					mp4:"/video/video5.mp4"
				}
			],

И ещё для этого нужно добавить очередной блок source в коде индексного файла:

<source type="video/mp4" src="/video/video5.mp4">

Размеры плеера (ширину и высоту) можно регулировать в файле style.css:

.flowplayer {
	background-image: url("../file/fon.jpg");
	width: 640px !important;
	margin: 10px auto !important;
	display: block  !important;
}

Сейчас выставлена ширина (width) - 640px. Здесь же, в строке background-image прописан путь к файлу заставки, который Вы можете изменить. Если будете менять размеры плеера, не забудьте пропорционально изменить размеры блока wrap, чтобы область плеера не выходила за пределы блока wrap:

.wrap {
width: 800px;
height: 500px;
margin: 0px auto;
border: 1px solid white;
padding: 5px;
}

Для смены стандартной темы необходимо заменить файл css в строке индексного файла:

<link rel="stylesheet" href="/css/flows/playful.css">

В данном примере выставлен playful.css. В наборе присутствует ещё несколько вариантов - minimalist.css, functional.css и т.д. Но, как я понял, особого смысла в смене темы нет, так как почти ничего не меняется, кроме незначительных нововведений в управлении плеером.

Нужно отметить, что есть ещё много параметров и настроек, но, может быть, нет нужды их рассматривать и «забивать себе голову». Ведь, все-таки, важнее не форма, а содержание. Желательно, чтобы ваши посетители обращали минимум внимания на оформление плеера и больше на то, что Вы им предложили посмотреть. На этом закончим тему flowplayer, всех Вам благ! Пока! L.M.