VideoPlayer — различия между версиями
Waclaw (обсуждение | вклад) (→Задача) |
Stexe (обсуждение | вклад) |
||
| (не показаны 3 промежуточные версии 2 участников) | |||
| Строка 1: | Строка 1: | ||
| − | + | [[Категория: Верстка в TPL]][[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]][[Категория:Сторонние сервисы и программы]] | |
| + | '''Актуально для версии 2.9.6'''<br/><br/> | ||
| + | '''Задача:''' Выводить на страницах сайта видеоплеер для проигрывания файлов в формате flv<br/><br/> | ||
| + | '''Реализация:''' | ||
| − | + | Нам нужно добавить плеер для воспроизведения flv роликов на нашем сайте. Эти ролики должны воспроизводиться не сразу после загрузки страницы, а лишь по нажатию кнопки "Play". | |
| − | |||
| − | |||
Для начала нужно определиться с выбором плеера. В сети их большое количество. Как говорится: выбирай на вкус! | Для начала нужно определиться с выбором плеера. В сети их большое количество. Как говорится: выбирай на вкус! | ||
| − | + | Рассмотрим вывод видеоплеера '''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:// | + | 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: | ||
| − | + | То, что мы пока сделали - статически добавили код в tpl шаблон. А нам хочется, чтобы пользователь сам мог добавлять в административной панели нужный видеоролик и параметры его воспроизведения. | |
| − | |||
| − | |||
| − | То, что мы пока сделали - статически добавили код в tpl шаблон. А нам хочется, чтобы пользователь сам мог | ||
| − | + | В этом случае в модуле "Шаблоны данных" создадим поле для добавления файла (поле типа "Файл") и поля для задания параметров видеоплеера: ширина и высота (тип "Число"). | |
| − | высота | + | Короткие макросы вывода значений этих полей можно вставить в шаблон страниц, у которых эти поля присутствуют: |
| − | |||
| − | |||
<source lang='html4strict'> | <source lang='html4strict'> | ||
| Строка 64: | Строка 59: | ||
</a> | </a> | ||
</source> | </source> | ||
| + | |||
| + | В этом коде %src_file_flv% - идентификатор поля типа "Файл", в которое в административной панели указывается файл видеоролика. Если Вы указали в настройках поля в модуле Шаблоны данных другой идентификатор, то Вам нужно изменить в коде идентификатор на Ваш. | ||
Текущая версия на 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% - идентификатор поля типа "Файл", в которое в административной панели указывается файл видеоролика. Если Вы указали в настройках поля в модуле Шаблоны данных другой идентификатор, то Вам нужно изменить в коде идентификатор на Ваш.
