Вставить видео и аудио в joomla просто! AllVideos Reloaded: установка, настройка, создание плейлистов. Дата: 28.
04. 2010.
AllVideos Reloaded: установка, настройка, создание плейлистов. Справа видим настройки плагина, включающие в себя 3 вкладки.
Джумлоплеер, или Как добавить аудио и видео на сайт Joomla Плагин AllVideos позволяет вставить на сайт Joomla аудио. Перерыл пол-нета и только у Вас нашёл внятную инструкцию. Июн 3, 2014 в 0:43. Плагин AllVideos - вставка видео в контент Joomla. Включает 3 шаблона отоображения видео-проигрывателя: Classic, Framed и Responsive и др. Инструкции для "чайников". Пошаговый курс в Joomla 3 + gantry framework Плагин AllVideos : как вставить видео и аудио в статью. New version 4.7 out now, fully compatible with Joomla! 1.5, 2.5 & 3.x & fully responsive! ***.
Мультимедийный контент в интернет завоевывает все большую популярность. Вебмастерам приходится довольно часто сталкиваться с установкой видео либо аудио проигрывателей на свои сайты. Конечно добавить видео с youtube или rutube не так уж и сложно, скажите Вы. Но что делать, если нужно проиграть видео/аудио с собственного сервера? Например, организовать предварительный просмотр фильма, либо прослушивание песни перед скачиванием? Вот здесь обычно и начинаются проблемы.
В данном уроке мы рассмотрим решение данной проблемы в Joomla. Нашим помощником будет компонент AllVideos Reloaded. который является наиболее популярным расширением из данной серии. Хотя, честно сказать, не лишен недостатков. Перед тем, как знакомиться с компонентом, подумайте, а нужен ли он вообще в Вашем случае? Если Вам необходимо просто вставить небольшой видеоролик, то нет нужды устанавливать расширения, которые, в определенной степени, тормозят сайт. Можно просто залить видео на youtube или rutube, получить там html код и вставить в нужное место статьи (детальнее описано здесь ).
Однако если ситуация иная, тогда смело можете приступать к чтению :). Некоторые возможности компонента:. - может воспроизводить многие форматы видео и аудио (. 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 - максимально возможный размер плейлиста. Индивидуальные настройки:. В принципе, через эти настройки, можно переопределить и даже дополнить практически все глобальные параметры. Давайте посмотрим на общий принцип:.
В данном случае, мы добавили плееру найстройки ширины (width) и высоты (height). Как видите, принцип здесь простой: свойство ="значение". И таких свойств огромное множество, все их можно посмотреть в официальной документации. Давайте рассмотрим некоторые из них:. Предварительный кадр. т.
кадр, который будет отображаться на экране, перед нажатием кнопки play. как видите, используется свойство img. В качестве значения, указывается имя файла, лежащего в директории Ваш_сайт/images/stories/. Если предварительное изображение лежит в подпапке, то нужно указывать путь, относительно директории stories.
Автостарт плеера. В данном случае, используется свойство autostart со значением true (включен). У этого свойства имеется еще и значение false - т.
выключен.
Кнопки стоп и развернуть на весь экран. 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 а между ними имя плейлиста с расширением. Однако это только базовый вывод, и если мы так напишем, то никакого плейлиста не увидим. Сперва нужно определиться, где будет выводиться плейлист. Обычно его выводят снизу, поэтому давайте и мы так сделаем. Идем в расширения >>менеджер плагинов >>Content - AllVideos Reloaded и в расширенных параметрах плагина, значение Video screen mode ставим в "Playlist at bottom".
Теперь снова возвращаемся в код статьи, и дополняем вывод новыми параметрами:. Здесь мы задаем три параметра: width. height и новый для нас параметр displayheight. Перед объяснением их значения, давайте посмотрим на результат (у меня только 3 трека в плейлисте). Теперь объясняю. width и height - это ширина и высота плеера, если плейлиста нет. Но когда он есть, то появляется новый для нас параметр displayheight - который, по сути, определяет высоту только самого плеера, без плейлиста.
По умолчанию, без плейлиста, размеры плеера width="400" и height="320". В моем случае имеется три трека, каждый из которых в плейлисте имеет высоту примерно 42 пикселя. Итого в сумме высота плейлиста 42*3=126 пикселей. Также следует учесть высоту контрольной панели - 20 пикселей.
Значит суммарная высота 320 +126 + 20 = 466 пикселей. Проговорим еще раз: ширина 400 пикселей, общая высота 466 пикселей, высота чисто содержимого плеера - 320 пикселей.
Поэтому, собственно и получается такой код:. Есть также и параметр displaywidth - действие его аналогично, но его применяют когда плейлист выводят справа. НУ что ж, надеюсь основы работы с плеером Вам понятны.
Объяснить все детали в одной статье просто нереально. Поэтому я закругляюсь :). Более общирную документацию можно найти на официальном сайте. Также хочу отметить, что есть еще одно похожее расширение - allvideos plugin. В чем-то даже удобнее, но с меньшим функционалом. Скачать AllVideos Reloaded 1.