Приветствую Вас, Гость
Главная » Файлы » скрипты

создаём плеер для сайта
08.06.2011, 21:13

Поэтапная установка Мью-плеера (mjuChrono) на сайт UCOZ

Перед тем, как приступить к непосредственной установке плеера на сайт, хотелось бы немножко рассказать про сам плеер. Во-первых, это mp3 плеер для сайта.

Что в нем необычного и чем он отличается от других плееров для сайта?

1. Его можно разукрасить как вашей душе угодно. Сделать симпотичные кнопочки, разукрасить меню, а главное это можно выполнить в цветовой гамме вашего сайта.
2. Он прост в установке, тем более ниже я ее всю расписал ну очень-очень подробно.
3. С технической точки зрения он тоже крут. Он умеет проигрывать стока треков, сколько вы пожелаете, закачайте столько треков сколько у вас есть, хоть всю коллекцию битлз. Он умеет запоминать номер трека и позицию в треке во время переходов по сайту. 
Кроме этого в его функционале имеется режим повтора трека, проигрывание треков в случаной порядке и т.д.

Итак!
Приступим к установке mp3 плеера для ucoz.

За пример был взят сайт toppleer.ucoz.ru

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

Вводный раздел или как войти в админскую панель на ucoz-e (чисто для тех, кто забыл :)

Вход на ваш сайт в качестве администратора:

- необходимо ввести свой e-mail и пароль uNet профиля в форме входа на сайте.

Вход в панель управления сайта на ucoz:

- нажмите на ваш никнейм, появится окошко с информацией о пользователе;



- в пункте Общее выбрать Вход в панель управления;


- в открывшемся окошке ввести пароль администратора Вебтопа, ну и конечно код безопасности


Непосредственная установка плеера на ваш сайт

Итак, как же все-таки выглядит установка плеера для сайта ucoz.

Закачка плеера с сайта разработчиков playmju.ru

Качаем от сюда плеер для сайта mjuChrono или mjuChrono optimal
Сохраняем скаченную папку на компе.

Составление и редактирование плейлиста

1. Вопрос от куда брать музыку? Проще всего закачать нужные вам треки на ваш сайт с своего компьютера.

2. Как закачать на сайт треки?

- Войдя в панель управления вашего сайта, необходимо зайти в файловый менеджер


- Далее выбирайте нужную вам песню на компе и загружайте ее на ваш сайт, удобнее будет под это создать отдельную папку (как видно из рисунка, я создал папку playmju и загрузил туда 5 треков исполнителя Armin van Buuren);


3. Далее действуем по инструкции playmju.ru/setup и составляем плейлист из наших закаченных на сайт треков.

- Открываем закаченную ранее на комп папку с плеером, видим файл playlist в формате .mpl, открываем его в блокноте, notepad или в другом текстовом редакторе и редактируем плейлист;

Пример:

Т.к. мы вставлем композиции, а не радио, то наш плейлист (из 5 треков) составляется по этому принципу:

<track artist="Исполнитель" title="Название" url="ссылка на mp3" /> 

Наш пример:

<track artist="Armin van Buuren" title="Wall of Sound" url="http://toppleer.ucoz.ru/playmju/01-Wall_of_Sound-feat-Justine_Suissa-.mp3" /> 

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


Итак, мы получаем список из 5 треков:

<track artist="Armin van Buuren" title="Wall of Sound" url="http://toppleer.ucoz.ru/playmju/01-Wall_of_Sound-feat-Justine_Suissa-.mp3" />
<track artist="Armin van Buuren" title="Empty State" url="http://toppleer.ucoz.ru/playmju/02-Empty_State-feat-Mic_Burns-.mp3" />
<track artist="Armin van Buuren" title="Shivers" url="http://toppleer.ucoz.ru/playmju/03-Shivers.mp3" />
<track artist="Armin van Buuren" title="Golddigger" url="http://toppleer.ucoz.ru/playmju/04-Golddigger-feat-Martijn_Hagens-.mp3" />
<track artist="Armin van Buuren" title="Zocalo" url="http://toppleer.ucoz.ru/playmju/05-Zocalo-feat-Gabriel_Dresden-.mp3" />

- После редактирования файла playlist.mpl, не забудьте его пересохранить;

- Далее вам необходимо сохранить на вашем сайте на ucoz файл с плейлистом (playlist.mpl) и файл с плеером (mju.swf), который хранится в той же папке на вашем компе.


Настройка и разукрашивание плеера

1. На сайте playmju.ru/setup переходите во вторую часть настройки плеера.
Заполняете пункты меню согласно примеру на картинке.


2. В 3-ем разделе отметьте нужные вам меню (совет: не меняейте защиту от кеширования плейлиста и использование unicode-кодировки). 
3. В 4-ом разделе выбирайте цвет плеера и кнопок по вашему усмотрению. Тут советов не даю, на вкус и цвет...как говорится.
4. В 5-ом разделе скопируйте полученный код.

Последнии настройки на вашем сайте

1. В панеле управления сайтом войдите в меню Управление дизайном.


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


3. Выбрав например Первый контейнер, как делал это я, вставьте тот код, который вы копировали с сайта playmju.ru в код этого контейнера
Я его вставил прямо в самое начало, поэтому плеер на сайте находится сверху Меню.
Вообще код можно вставить куда угодно, например после статистики (пример на картинке) или после меню сайт
Пробуйте и у вас все получится! 

4. Для последующего редактирования плейлистов, Вам просто необходимо изменять содержимое файла playlist.mpl, по тому же приниципу как и ранее, просто редактировать в текстовом редакторе и заново сохранять в Файловом менеджере в панеле управления вашего сайта.

Ну вот мы и разобрались с плеером для сайта ucoz, слушайте и наслаждайтесь вашим mp3 плеером на сайте.


Внимание!!!

Нашелся баг связанный с некорректным отображением флэшек юкозом  в IE (Internet Explorer), а именно вместо флэшки ucoz делает окошко с рамкой, если у вас такое выявилось, то попробуйте в коде плеера в самом первом теге внутри object-a убрать параметры classid="....." и codebase=".....". Опытным путем проверено - помогает.
Если вы не смогли поставить плеер на ваш сайт по какой-либо причине и если вы хотите спросить совета по его установке, то вместе с описанием проблемы УКАЗЫВАЙТЕ АДРЕС СВОЕГО САЙТА, без этого я ничем не  смогу вам помочь.

Если вам пригодилась моя инструкция и вы хотите выразить благодарность в денежном эквиваленте, то ниже указан номер кошелька Яндекс.Денег, на который вы можете перевести вашу помощь, за что я вам буду искренне благодарен и с удовольствием выпью пива за ваше здоровье :) 

Категория: скрипты | Добавил: OLOLO
Просмотров: 2084 | Загрузок: 0 | Комментарии: 2 | Рейтинг: 1.0/1
Всего комментариев: 1
1 7even  
0
Всё сделал по инструкции, но плеер не появился на сайте.Что делать?
вот сайт помогите пожалуйста http://f1rst-team.ucoz.ru/

Имя *:
Email *:
Код *: