UPPOD. Бесплатный сервис по сборке плеера.

Видеоплеер uppod.


Сегодня поговорим еще об одном онлайн сервисе. Данный сервис предоставляет возможность собрать аудио или видео плеер для сайта исходя из Ваших предпочтений и потребностей. Причем совершенно бесплатно. Существует, конечно же и версия «Pro», но на мой взгляд, функционала бесплатной версии вполне достаточно практически для любых целей.
Официальный сайт сервиса расположен по адресу . Давайте рассмотрим его возможности.

Первое, что необходимо сделать – пройти простейшую регистрацию. Заходим на сайт, жмем кнопку «Регистрация» и заполняем три поля: «Логин», «Ваш e-mail» и «Пароль». Теперь заходим на сайт под своим именем и приступаем к сборке плеера. Рассмотрим на примере видео плеера. Параллельно узнаем, как вставить видео на сайт.
Начнем с uppod плеера в варианте Flash. Для начала скачаем сам плеер. На вкладке «Собрать плеер» выбираем пункт «Скачать». Скачиваем Плеер Uppod (самый верхний).


 Дальше проходим «Собрать плеер» ⇒ «Видео» ⇒ «Стили».
Нажимаем + чтобы создать новый стиль. Даем стилю осмысленное название и жмем «ОК». Теперь стиль должен инициализироваться. Поэтому просто сидим и ждем пока не появится следующее окно.
Итак, мы попали в конструктор.

Первая вкладка – «Вид».


 Здесь обязательной настройкой является «Размер окна», которая зависит от размера видео которое будем просматривать. Опциональные настройки «Скругление», «Рамка» и «Цвет сайта» меняем по желанию (или настроению). Можно поэкспериментировать с цветом экрана. Градиентом можно добиться неплохих результатов.

Следующая вкладка – «Панель». 


Отвечает за отображение панели навигации.
Основная настройка – расположение панели. Имеет два варианта: в экране и под экраном. Можно поставить флажок «прятать» который содержит 3 варианта: Быстро (панель прячется без анимации), Сразу и Без движения (при неподвижном курсоре). Цвет кнопок, размер кнопок, прозрачность и высоту панели задаем, опять же, исходя из своих предпочтений.

Следующая вкладка «Кнопки» наиболее важная. 


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

Во вкладке «Опции» 


следует обратить внимание на пункт «Загрузка». На мой взгляд, оптимальным является предзагрузка кадра. И трафик пользователя не расходует и не показывает пустой экран (что не есть хорошо для внешнего вида сайта). Остальные опции мало существенны.
И наконец, настройки плейлиста. Данная опция наиболее востребована в аудио плеере. Можете побаловаться, ради любопытства.
На этом сборка плеера завершена. Нажимаем кнопку «сохранить» и на ее месте появляется кнопка «Скачать стили». Не трогаем ее, а переходим в меню «Собрать плеер» ⇒ «Видео» ⇒ «Файлы».



Нажимаем + чтобы добавить файл видео. Прописываем название, путь к файлу, при желании путь к картинкам для файла и файла в плейлисте. Далее обязательно! В выпадающем меню «Стиль» выбираем созданный ранее стиль.
Если файлов несколько, то добавляем их все для этого же стиля. Затем переходим в закладку «Плейлисты» (если файлов несколько, если один, то делать этого не нужно), добавляем плейлист кнопкой +, называем его, присваиваем тот же стиль нажимаем «Создать» и переносим нужные файлы в плейлист.
Нажимаем «Сохранить» и «Скачать». Помещаем скачанный файл рядом с файлом плеера.
Теперь переходим «Собрать плеер» ⇒ «Настройки» и просто нажимаем «Сохранить». Нужную информацию впишем позже.
Все. Возвращаемся в стили, кликаем по нашему стилю и выбираем «Скачать».
Идем в файлы, выбираем наш файл и жмем «Код». Копируем код HTML и временно сохраняем его в любом текстовом файле. Про версию плеера на JavaScript я расскажу в следующем уроке. А пока…
Собираем все файлы плеера в одной папке и можем приступать к установке его на сайт.
Для этого в нужном месте страницы вставляем полученный код. Будет он примерно такой:




Разберем основные позиции в коде, которые мы должны изменить:
  1. Параметр name="movie" value="uppod.swf" и data="uppod.swf – здесь прописывается путь к плееру. Согласно инструкции, путь должен быть абсолютным, типа http://yousite/directory/uppod.swf. Однако, я прекрасно обхожусь и относительным. В примере выше файл плеера лежит в корне сайта вместе с индексным, поэтому путь вообще не указан. И прекрасно работает. . Хотя, конечно, лучше все файлы плеера поместить в отдельную папку.
  2. Параметр st=video76-1968.txt& - путь к файлу стилей. Задаем аналогично предыдущему. Это же относится и к файлу плейлиста, если таковой имеется.
  3. file=http://uppod.net/sample.flv – здесь прописываем адрес файла, который будем воспроизводить. В данном случае файл находится на сервере uppod.net. Если файл на Вашем сервере, то все так же, как в пункте 1. Для просмотра видео с YouTube вставляем либо http://youtube.com/watch?v=ID, либо http://youtu.be/ID. Где ID – идентификатор ролика.
В следующих уроках мы с Вами рассмотрим подключение плеера uppod при помощи javascript, дополнительный функционал плеера и создадим с его помощью радио для сайта.

См. так же: .

5 комментариев :

  1. как убрать экран и оставить панель черного цвета?

    ОтветитьУдалить
    Ответы
    1. Если я правильно Вас понял, то "Стили -> Опции -> Загрузка -> Ожидание"

      Удалить
  2. Виктор, здравствуйте.
    Ну ничего не понятно как прописывать, и откуда брать ссылки.Прописываем название, путь к файлу, при желании путь к картинкам для файла и файла в плейлисте. Далее обязательно! В выпадающем меню «Стиль» выбираем созданный ранее стиль.
    Если файлов несколько, то добавляем их все для этого же стиля. Затем переходим в закладку «Плейлисты» (если файлов несколько, если один, то делать этого не нужно), добавляем плейлист кнопкой +, называем его, присваиваем тот же стиль нажимаем «Создать» и переносим нужные файлы в плейлист.
    Пожалуйста, покажите на картинках как это сделать.

    ОтветитьУдалить
  3. как убрать кнопку открыть видео в открытом окне в uppod

    ОтветитьУдалить
    Ответы
    1. Не совсем понял, какую кнопку нужно убрать. Вообще все кнопки добавляются и убираются во вкладке "кнопки".

      Удалить

Ваш комментарий: