VideoPlayer — различия между версиями
Waclaw (обсуждение | вклад) |
Ver (обсуждение | вклад) |
||
| Строка 1: | Строка 1: | ||
| − | Добавление на сайт UMI.CMS плеер для воспроизведения видео flv | + | == Добавление на сайт UMI.CMS плеер для воспроизведения видео flv == |
| − | Задача | + | === Задача === |
| − | + | Yам нужно добавить плеер для воспроизведения 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] ) Разархивриуем. | ||
Для подключения видеоролика нам потребуется вставить в код шаблона пару строк: | Для подключения видеоролика нам потребуется вставить в код шаблона пару строк: | ||
| − | + | <source lang='html'> | |
<head> | <head> | ||
| Строка 28: | Строка 27: | ||
</head> | </head> | ||
| + | </source> | ||
| − | А теперь размещаем код плеера в тэге <body> в нужном нам месте | + | А теперь размещаем код плеера в тэге <body> в нужном нам месте: |
| + | <source lang='html'> | ||
<!-- этот тэг <A> с настройками видеоролика размещаем в нужном месте --> | <!-- этот тэг <A> с настройками видеоролика размещаем в нужном месте --> | ||
<a | <a | ||
| Строка 43: | Строка 44: | ||
flowplayer("player", "/player/flowplayer-3.1.5.swf"); | flowplayer("player", "/player/flowplayer-3.1.5.swf"); | ||
</script> | </script> | ||
| − | + | </source> | |
| Строка 56: | Строка 57: | ||
И после этого вывести идентификаторами в шаблон, например так: | И после этого вывести идентификаторами в шаблон, например так: | ||
| + | <source lang='html'> | ||
<a | <a | ||
href="%src_file_flv%" | href="%src_file_flv%" | ||
| Строка 61: | Строка 63: | ||
id="player"> | id="player"> | ||
</a> | </a> | ||
| + | </source> | ||
Версия 10:10, 17 февраля 2010
Добавление на сайт UMI.CMS плеер для воспроизведения видео flv
Задача
Yам нужно добавить плеер для воспроизведения 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>
