|
Как сделать BB-коды [video] и [audio] и свой плеер на юКоз
|
|
| [1] likbezz [12.03.2011, 16:45] |
Как сделать BB-коды [video] и [audio] и свой плеер к ним на форум Материалы по теме:
Как сделать свои BB-коды для форума Дополнительные смайлики на форум |
|
| [2] likbezz [12.03.2011, 20:34] |
Как сделать 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$.
Скрипт добавляется в тот же шаблон, после формы, то есть - в самый конец кода.
- Короче, ничего сложного.
☑ Вот пример того, что должно получится .... |
|
| [3] likbezz [12.03.2011, 21:42] |
А теперь, рассмотрим типичную ситуацию, когда есть желание заменить стандартный юКозовский плеер на свой.
Тут можно пойти двумя принципиально-различными путями:
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> |
|
| [4] likbezz [13.03.2011, 10:26] |
Плеер, возьму от 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>
☑ Смотреть что получилось ...
|
|
| [5] likbezz [13.03.2011, 10:58] |
|
|
|
| [6] likbezz [13.03.2011, 21:23] |
Aly & Fila feat. Denise Rivera - My Mind Is With You (Radio Mix)
|
|
| [7] likbezz [13.03.2011, 22:34] |
|
|
|
| [8] likbezz [14.03.2011, 17:33] |
|
[mflv]http://www.youtube.com/watch?v=tpehI7qHRZE[/mflv] |
|
| [9] likbezz [14.03.2011, 17:40] |
|
[mmp3]http://casting.mp3.ru/upload/audio/LikBezz_02untilmylastbreathmp3_Oct_10_07_22_35_GMT_2010_1066689958.mp3[/mmp3] |
|
| [10] likbezz [14.03.2011, 19:04] |
|
[pl]http://likbezz.ru/_fr/2/playlist_audio2.txt[/pl]
|
|
| [11] likbezz [31.05.2011, 17:26] |
[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] |
|
| [12] Чур [18.07.2012, 15:15] |
Благодарю! Интересная подборка вариантов.  |
|
| [13] igrok [01.08.2012, 21:35] |
а с фото, что то подобного плана - возможно ?
p/s - полезная и позновательная статья. спс  |
|
| [14] likbezz [01.08.2012, 22:39] |
igrok, а с фото, что то подобного плана - возможно ?
Возможно.
Плеер Uppod поддерживает картинки. |
|
| [15] igrok [01.08.2012, 23:50] |
не могу я скачать архив хоть ты тресни.... 
скачивается только uppod.swf
как скачать архив с кодом вставки в страницу?Добавлено (01.08.2012, 23:50)
---------------------------------------------
то что там пишут Quote В опциях добавленного файла нажимаем кнопку Код и получаем HTML, который остается только опубликовать.
нехрена у меня там нет... есть только параметры для настройки
сохраняю, и нечего не происходит.... кароче ппц.... |
|
