Фильтр по:
  

Как сделать BB-коды [video] и [audio] и свой плеер на юКоз

Как сделать...

  • Страница 1 из 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как сделать BB-коды [video] и [audio] и свой плеер на юКоз (Подробная инструкция с примерами (14-03-2011))
Как сделать BB-коды [video] и [audio] и свой плеер на юКоз
Дата: Суббота, 12.03.2011, 16:45 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown
Как сделать BB-коды [video] и [audio] и свой плеер к ним на форум

Материалы по теме:
Как сделать свои BB-коды для форума

Дополнительные смайлики на форум

 
Дата: Суббота, 12.03.2011, 20:34 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Как сделать BB-коды [video] и [audio] и свой плеер к ним на форум.

Как и предыдущая заметка «Как сделать свои BB-коды для сайта/форума» - тема достаточно рассмотрена, и всё же ...
Задача - сделать две кнопки, при клике на которые появлялось алерт-окошко с полем для вставки ссылки, и код добавлялся в форму.
Сами кнопки могут быть представлены в виде инпутов или картинок, что по сути - не особо важно.

Вот их код:
Обычные инпут-кнопки:
Code
<span style="padding-right:1px;">
<input type="button" id="audio" class="codeButtons" onclick="tag_audio();return false;" value="audio" title="Подключение аудио">
</span>
<span style="padding-right:1px;">
<input type="button" id="video" class="codeButtons" onclick="tag_video();return false;" value="video" title="Подключение видео">
</span>


Кнопки-картинки:
Code
<span style="padding-right:1px;">
<img onclick="tag_audio();return false;" src="/_content/_publ/2011/bb-code/a.png" width="57" height="18" title="Подключение аудио" alt="audio" />
</span>
<span style="padding-right:1px;">
<img onclick="tag_video();return false;" src="/_content/_publ/2011/bb-code/v.png" width="57" height="18" title="Подключение видео" alt="video" />
</span>


Скрипт обработчик события клик для этих кнопок:
Code
<script type="text/javascript">
function tag_audio(){
var enterAudio=prompt("Введите ссылку на видео файл","http://any_site.com/music.mp3");
if(!enterAudio||enterAudio=='http://any_site.com/music.mp3'){return;}
doInsert("[audio]"+enterAudio+"[/audio]","",false);                   
};
function tag_video(){
var enterVideo=prompt("Введите ссылку на аудио файл","http://youtube.com/watch?v=DbzFNj8HVmc");
if (!enterVideo||enterVideo=='http://youtube.com/watch?v=DbzFNj8HVmc'){return;}
doInsert("[video]"+enterVideo+"[/video]","",false);
};
</script>

Функция doInsert(); - присутствует на сайтах в системе uCoz.
Как и многие другие, по умолчанию. ヅ ...

Добавляются кнопки к форме - так же как и в заметки, упомянутой выше - то есть - в шаблон - «Форма добавления сообщения», обычно, после оператора, выводящего BB-коды - $BBCODES$.
Скрипт добавляется в тот же шаблон, после формы, то есть - в самый конец кода.

- Короче, ничего сложного.

☑ Вот пример того, что должно получится ....

 
Дата: Суббота, 12.03.2011, 21:42 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 А теперь, рассмотрим типичную ситуацию, когда есть желание заменить стандартный юКозовский плеер на свой.
Тут можно пойти двумя принципиально-различными путями:

1. Делать свои кнопки, отличные от стандартных, и прописывать обработчик этих кодов.

2. Обрабатывать скриптом блок со стандартным плеером, заменяя HTML содержимое на своё.


Ниже, рассмотрю вариант со своими BB-кодами, и, соответственно, своим плеером.

Внедрение кнопок и обработчика для аудио-плеера и видео-плеера.
Для начала, придумаем свои BB-коды, допустим, вот такие [_mp3] и [/mp3] - для аудио-плеера, и [_flv] и [/flv] - для видео-плеера, соответственно.
Вот кнопочки для них:
Обычные кнопки:

Code
<span style="padding-right:1px;">
<input type="button" class="codeButtons" onclick="tag_audio();return false;" value="MP3" title="Подключение аудио">
</span>
<span style="padding-right:1px;">
<input type="button" class="codeButtons" onclick="tag_video();return false;" value="FLV" title="Подключение видео">
</span>

Кнопки-картинки:

