8 (39161) 6-30-31

Мультимедийный контент в интернет завоевывает все большую популярность. Вебмастерам приходится довольно часто сталкиваться с установкой видео либо аудио проигрывателей на свои сайты. Конечно добавить видео с youtube или rutube не так уж и сложно, скажите Вы. Но что делать, если нужно проиграть видео/аудио с собственного сервера? Например, организовать предварительный просмотр фильма, либо прослушивание песни перед скачиванием? Вот здесь обычно и начинаются проблемы.

Некоторые возможности компонента:

- может воспроизводить многие форматы видео и аудио (.flv, .swf, .mov, .mp4, .wmv, .avi, .mpg, .mpeg, .rm, .ram, .wma, .mp3 и др.);

- Поддерживает более 35 видео провайдеров , с автоматической обработкой (надо только указать ссылку на источник);

- Позволяет ставить свой логотип поверх видео;

- Позволяет ставить предварительное изображение, которое будет показываться перед началом проигрывания видео;

- Имеет глобальные настройки, и множество атрибутов для индивидуальной настройки каждого отдельного видео/аудио;

- Позволяет создавать плейлисты ;

 

УСТАНОВКА И НАЧАЛЬНЫЕ НАСТРОЙКИ:

Установка выполняется стандартным образом, через расширения >> установить/удалить . После успешной установки, в разделе компоненты появится Allvideos reloaded, в менеджере плагинов - плагин Content - AllVideos Reloaded , также появится модуль, с этим же названием, и кнопка AVR Media в редакторе статей.

Первым делом нужно перейти в директорию Ваш_сайт/images/stories/ и создать там две папки: videos (для видеофайлов) и audio (для аудио) . Теперь, если Вы хотите проигрывать видеоролики со своего сайта, потребуется закачать нужные ролики в созданные ранее папки.

Сразу отмечу, что несмотря на то, что плеер воспроизводит массу различных форматов, самыми оптимальными из них являются flv - для видео, и mp3 - для аудио. Именно эти форматы используют большинство сайтов, т.к. файлы в таких форматах, имеют наименьший размер, при наивысшем качестве. Перекодировать один формат в другой, помогут специальные программы - конверторы, например Any Video Converter .

Добавление видео/аудио в статью:

Предположим, я закачал в папку videos, файл test.flv а в папку audio - music.mp3 . Теперь, если мне необходимо вывести в статье видеоплеер, и проиграть там файл test.flv , я пишу в нужном месте текста следующую конструкцию:

И на странице появляется такой проигрыватель (это картинка, так что не пытайтесь запустить):

Аналогично, если мне нужно проиграть аудио файл, я пишу:

и получаю на странице вот такой проигрыватель:

Обратите внимание что в имени файла, мы не пишем расширение, оно указывается в фигурных скобках. Также мы не пишем полный путь к файлу, т.к. плагин по умолчанию ищет его в указанных ранее папках videos и audio . Заметьте также, что все символы пишутся в нижнем регистре и что названия файлов должны быть на английском.

Конструкции для вставки файлов других форматов, можете посмотреть здесь .

Если по каким-либо причинам, в папке videos мы решили создать подпапку, например, 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 - действие его аналогично, но его применяют когда плейлист выводят справа.

НУ что ж, надеюсь основы работы с плеером Вам понятны. Объяснить все детали в одной статье просто нереально. Поэтому я закругляюсь :)

Более общирную документацию можно найти на официальном сайте