Мультимедийный контент в интернет завоевывает все большую
популярность. Вебмастерам приходится довольно часто сталкиваться с
установкой видео либо аудио проигрывателей на свои сайты. Конечно
добавить видео с youtube или rutube не так уж и сложно, скажите Вы. Но
что делать, если нужно проиграть видео/аудио с собственного сервера?
Например, организовать предварительный просмотр фильма, либо
прослушивание песни перед скачиванием? Вот здесь обычно и начинаются
проблемы.
В данном уроке мы рассмотрим решение данной проблемы в Joomla . Нашим помощником будет компонент AllVideos Reloaded, который является наиболее популярным расширением из данной серии. Хотя, честно сказать, не лишен недостатков...
Перед
тем, как знакомиться с компонентом, подумайте, а нужен ли он вообще в
Вашем случае? Если Вам необходимо просто вставить небольшой видеоролик,
то нет нужды устанавливать расширения, которые, в определенной степени,
тормозят сайт. Можно просто залить видео на youtube или rutube,
получить там html код и вставить в нужное место статьи
Однако если ситуация иная, тогда смело можете приступать к чтению :)
Некоторые возможности компонента:
-
может воспроизводить многие форматы видео и аудио (.flv, .swf, .mov,
.mp4, .wmv, .avi, .mpg, .mpeg, .rm, .ram, .wma, .mp3 и др.);
- Поддерживает более 35 видео провайдеров , с автоматической обработкой (надо только указать ссылку на источник);
- Позволяет ставить свой логотип поверх видео;
- Позволяет ставить предварительное изображение, которое будет показываться перед началом проигрывания видео;
- Имеет глобальные настройки, и множество атрибутов для индивидуальной настройки каждого отдельного видео/аудио;
- Позволяет создавать плейлисты ;
УСТАНОВКА И НАЧАЛЬНЫЕ НАСТРОЙКИ:
Прежде всего скачиваем компонент. , Вы можете скачать сдесь:
http://ogeneusfail.ifolder.ru/18029337
Установка
выполняется стандартным образом, через расширения >>
установить/удалить . После успешной установки, в разделе компоненты
появится Allvideos reloaded, в менеджере плагинов - плагин Content -
AllVideos Reloaded , также появится модуль, с этим же названием, и
кнопка AVR Media в редакторе статей.
Первым делом нужно перейти в директорию Ваш_сайт/images/stories/ и создать там две папки: videos (для видеофайлов) и audio (для
аудио) . Теперь, если Вы хотите проигрывать видеоролики со своего
сайта, потребуется закачать нужные ролики в созданные ранее папки.
Сразу
отмечу, что несмотря на то, что плеер воспроизводит массу различных
форматов, самыми оптимальными из них являются flv - для видео, и mp3 -
для аудио. Именно эти форматы используют большинство сайтов, т.к. файлы
в таких форматах, имеют наименьший размер, при наивысшем качестве.
Перекодировать один формат в другой, помогут специальные программы -
конверторы, например Any Video Converter .
Добавление видео/аудио в статью:
Предположим, я закачал в папку videos, файл test.flv а в папку audio - music.mp3
. Теперь, если мне необходимо вывести в статье видеоплеер, и проиграть
там файл test.flv , я пишу в нужном месте текста следующую конструкцию:
{flv}test{/flv}
И на странице появляется такой проигрыватель (это картинка, так что не пытайтесь запустить):
Аналогично, если мне нужно проиграть аудио файл, я пишу:
{mp3}music{/mp3}
и получаю на странице вот такой проигрыватель:
Обратите внимание что
в имени файла, мы не пишем расширение, оно указывается в фигурных
скобках. Также мы не пишем полный путь к файлу, т.к. плагин по
умолчанию ищет его в указанных ранее папках videos и audio . Заметьте
также, что все символы пишутся в нижнем регистре и что названия файлов
должны быть на английском.
Конструкции для вставки файлов других форматов, можете посмотреть здесь .
Если
по каким-либо причинам, в папке videos мы решили создать подпапку,
например, 2010 , и свой файл test.flv перенести туда, то конструкция
вывода будет выглядеть так:
{flv}2010/test{/flv}
Т.е. теперь вместо имени файла, мы пишем путь к нему от корневой директории videos . Аналогично и для аудио файлов.
Плагин поддерживает вставку видео с популярных видеосервисов. Конструкции для вставки смотрите в документации на официальном сайте.
Мы
познакомились с "ручным" способом добавления в статьи. Но как я писал
вначале, после установки AllVideos Reloaded в редакторе статей
появилась кнопка AVR Media , предназначенная для автоматизации данного
процесса.
Ее можно найти в нижней части редактора, возле кнопки ПОДРОБНЕЕ.
После
клика по кнопке перед нами открывается окно. В верхней части имеется
две вкладки: Remote-media - для вставки видео с видеосервисов, и Local
Media - для вставки со своего сервера.
В
данном случае, мы вставляем со свеого, поэтому выбираем Local Media .
Теперь, в графе Media из выпадающего списка выбираем требуемый файл,
при желании меняем ширину (width) и высоту (height) плеера , и жмем
кнопку Insert . Вот и все!видео вставилось.
БАЗОВЫЕ НАСТРОЙКИ ALLVIDEOS RELOADED:
В
данном компоненте, есть глобальные настройки и индивидуальные.
Глобальные - относятся ко всем плеерам. А уже с помощью индивидуальных,
при желании, можно подредактировать плеер на конкретной странице.
Сперва
рассмотрим глобальные настройки. Идем в расширения >>менеджер
плагинов >>Content - AllVideos Reloaded . Справа видим настройки
плагина, включающие в себя 3 вкладки. Рассмотрим первую из них,
Параметры плагина.
Container class
- класс для контейнера, внутри которого будет выводиться плеер. Т.е. в
файле стилей шаблона, можно создать класс, с таким именем, и как-то его
оформить при желании.
Master video width, Master video height - соответственно ширина и высота видеоплеера.
Local video folder - папка где лежит видео .
Flash display mode и Flash background color - режим отображения и фоновый цвет флеш. Советую не трогать данные параметры.
Local audio folder - папка для аудио.
Master audio width, Master audio height- ширина и высота аудиоплеера.
Rip Caching и Cache Time - настройки кэширования, которые также лучше не трогать :)
Теперь давайте посмотрим на расширенные параметры:
Controls color - цвет контрольной панели (внизу плеера)
Controls text color - цвет всех значков и текста на контрольной панели
Controls highlight color - цвет значков панели (кнопки play, stop и др.) в момент наведения
Video background - фоновый цвет видео - показывается пока видео не запущено.
Autostart - автоматическое проигрывание плеера.
Show control bar - показать панель управления
Show digits - показывать время проигрывания на панели.
Show icons
- показывать иконку PLAY (треугольник) по центру экрана проигрывателя.
Если поставить NO , то запускаться плеер будет просто по клику в любом
месте экрана.
Show stop - показать кнопку стоп
Show download - показать кнопку загрузки . Чтобы она стала рабочей, нужно прописать специальный атрибут в теге вставки видео.
Show fullscreen button - показать кнопку разворота на весь экран.
Logo
- позволяет накладывать на видео водяной знак. Это должно быть
изображение с прозрачным фоном (png либо gif) , лежащее в папке
Ваш_сайт/images/stories/ . Оно будет отображаться в правом верхнем
углу. К сожалению, изменить его положение напрямую нельзя. Но если, к
примеру, Вы хотите показать его снизу, а не сверху, можно просто
сделать изображения большим по высоте и значимую его часть поместить в
самый низ. Таким образом, будет казаться что водяной знак располагается
снизу.
Video screen mode - позволяет задавать положение плейлиста и прятать контрольную панель (показывая лишь в момент наведения курсора).
Playlist size - максимально возможный размер плейлиста.
Индивидуальные настройки:
В
принципе, через эти настройки, можно переопределить и даже дополнить
практически все глобальные параметры. Давайте посмотрим на общий
принцип:
{flv width="640" height="480"}test{/flv}
В данном случае, мы добавили плееру найстройки ширины (width) и высоты (height). Как видите, принцип здесь простой: свойство ="значение" . И таких свойств огромное множество, все их можно посмотреть в официальной документации.
Давайте рассмотрим некоторые из них:
Предварительный кадр , т.е. кадр, который будет отображаться на экране, перед нажатием кнопки play .
{flv img="image.jpg"}test{/flv}
как
видите, используется свойство img . В качестве значения, указывается
имя файла, лежащего в директории Ваш_сайт/images/stories/ . Если
предварительное изображение лежит в подпапке, то нужно указывать путь,
относительно директории stories .
Автостарт плеера
{flv autostart="true"}test{/flv}
В
данном случае, используется свойство autostart со значением true
(включен). У этого свойства имеется еще и значение false - т.е.
выключен.
Кнопки стоп и развернуть на весь экран
{flv showstop="true" usefullscreen="true"}test{/flv}
showstop="true" - показывать кнопку стоп, usefullscreen="true" - показывать кнопку разворота на весь экран.
Автоматическое проигрывание только при первом посещении.
Такая тонкая настройка также имеется в данном плеере. Правда она
потребует добавление дополнительных ява скриптов в Ваш шаблон. Если Вас
заинтересовала данная возможность, можете почитать об этом в официальной документации .
СОЗДАНИЕ ПЛЕЙЛИСТОВ В ALVIDEOS RELOADED
Компонент
поддерживает создание плейлистов, т.е. Вы можете задать список файлов,
которые будут выводиться. Для создания, переходим в административную
панель Joomla >> Компоненты >>Allvideos reloaded >>
Manage Playlist и жмем на кнопку создать (в правом верхнем углу) .
Во всплывающем окне, пишем имя плейлиста на английском, жмем кнопку ОК.
Нас перекидывает на страницу, где при желании, можно указать Подробности плейлиста , обычно указывают только заголовок Title , причем здесь уже можно на русском. Жмем на кнопку Сохранить в правом верхнем углу.
Теперь
нужно наполнить наш плейлист треками. Снова идем в Компоненты
>>Allvideos reloaded >> Manage Playlist. Увидим там только
что созданный плейлист. Кликаем по нему, нас перекидывает на уже
знакомую страницу.
Далее жмем кнопку СОЗДАТЬ и попадаем на форму добавления первого трека плейлиста:
Самое
главное здесь это Title - заголовок, который будет отображаться в
плейлисте, Media URL - сам файл, который будет воспроизводиться
(добавляется с помощью уже знакомой нам кнопки AVR Media) и
Preview/Thumbnail image - миниатюра, которая будет отображаться в
плейлисте.
После добавления данных, обязательно жмем СОХРАНИТЬ. Аналогичным образом, добавляем в свой плейлист и остальные треки.
ВНИМАНИЕ: После того, как все треки добавлены не забудьте нажать кнопку СОХРАНИТЬ.
Теперь
остается вывести наш плеер с плейлистом в статье. Это можно сделать как
через кнопку AVR MEDIA так и просто прописав ручками код.
{auto}playlist.xml{/auto}
Вот такой синтаксис. Открывающий и закрывающий теги auto а между ними имя плейлиста с расширением.
Однако это только базовый вывод, и если мы так напишем, то никакого плейлиста не увидим.
Сперва
нужно определиться, где будет выводиться плейлист. Обычно его выводят
снизу, поэтому давайте и мы так сделаем. Идем в расширения
>>менеджер плагинов >>Content - AllVideos Reloaded и в
расширенных параметрах плагина, значение Video screen mode ставим в "Playlist at bottom" .
Теперь снова возвращаемся в код статьи, и дополняем вывод новыми параметрами:
{auto width="400" height="466" displayheight="320"}playlist.xml{/auto}
Здесь мы задаем три параметра: width , height и новый для нас параметр displayheight.
Перед объяснением их значения, давайте посмотрим на результат (у меня только 3 трека в плейлисте) .
Теперь
объясняю. width и height - это ширина и высота плеера, если плейлиста
нет. Но когда он есть, то появляется новый для нас параметр displayheight - который, по сути, определяет высоту только самого плеера, без плейлиста.
По
умолчанию, без плейлиста, размеры плеера width="400" и height="320" . В
моем случае имеется три трека, каждый из которых в плейлисте имеет высоту примерно 42 пикселя. Итого в сумме высота плейлиста 42*3=126 пикселей.
Также следует учесть высоту контрольной панели - 20 пикселей.
Значит суммарная высота 320 +126 + 20 = 466 пикселей.
Проговорим
еще раз: ширина 400 пикселей, общая высота 466 пикселей, высота чисто
содержимого плеера - 320 пикселей. Поэтому, собственно и получается
такой код:
{auto width="400" height="466" displayheight="320"}playlist.xml{/auto}
Есть также и параметр displaywidth - действие его аналогично, но его применяют когда плейлист выводят справа.
НУ
что ж, надеюсь основы работы с плеером Вам понятны. Объяснить все
детали в одной статье просто нереально. Поэтому я закругляюсь :)
Более общирную документацию можно найти на официальном сайте