Code
<span style="padding-right:1px;">
<img onclick="tag_audio();return false;" src="/_content/_publ/2011/bb-code/mp3.png" width="40" height="18" title="Подключение аудио" alt="MP3" />
</span>
<span style="padding-right:1px;">
<img onclick="tag_video();return false;" src="/_content/_publ/2011/bb-code/flv.png" width="40" height="18" title="Подключение видео" alt="FLV" />
</span>

 
Дата: Воскресенье, 13.03.2011, 10:26 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Плеер, возьму от uppod - доступна бесплатная версия.
Скачиваете архив с плеером, распаковываете, заливаете флешку на сайт, запоминаете (записываете) ссылку на неё - пригодится ... )
Там же, на сайте, есть конструктор, в котором можно изменить внешний вид плеера, добавить/удалить кнопки, настроить цветовое оформление, размеры, прочее, и тут же получить HTML-код для вставки на сайт.
Вот он-то нам и нужен.

Вот так выглядит код моего плеера, который используется в примерах:
Для аудио-файлов:
Code
<object type="application/x-shockwave-flash" data="/_content/_publ/2011/bb-code/uppod_v0947.swf" width="450" height="55"><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><param name="movie" value="/_content/_publ/2011/bb-code/uppod_v0947.swf" /><param name="flashvars" value="st=/_content/_publ/2011/bb-code/a_pl450x63-dp3.txt&file=http://casting.mp3.ru/upload/audio/LikBezz_02untilmylastbreathmp3_Oct_10_07_22_35_GMT_2010_1066689958.mp3" /></object>


Для видео-файлов:
Quote
<object type="application/x-shockwave-flash" data="/_content/_publ/2011/bb-code/uppod_v0947.swf" width="500" height="375"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><param name="movie" value="/_content/_publ/2011/bb-code/uppod_v0947.swf" /><param name="flashvars" value="st=/_content/_publ/2011/bb-code/v_500x375_hdp4.txt&file=http://www.youtube.com/watch?v=tpehI7qHRZE" /></object>

Где:
/_content/_publ/2011/bb-code/uppod_v0947.swf - ссылка на файл плеера. В обоих случаях.
st=/_content/_publ/2011/bb-code/a_pl450x63-dp3.txt - ссылка на файл стилей - актуально только если устанавливали и скачивали стили, не обязательный параметр.
file=http://www.youtube.com/watch?v=tpehI7qHRZE - ссылка на медиа-файл.
...



☑ Смотреть в живую ...

В данном случае, нас интересует фрагмент кода, обоих плееров, где указана ссылка на медиа-файл, то бишь вот этот:
Quote (Code)
<param name="flashvars" value="comment=<b>Nightwish</b> - «Sleeping Sun» &st=/_content/_publ/2011/bb-code/v_500x375_hdp4.txt&file=http://www.youtube.com/watch?v=tpehI7qHRZE" />

- В видео-плеере, и почти идентичный в аудио-плеере:
Quote (Code)
<param name="flashvars" value="comment=<b>Tarja</b> «Until My Last Breath»&st=/_content/_publ/2011/bb-code/a_pl450x63-dp3.txt&file=http://casting.mp3.ru/upload/audio/LikBezz_02untilmylastbreathmp3_Oct_10_07_22_35_GMT_2010_1066689958.mp3" />


По этим местам и будем «разбивать» код на две части - до ссылки, и сразу после:

Смотрим сам скрипт (оригинальный):
Code
<script type="text/javascript">
e=document.getElementsByTagName("TD");
for(k=15;k<e.length;k++){      
if(e[k].className=='posttdMessage'){
s=e[k].innerHTML;
while(s.indexOf('[bbcode]')!=-1){
s=s.replace('[bbcode]','bbcode');s=s.replace('[/bbcode]','/bbcode');
e[k].innerHTML=s;
}}};      
</script>


И заменяем/добавляем, необходимые нам участки кода в скрипте:
Сначала, сами BB-коды:
Code
<script type="text/javascript">
var e=document.getElementsByTagName('td'),j=e.length;
for(k=15;k<j;k++){
if(e[k].className=='posttdMessage'){
s=e[k].innerHTML;
while(s.indexOf('[mp3]')!=-1){s=s.replace('[mp3]','bbcode');s=s.replace('[/mp3]','/bbcode');}
while(s.indexOf('[flv]')!=-1){s=s.replace('[flv]','bbcode');s=s.replace('[/flv]','/bbcode');}
e[k].innerHTML=s;
}};      
</script>


А потом и их HTML-представление:
Для [mp3]:
Code
while(s.indexOf('[mp3]')!=-1){s=s.replace('[mp3]','<object type="application/x-shockwave-flash" data="/_content/_publ/2011/bb-code/uppod_v0947.swf" width="450" height="55"><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><param name="movie" value="/_content/_publ/2011/bb-code/uppod_v0947.swf" /><param name="flashvars" value="st=/_content/_publ/2011/bb-code/a_pl450x63-dp3.txt&file=');s=s.replace('[/mp3]','" /></object>');}


