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

Материал из Umicms
Перейти к:навигация, поиск
 
Строка 1: Строка 1:
−
== Добавление на сайт UMI.CMS плеер для воспроизведения видео flv ==
+
[[Категория: Верстка в TPL]][[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]][[Категория:Сторонние сервисы и программы]]
 +
'''Актуально для версии 2.9.6'''<br/><br/>
 +
'''Задача:''' Выводить на страницах сайта видеоплеер для проигрывания файлов в формате flv<br/><br/>
 +
'''Реализация:'''
  
−
=== Задача ===
+
Нам нужно добавить плеер для воспроизведения flv роликов на нашем сайте. Эти ролики должны воспроизводиться не сразу после загрузки страницы, а лишь по нажатию кнопки "Play".
−
 
 
−
Нам нужно добавить плеер для воспроизведения flv роликов на нашем сайте. Эти ролики должны показываться не сразу после загрузки страницы, а лишь по нажатию кнопки Play.
 
  
 
Для начала нужно определиться с выбором плеера. В сети их большое количество. Как говорится: выбирай на вкус!
 
Для начала нужно определиться с выбором плеера. В сети их большое количество. Как говорится: выбирай на вкус!
  
−
Поэтому я выбрал '''Flowplayer'''.   
+
Рассмотрим вывод видеоплеера '''Flowplayer'''.   
  
−
Выбор плеера зависит всегда от требований заказчика, поэтому попробуйте на основе этого примера выбрать тот, который нравится Вам и сделать встроенное видео на сайте.
 
  
 
   
 
   
−
Итак, скачиваем с сайта производителя дистрибутив.[http://releases.flowplayer.org/flowplayer/flowplayer-3.1.5.zip] (Если ссылка не работает, то отсюда [http://sivak.info/files/flowplayer/flowplayer-3.1.5.zip] ) Разархивриуем.  
+
Итак, скачиваем с сайта производителя дистрибутив.[http://releases.flowplayer.org/flowplayer/flowplayer-3.1.5.zip] (Если ссылка не работает, то отсюда [http://sivak.info/files/flowplayer/flowplayer-3.1.5.zip] ) Разархивриуем. <br/>
−
 
+
В директорию '''./js''' на сервере поместим файл '''flowplayer-3.1.4.min.js''' из скаченного архива.
 
Для подключения видеоролика нам потребуется вставить в код шаблона пару строк:
 
Для подключения видеоролика нам потребуется вставить в код шаблона пару строк:
 
<source lang='html4strict'>
 
<source lang='html4strict'>
Строка 29: Строка 29:
 
</source>
 
</source>
  
−
А теперь размещаем код плеера в тэге <body> в нужном нам месте:
+
Создадим директорию .'''/player''' на сервере и поместим в нее два файла: '''flowplayer-3.1.5.swf''' и '''flowplayer.controls-3.1.5.swf''' из скаченного архива. А теперь размещаем код плеера в тэге <body> в нужном нам месте:
  
 
<source lang='html4strict'>
 
<source lang='html4strict'>
 
<!-- этот тэг <A> с настройками видеоролика размещаем в нужном месте -->
 
<!-- этот тэг <A> с настройками видеоролика размещаем в нужном месте -->
 
<a   
 
<a   
−
href="http://e1h13.simplecdn.net/flowplayer/flowplayer.flv"   
+
href="http://188.226.173.237/barsandtone.flv"   
 
style="display:block;width:520px;height:330px"   
 
style="display:block;width:520px;height:330px"   
 
id="player">  
 
id="player">  
Строка 47: Строка 47:
 
   
 
   
  
−
Смотрим результат.[[http://sivak.info/video_flv/]]
+
То, что мы пока сделали - статически добавили код в tpl шаблон. А нам хочется, чтобы пользователь сам мог добавлять в административной панели нужный видеоролик и параметры его воспроизведения.  
−
 
 
−
 
 
−
То, что мы пока сделали - статически добавили код в tpl шаблон. А нам хочется, чтобы пользователь сам мог добавить в админ.панели нужный видеоролик и параметры его воспроизведения.
 
−
 
 
−
Значит нам осталось в модуле Шаблоны данных добавить необходимое поле для добавления файла и поля, которые задавали бы нужные параметры:
 
−
высота, ширина, способ показа ролика.
 
  
−
И после этого вывести идентификаторами в шаблон, например так:
+
В этом случае в модуле "Шаблоны данных" создадим поле для добавления файла (поле типа "Файл") и поля для задания параметров видеоплеера: ширина и высота (тип "Число").
 +
Короткие макросы вывода значений этих полей можно вставить в шаблон страниц, у которых эти поля присутствуют:  
  
 
<source lang='html4strict'>
 
<source lang='html4strict'>
Строка 65: Строка 60:
 
</source>
 
</source>
  
−
В этом коде %src_file_flv% - идентификатор поля Файл, в которое в админ.панели загружается файл ролика и которое выводит ссылку на файл. Если Вы указали в настройках поля в модуле Шаблоны данных другой идентификатор, то Вам нужно изменить в коде идентификатор на Ваш.
+
В этом коде %src_file_flv% - идентификатор поля типа "Файл", в которое в административной панели указывается файл видеоролика. Если Вы указали в настройках поля в модуле Шаблоны данных другой идентификатор, то Вам нужно изменить в коде идентификатор на Ваш.
−
[[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]][[Категория:Сторонние сервисы и программы]]
 

Текущая версия на 07:15, 22 апреля 2014

Актуально для версии 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% - идентификатор поля типа "Файл", в которое в административной панели указывается файл видеоролика. Если Вы указали в настройках поля в модуле Шаблоны данных другой идентификатор, то Вам нужно изменить в коде идентификатор на Ваш.

Источник — «https://wiki.umisoft.ru/index.php?title=VideoPlayer&oldid=7652»