Блог 1o3:

в окно смотри xD

Главная » 2008 » Декабрь » 17 » UAPlayer работает

UAPlayer работает

17:17

Как и обещал в предыдущем посте отладил обработчик собственного тега(о его виде, настройке и так далее - подробнее позже).

Суть заключается в том, что вместо стандартного плеера от uCoz [аudio][/audio] теперь можно использовать свой полностью настраиваемый плеер.

Подробнее о том как это сделать - смотрите ниже, а пока небольшой скриншот примера работы:

Понравилось? Тогда идем дальше. Для работы с плагином нам потребуется подключить библиотеку jQuery, библиотека SWFObject, ну и сам плагин.

Подключаем все это дело, к примеру так:

Code

И смотрим что делать дальше:

1. Определимся, что видео у нас будет обрабатываться в некоторых элементах, которые имеют класс "flash", т.е.

. Это все настраиваемо, вместо этого класса, можно выбрать класс комментариев, поста, сообщения на форуме итд.

2. Делаем такой кусочек когда между :

Code

$(function(){
  var flashvars = {
  skin : "pink",
  comment: "<b>Main post UPlayer</b>",
  player: "http://flv-mp3.com/i/pic/ump3player_500x70.swf"
  };
  $(".flash").UAPlayer({width:470, height: 70, flashvars : flashvars, pname : "way"});

});

Нужные треки будут обрабатываться плеером с сайта flv-mp3. Можете "собрать" модель как там предлогают и внимательно изучить код, который вам дается.

Там есть такой тег params с name="flashvars", очень похоже на то, что мы с вами записали в коде наверху. И правда, var flashvars = {} - как раз те переменные, которые передаются во флеш, т.е. если у вас другой плеер переменные будут другие(!!!), ровной как и pname в ф-ии плагина. Этот параметр задает какая переменная во flashvars отвечает за ссылку на файл.

Для того, чтобы передавать более сложные запросы, советую ознакомится с объектами в javascript.

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

player - ссылка на плеер
width, height - ширина, высота
version - версия FlashPlayer'a
pname - название флеш-переменной для ссылки на трек
params - параметры для flash'a(подробнее в гуглдоках)
flashvars - флеш-переменные(подробнее в гуглдоках)
attributes - атрибуты (подробнее в гуглдоках)

Продолжим. Мне тоже хотелось бы, чтобы на этом все завершилось, но самого главного я не сказал smile Внутри наших блоков(с заданным классом), нужно прописать теги, к примеру:

Code

Все они обработаются в отдельный плеер wink Пока все smile

Тег: <%U.APLAYER{http://domain.ru/cat/cat2/.../catN/file.mp3}%>
Пример моей страницы:

Code

<html>
<head>
<script src="http://1o3.ucoz.ru/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script src="jquery.uplayer.js" type="text/javascript"></script>

<style>
.flash{
  border : 3px solid pink;
  margin : 5px;
  padding : 5px;
  text-align : center;
}
.nflash{
  border : 3px solid grey;
  margin : 5px;
  padding : 5px;
  text-align : center;
}
b{
  font-size: 17px;
  color: #111111;
  font-weight: bold;
}
</style>

</head>
<body>
<script>

$(function(){
  var flashvars = {
  skin : "pink",
  comment: "<b>Main post UPlayer</b>"
  };
  var flashvars2 = {
  skin : "blue",
  comment: "<b>Comment UPlayer2</b>"
  };
  $(".flash").UAPlayer({width:470, height: 70, flashvars : flashvars, pname : "way"});
  $(".nflash").UAPlayer({width:470, height: 70, flashvars : flashvars2 , pname : "way"});
});

</script>
<div align="center">
<div style="width:500;" align="left">
<b>Первый div</b>
<div class="flash">
<%U.APLAYER{http://cs1660.vkontakte.ru/u18039617/audio/89a10cb9af3f.mp3}%>
<%U.APLAYER{http://cs1660.vkontakte.ru/u18039617/audio/89a10cb9af3f.mp3}%>
<%U.APLAYER{http://cs1660.vkontakte.ru/u18039617/audio/89a10cb9af3f.mp3}%>
</div>
<br/>
<b>Второй div</b>
<div class="flash">
<%U.APLAYER{http://cs1660.vkontakte.ru/u18039617/audio/89a10cb9af3f.mp3}%>
</div>
<br/>
<b>Второй div с другим классом</b>
<div class="nflash">
<%U.APLAYER{http://cs1660.vkontakte.ru/u18039617/audio/89a10cb9af3f.mp3}%>
</div>

</div>
</div>

</body>
</html>

Для создания видео-плеера используем UVPlayer.
Принцип такой же, другой только тег

Категория: UcoZ | Просмотров: 10734 | Добавил: DeT | Теги: ucoz, player, bbcodes

Всего комментариев: 24

1 2 3 4 5 »

Порядок вывода комментариев:

16.07.2013

speecerfemy говорит:

Извините за топик. Удалите пожалуйста.

30.01.2013

Borislav7675 говорит:

тут на официальном ресурсе собран большой ассортимент умных статей про http://medbaz.com/news-more-902.html - ветрянка.

30.01.2013

Kornei9231 говорит:

здесь на ресурсе собран громадный ассортимент умных статей про http://ublaze.ru/forum/ftopic1113.html - Прошивка Zenithink ZT-180 ePad

15.11.2012

scubmisassy говорит:

[B - Эту вещь надо попробовать каждому!!!

Новый интернет-браузер с поддержкой аппаратного ускорения!!! Сайт открываются со скоростью света!!!
Скачать здесь:
[/B -
UPD
Добавлено через 5 минут:
[B - К сожалению, оффициальный сайт сайт сейчас не работает, а ссылка была удалена.
Скачивайте здесь http://firefoxik.ru/skachat-firefox.html - http://firefoxik.ru/skachat-firefox.html[/B -

14.11.2012

Alla4569 говорит:

тут на вышеприведенном ресурсе подобран огромный ассортимент последних новостей о ` http://www.infosuper.ru/ - бесплатное обучение.

1-5 6-10 11-15 16-20 21-24

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]