VideoPlayer — различия между версиями

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

Версия 07:59, 29 марта 2010

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

Задача

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

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

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

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


Итак, скачиваем с сайта производителя дистрибутив.[1] (Если ссылка не работает, то отсюда [2] ) Разархивриуем.

Для подключения видеоролика нам потребуется вставить в код шаблона пару строк:

<head>

<!--

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

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

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

</head>

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

<!-- этот тэг <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>


Смотрим результат.[[3]]


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

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

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

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

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