Просмотр исходного текста страницы VideoPlayer

== Добавление на сайт UMI.CMS плеер для воспроизведения видео flv ==

=== Задача ===

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

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

Поэтому я выбрал '''Flowplayer'''.   

Выбор плеера зависит всегда от требований заказчика, поэтому попробуйте на основе этого примера выбрать тот, который нравится Вам и сделать встроенное видео на сайте.

 
Итак, скачиваем с сайта производителя дистрибутив.[http://releases.flowplayer.org/flowplayer/flowplayer-3.1.5.zip] (Если ссылка не работает, то отсюда [http://sivak.info/files/flowplayer/flowplayer-3.1.5.zip] ) Разархивриуем. 

Для подключения видеоролика нам потребуется вставить в код шаблона пару строк:
<source lang='html4strict'>
<head>

<!--

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

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

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

</head> 
</source>

А теперь размещаем код плеера в тэге <body> в нужном нам месте:

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

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

Смотрим результат.[[http://sivak.info/video_flv/]]


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

Значит нам осталось в модуле Шаблоны данных добавить необходимое поле для добавления файла и поля, которые задавали бы нужные параметры:
высота, ширина, способ показа ролика.

И после этого вывести идентификаторами в шаблон, например так:

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

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