UAPlayer работает | 17:17 |
Как и обещал в предыдущем посте отладил обработчик собственного тега(о его виде, настройке и так далее - подробнее позже). Суть заключается в том, что вместо стандартного плеера от uCoz [аudio][/audio] теперь можно использовать свой полностью настраиваемый плеер. Подробнее о том как это сделать - смотрите ниже, а пока небольшой скриншот примера работы:
Понравилось? Тогда идем дальше. Для работы с плагином нам потребуется подключить библиотеку jQuery, библиотека SWFObject, ну и сам плагин. Подключаем все это дело, к примеру так:
Code <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> И смотрим что делать дальше: 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. Список возможных параметров:
Продолжим. Мне тоже хотелось бы, чтобы на этом все завершилось, но самого главного я не сказал Внутри наших блоков(с заданным классом), нужно прописать теги, к примеру: Code <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> Все они обработаются в отдельный плеер Пока все Тег: <%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 | Просмотров: 10751 | Добавил: DeT | Теги: ucoz, player, bbcodes |
Всего комментариев: 24 | 1 2 3 4 5 » | |||||
| ||||||
1-5 6-10 11-15 16-20 21-24 | ||||||