Loading





Форекс с Альпари

eTXT




Анкетка


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


<<< На предыдущую  На двух страницах.  Страница 2.


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



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

Примечание 1: для корректной работы фловплеера на компьютере должен быть установлен Флеш-плеер. Самую последнюю версию Флеш-плеера можно скачать на официальном сайте //get.adobe.com/ru/flashplayer/

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


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


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, находятся в корне сайта, поэтому вместо полных адресов пишем слэши (/).

Примечание 4: если Вы будете устанавливать несколько плееров на разных страницах, Вам необходимо будет создавать столько же файлов script.js, так как он «штучный» (внесены данные именно для конкретного плеера). При попытке загрузки файла script.js в папку js со всеми скриптами, там уже может оказаться файл с таким же названием. Поэтому, с каждым новым плеером придётся загружать новый файл скрипта и давать ему другое имя, например, script1.js, script2.js и т.д. Подобные проблемки, как уже было сказано, могут возникнуть и с файлами в папках css и file, если Вы пожелаете изменить настройки плеера, заставки и субтитры для каждого варианта в отдельности.

меткаВ раздел 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.


<<< На предыдущую  На двух страницах.  Конец страницы 2.

Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка