VideoPlayer
Добавление на сайт 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>