Для [flv]:
Code
while(s.indexOf('[flv]')!=-1){s=s.replace('[flv]','<object type="application/x-shockwave-flash" data="/_content/_publ/2011/bb-code/uppod_v0947.swf" width="500" height="375"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><param name="movie" value="/_content/_publ/2011/bb-code/uppod_v0947.swf" /><param name="flashvars" value="st=/_content/_publ/2011/bb-code/v_500x375_hdp4.txt&file=');s=s.replace('[/flv]','" /></object>');}


Всё вместе:
Code
<script type="text/javascript">
var e=document.getElementsByTagName('td'),j=e.length;
for(k=15;k<j;k++){
if(e[k].className=='posttdMessage'){
s=e[k].innerHTML;
while(s.indexOf('[mp3]')!=-1){s=s.replace('[mp3]','<object type="application/x-shockwave-flash" data="/_content/_publ/2011/bb-code/uppod_v0947.swf" width="450" height="55"><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><param name="movie" value="/_content/_publ/2011/bb-code/uppod_v0947.swf" /><param name="flashvars" value="st=/_content/_publ/2011/bb-code/a_pl450x63-dp3.txt&file=');s=s.replace('[/mp3]','" /></object>');}
while(s.indexOf('[flv]')!=-1){s=s.replace('[flv]','<object type="application/x-shockwave-flash" data="/_content/_publ/2011/bb-code/uppod_v0947.swf" width="500" height="375"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><param name="movie" value="/_content/_publ/2011/bb-code/uppod_v0947.swf" /><param name="flashvars" value="st=/_content/_publ/2011/bb-code/v_500x375_hdp4.txt&file=');s=s.replace('[/flv]','" /></object>');}
e[k].innerHTML=s;
}};      
</script>


☑ Смотреть что получилось ...
Прикрепления: 5757255.jpg (30.2 Kb)

 
Дата: Воскресенье, 13.03.2011, 10:58 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown

 
Дата: Воскресенье, 13.03.2011, 21:23 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Aly & Fila feat. Denise Rivera - My Mind Is With You (Radio Mix)


 
Дата: Воскресенье, 13.03.2011, 22:34 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown

 
Дата: Понедельник, 14.03.2011, 17:33 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 [mflv]http://www.youtube.com/watch?v=tpehI7qHRZE[/mflv]

 
Дата: Понедельник, 14.03.2011, 17:40 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 [mmp3]http://casting.mp3.ru/upload/audio/LikBezz_02untilmylastbreathmp3_Oct_10_07_22_35_GMT_2010_1066689958.mp3[/mmp3]

 
Дата: Понедельник, 14.03.2011, 19:04 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 [pl]http://likbezz.ru/_fr/2/playlist_audio2.txt[/pl]
Прикрепления: playlist_audio2.txt (1.4 Kb)

 
Дата: Вторник, 31.05.2011, 17:26 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 [audio]
{"file":"http://casting.mp3.ru/upload/audio/LikBezz_AggressorAMillionYearsAgomp3_Jan_30_20_03_33_GMT_2011_937803243.mp3","comment":"Aggressor - A Million Years Ago"},{"file":"http://casting.mp3.ru/upload/audio/LikBezz_AndreyMuteLandmineMarsRemixmp3_Jan_30_20_04_20_GMT_2011_649366439.mp3","comment":"Andrey Mute - Landmine"}
[/audio]

 
Дата: Среда, 18.07.2012, 15:15 |
Чур
Лейтенант
Группа: Проверенные
Сообщений: 69
Награды: 0
Репутация: 1
Статус: Offline


 Благодарю! Интересная подборка вариантов. up

 
Дата: Среда, 01.08.2012, 21:35 |
Генерал-майор
Группа: Проверенные
Сообщений: 386
Награды: 1
Репутация: 0
Статус: Offline


 а с фото, что то подобного плана - возможно ?

p/s - полезная и позновательная статья. спс respect

 
Дата: Среда, 01.08.2012, 22:39 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 igrok,
Quote (igrok, Ср, 01.08.2012, 21:35:16)
а с фото, что то подобного плана - возможно ?

Возможно.
Плеер Uppod поддерживает картинки.

 
Дата: Среда, 01.08.2012, 23:50 |
Генерал-майор
Группа: Проверенные
Сообщений: 386
Награды: 1
Репутация: 0
Статус: Offline


 не могу я скачать архив хоть ты тресни.... facepalm

скачивается только uppod.swf
как скачать архив с кодом вставки в страницу?

Добавлено (01.08.2012, 23:50)
---------------------------------------------
то что там пишут

Quote
В опциях добавленного файла нажимаем кнопку Код и получаем HTML, который остается только опубликовать.

нехрена у меня там нет... есть только параметры для настройки
сохраняю, и нечего не происходит.... кароче ппц....

 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как сделать BB-коды [video] и [audio] и свой плеер на юКоз (Подробная инструкция с примерами (14-03-2011))
  • Страница 1 из 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • »
Поиск:


Мобильная версия