Персональный flash-плеер Uppod и удобное хранилище файлов DropBox

Изначально столкнулся с такой проблемой - захотел опубликовать песню на yvision.kz, но не просто дать ссылку на закачку, а чтобы ее можно было прослушать через вэб-плеер непосредственно в моем блоге.
Да вот незадача,  песня встречается в редко, а там где встречается - нет возможности получить код для встраивания в свой пост.

Вот тут мне и помог превосходный сервис - Uppod.ru

Поэтому, сегодня, я расскажу о двух замечательных вэб-сервисах www.uppod.ru и www.dropbox.com

• Uppod - это персональный вэб-плеер, эдакий мультимедиа комбайн, который проигрывает все что двигается :) Видео, аудио и даже позволяет делать слайд-шоу.  Плюс, такие вкусности как настройка внешнего вида (он поддерживает скины, коих уже сделано немало на любой вкус и цвет) и плейлисты. Подробнее о возможностях этого плеера можно прочитать здесь: возможности плеера Uppod;

• DropBox - самое удобное и грамотное  хранилище файлов, с которыми я до сих пор сталкивался, а перевидал я их немало.

Рисунок №1. Пользовательский вэб-интерфейс сервиса Uppod.ru

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

Инструкция написана для продвинутых блондинок, и людей не особо разбирающихся в компьютерах, поэтому эльфам 80-го уровня просьба сильно не удивляться кропотливому разжевыванию материала.

Шаг 1. Получаем прямую ссылку на нужную песню с Mail.ru

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

1.1. Находим нужную песню в музыкальной коллекции. Кликаем правой кнопкой мыши по серой полоске плеера, чтобы отобразилось выпадающее меню. (Я использую браузер Google Chrome, но в принципе в других браузерах все то же). Выбираем пункт "Просмотр кода элемента", как это показано на рисунке №2.

Рисунок №2. Просмотр кода элемента

1.2. Получение прямой ссылки
После выполнения предыдущего действия нам открывается окно исходного кода, где мы видим прямую ссылку на нужный нам аудио-файл. Дважды кликаем по выделенному фрагменту, после чего у нас появляется возможность  скопировать эту ссылку в буфер обмена.

Рисунок №3. Получение ссылки на аудиофайл

В данном случае ссылка выглядит так:

http://music.my.mail.ru/05091c0518001b0704190505070a12000503150500515d56015302065b0954070d0906050c5a0a040b5f530d035e0557045807.mp3

Вот мы и добыли необходимую нам прямую ссылку на песню.

Шаг 2. Регистрируемся на сервере Uppod.ru и добавляем ссылки на файлы, которые будем проигрывать в плеере

Регистрация на сервере у меня заняла меньше минуты. И особой сложности не представляет

2.1. Добавление скинов
В первую очередь рекомендую добавить понравившиеся скины. Так как, в дальнейшем, при добавлении песни необходимо указать скин. В принцпе этот шаг тоже не обязателен. Можно это сделать и потом, а песню добавить со скином по умолчанию, и после добавления скина отредактировать песню, чтобы она отображалась с нужным скином. Но будем методичны и последовательны.
Добавление скинов к своему плееру не представляет никакой сложности.  Для этого нужно выбрать пункт  Скины (1). Затем выбираем к какому плееру мы хотим добавить скин (аудио (2), видео или фото) и выбрав понравившийся, нажимаем кнопку Сохранить (3), как это показано на рисунке ниже, и подтверждаем действие (4):

Рисунок №4. Добавление скинов для плеера

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

2.2. Добавление ссылок
Добавление ссылок на медиа-файлы тоже не представляет особой сложности и интуитивно понятно. Выбираем закладу Плеер (1), затем Аудио (2), после чего Файл(3). Кликаем по кнопке с плюсом (4), вводим название песни (5), после чего вставляем прямую ссылку (6) на нужный нам медиа-файл (которую мы узнали в шаге №1), и выбираем понравившийся стиль (7). Стиль - это и есть наш скин, который мы добавили в шаге №2.1 (правда на скриншоте снизу показан выбор скина google, а мы добавляли в предыдущем шаге скин apple). После чего мы нажимаем кнопу ОК. И все.

Рисунок №5. Добавление ссылки на медиа-файл

В итоге у нас получиться такой же вид, какой показан на рисунке №1.
Кликаем по ссылке на медиа-файл, после чего нам отображается меню (рисунок №6) этой песни, мы можем ее отредактировать, удалить, получить код элемента для встраивания в своем блоге, или проиграть в плеере и увидеть результат.

Рисунок №6. Меню ссылки на медиа-файл

И тут нас ожидает сюрприз. Если мы попытаемся получить код нашей песни для встраивания в блог, то сервис нам сообщит, что нам необходимо настроить плеер на своем сервере. Да, вот так.
Что это значит. Это значит что сам плеер, должен находиться на нашем хостинге. У кого нет своего хостинга, или кто не знает что это такое - особо переживать не стоит. Эти проблемы решаются довольно легко.

Шаг №3. Загрузка плеера на хостинг и получение на него ссылки

Для начала необходимо скачать к себе на компьютер файл плеера и скины к нему.

