VideoPlayer

Материал из Umicms
Версия от 07:15, 22 апреля 2014; Stexe (обсуждение | вклад)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к:навигация, поиск

Актуально для версии 2.9.6

Задача: Выводить на страницах сайта видеоплеер для проигрывания файлов в формате flv

Реализация:

Нам нужно добавить плеер для воспроизведения flv роликов на нашем сайте. Эти ролики должны воспроизводиться не сразу после загрузки страницы, а лишь по нажатию кнопки "Play".

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

Рассмотрим вывод видеоплеера Flowplayer.


Итак, скачиваем с сайта производителя дистрибутив.[1] (Если ссылка не работает, то отсюда [2] ) Разархивриуем.
В директорию ./js на сервере поместим файл flowplayer-3.1.4.min.js из скаченного архива. Для подключения видеоролика нам потребуется вставить в код шаблона пару строк:

<head>

<!--

добавляем код на JavaScript который помогает работать с флэш и Flowplayer API для настройки функционала плеера.

и нам необходимо разместить файл скрипта в папку js	-->

<script type="text/javascript" src="/js/flowplayer-3.1.4.min.js"></script>

</head>

Создадим директорию ./player на сервере и поместим в нее два файла: flowplayer-3.1.5.swf и flowplayer.controls-3.1.5.swf из скаченного архива. А теперь размещаем код плеера в тэге <body> в нужном нам месте:

<!-- этот тэг <A> с настройками видеоролика размещаем в нужном месте -->
		<a  
			 href="http://188.226.173.237/barsandtone.flv"  
			 style="display:block;width:520px;height:330px"  
			 id="player"> 
		</a> 
	
		<!-- этот код позволяет утановить flowplayer внутри предыдущего тэга <A>. -->

		<script>
			flowplayer("player", "/player/flowplayer-3.1.5.swf");
		</script>


То, что мы пока сделали - статически добавили код в tpl шаблон. А нам хочется, чтобы пользователь сам мог добавлять в административной панели нужный видеоролик и параметры его воспроизведения.

В этом случае в модуле "Шаблоны данных" создадим поле для добавления файла (поле типа "Файл") и поля для задания параметров видеоплеера: ширина и высота (тип "Число"). Короткие макросы вывода значений этих полей можно вставить в шаблон страниц, у которых эти поля присутствуют:

		<a  
			 href="%src_file_flv%"  
			 style="display:block;width:%width%px;height:%height%px"  
			 id="player"> 
		</a>

В этом коде %src_file_flv% - идентификатор поля типа "Файл", в которое в административной панели указывается файл видеоролика. Если Вы указали в настройках поля в модуле Шаблоны данных другой идентификатор, то Вам нужно изменить в коде идентификатор на Ваш.