3.1. Скачиваем плеер
Создаем у себя на компьютере папку player, куда мы скачаем сам плеер и все свистелки-перделки необходые для его работы. Далее нажимаем на ссылку скачать плеер, как это показана на рисунке №7.

Рисунок №7. Ссылка на загрузку файла плеера

Плеер скачивается в виде zip-архива (130 Кб). Распаковываем архив, внутри него находиться всего один файл uppod.swf - он то нам и нужен, это и есть непосредственно сам плеер. После распаковки, с холодным умом и горячим сердцем архив можно грохнуть, дабы не мешался нам в дальнейшем под ногами.

3.2. Скачиваем скины
Дальше нам необходимо скачать добавленные нами ранее скины. Для этого заходим на вкладку Плеер (1) > Аудио(2) и выбираем пункт Стили (3), затем кликаем один раз по названию скина (4) и выбираем кнопку Скачать (5) как это показано на рисунке №8.

Рисунок №8. Сохранение скинов на свой компьютер

Скины сохраняются в виде текстового файла с именем похожим на audio48-147.txt. Скины так же сохраняем в ранее созданную нами папку player. Необходимо скачивать все скины, которые вы к себе добавили.

Ну вот, большую часть работы мы уже сделали. Теперь необходимо залить скачанные нами плеер и скины на свой хостинг.

3.3. Создание своего хранилища файлов.
У кого есть свой хостинг, может пропустить этот шаг, и сразу перейти к шагу №4. У кого же его нет, рекомендую воспользоваться сервисом Drupbox
Drupbox — отличный способ хранить и публиковать свои файлы в интернете. Если у вас нет хостинга, то такой вариант довольно прост и ничего не стоит — бесплатно можно использовать 2 ГБ дискового пространства, сервис использует быстрый и надежный хостинг S3 от Amazon.

Для того чтобы воспользоваться этим сервисом, необходимо скачать программу с официального сайта и установить на свой компьютер (нажимаем большую прямоугольно-синюю кнопку Download Drupbox, и ожидаем загрузки файла весом 12,8 Мб). После загрузки запускаем скачанный файл (Dropbox 0.7.110.exe). Установка простая и не требует специальных познаний. Вкратце - нажимаем на кнопку Install и ждем окончания установки. После окончания копирования файлов, установщик спросит, есть ли у вас аккаунт DroupBox, просто нажмите Next, и заполните все регистрационные поля, и далее все время нажимайте Next. Можно также дополнительно указать место, где будет находиться папка My Dropbox (если ничего не будете изменять в настройках установщика, по умолчанию, в Windows, она будет находится в папке «Мои документы»). По окончании установки нажмите Finish.
В папку My Dropbox можно складывать различные файлы, которые будут автоматически закачиваться на хостинг. В этом и заключается вся прелесть данного сервиса. Не надо париться с загрузкой на сервер, ожиданием пока этот файл загрузиться, не закрывая при этом браузер. А вдруг связь оборвется? Все придется делать заново. А тут все просто, записал нужные файлы в папку My Dropbox на своем компьютере, и как по волшебству они оказываются уже на сервере (но физической загрузки на сервер конечно же придется подождать).

Как только вы запишите файлы в папку My Dropbox они тут же начнут переписываться на хостинг, о чем будет сигнализировать значек в трее (в нижнем правом углу, рядом с часами)

Файлы, загружаемые в данный момент на сервер будут отображаться в проводнике синей иконкой, а уже сохранившиеся - помечаются зеленой, как это показано на рисунке ниже.

3.4. Загрузка плеера на хостинг.
После того как вы установили программу Drupbox нам необходимо залить скачанный нами плеер и скины на наше вновь созданное хранилище файлов. Для этого просто перемещаем созданную нами ранее папку player в папку Public, которая находиться в папке My Dropbox (как уже было сказано, по умолчанию она будет находится в «Моих документах»).
Ждем пока файлы загрузятся на сервер.

3.5. Получаем ссылку на наш плеер, который мы записали на Dropbox.
Кликаем правой кнопкой мыши на закачавшийся плеер (файл uppod.swf в папке Мои Документы > My Dropbox > Public > Player и выбираем в появившемся контекстном меню Dropbox > Copy public link, как показано на рисунке №9:

Рисунок №9. Получение ссылки на плеер

Теперь в буфере обмена хранится ссылка на наш плеер на хостинге.

Шаг №4. Настройка плеера Uppod

Далее нам надо следует настроить плеер Uppod на сайте uppod.ru. Идем на страницу настроек плеера и вставляем ссылку которую мы получили в шаге 3.5 - в поле «Путь к файлу плеера». Для стилей и плейлистов нужно указать путь к самой папке. Вот так примерно это будет выглядеть:

Вот и все. Настройка закончена. Теперь идем Плеер > Аудио > Файлы, кликаем по добавленной ранее в Uppod ссылке на песню и получаем рабочий код для вставки в свой блог.

В дальнейшем, достаточно просто создать ссылку на ваш медиа-файл, и получить его код для вставки. Все делается в два шага :)

Результат работы можно посмотреть в здесь: Un Solo Minutо...

Желаю успехов!