웹마스터 팁
다수의 업로드 mp3 파일 jwplayer로 재생하기
2011.05.30 22:56
이것도 팁이 될수 있을까요.
mp3 파일을 다수 업로드 하고 본문삽입 버튼을 누르면 플레이어가 줄줄이 뜨고
멀티미디어 링크로 하면 한곡만 되고.....
사용하기가 좀 번거롭기에
modules\editor\tpl\js\uploader.js 파일을 수정해서
jwplayer로 여러곡이 플레이 되도록 하는 방법임.
function insertUploadedFile(editorSequence) {
var settings =
uploaderSettings[editorSequence];
var
fileListAreaID = settings["fileListAreaID"];
var fileListObj = xGetElementById(fileListAreaID);
if(!fileListObj) return;
if(editorMode[editorSequence]=='preview')
return;
var list = new Array(); 대략 390라인 쯤
var text = new Array();
for(var i=0;i<fileListObj.options.length;i++)
{
if(!fileListObj.options[i].selected)
continue;
var file_srl =
fileListObj.options[i].value;
if(!file_srl)
continue;
var file =
uploadedFiles[file_srl];
editorFocus(editorSequence);
// 바로 링크 가능한 파일의 경우 (이미지, 플래쉬, 동영상 등..)
if(file.direct_download == 'Y') {
// 이미지 파일의 경우 image_link 컴포넌트 열결
if(/\.(jpg|jpeg|png|gif)$/i.test(file.download_url)) {
if(loaded_images[file_srl]) {
var obj =
loaded_images[file_srl];
}
else {
var obj = new Image();
obj.src = file.download_url;
}
temp_code = '';
temp_code += "<img
src="\"+file.download_url+"\" alt=\""+file.source_filename+"\"";
if(obj.complete == true) { temp_code
+= " width=\""+obj.width+"\" height=\""+obj.height+"\""; }
temp_code += " />\r\n";
text.push(temp_code);
// 이미지외의 경우는 multimedia_link 컴포넌트 연결
} else {
if(/\.(mp4|mp3|flv|mov)$/i.test(file.download_url)){
lista = '';
listb = '';
lista = '{file:"' + file.download_url + '", title:"';
listb = file.source_filename + '+
'"},';
list = list + lista + listb;
}else{
text.push("<img src="\"common/tpl/images/blank.gif\"
editor_component=\"multimedia_link\" multimedia_src="\"+file.download_url+"\"
width=\"400\" height=\"320\"
style=\"display:block;width:400px;height:320px;border:2px dotted
#4371B9;background:url(./modules/editor/components/multimedia_link/tpl/multimedia_link_component.gif)
no-repeat center;\" auto_start=\"false\" alt=\"\" />");
}
}
// binary파일의 경우 url_link 컴포넌트 연결
} else {
text.push("<a
href="\"+file.download_url+"\">"+file.source_filename+"</a>\n");
}
}
listc ='<div id="cons">Loading the player...</div>
<script type="text/javascript" src="/jw/jwplayer.js"></script>
<script type="text/javascript">jwplayer("cons").setup({flashplayer: "/jw/ehplayer.swf",config: "/jw/config.xml",playlist:[';
if(list.length>1) text.push (listc + list + '] });</script>');
// html 모드
최신버전 다운로드 http://developer.longtailvideo.com/trac/browser/trunk
빨간색 소스가 추가된 부분입니다.
jwplayer 를 다운로드 후 jwplayer.js , jwplayer.swf, config.xml 파일을 자신의 계정에 업로드.
보라색 부분은 jwplayer 주소 본인에 맞게 변경하세요.
재생 가능한 확장자는 mp4|mp3|flv|mov 등등으로 추가 가능하고 세부 설정은 config.xml 에서 설정 하세요
스킨 플러그인 config.xml 작성법등등 자세한 jwplayer사용법은 위 링크를 참고하세요.
참고로 저는 스크립트를 모릅니다.
전문가 분들이 보기에 문제가 되는 부분이 있다고 알려 주시면 삭제하겠습니다.
댓글 3
-
YO-DA
2011.05.31 09:50
감사합니다^^ -
귀여운유니
2012.03.03 04:45
config.xml 에서 막히네요. 설명 좀 부탁드립니다. -
YO-DA
2012.03.07 17:21
귀~유니 처럼 자세한 설명이 아쉬운 대목^^
제목 | 글쓴이 | 날짜 |
---|---|---|
저기에서 이리로 온 글입니다. [3] | 이성영 | 2002.05.07 |
하이텔에서 가져오는 서울특별시와 광역시 날씨 [3] | 김희섭 | 2002.04.30 |
배경음악과 동영상 삽입 <embed> [7] | 제이지라 | 2002.04.26 |
DHTML의 시작 - Typing 스크립트 (예제) [2] | Legend | 2002.04.19 |
DHTML의 시작 - Form에 대해 (2) - input 엘리먼트 [5] | Legend | 2002.04.18 |
DHTML의 시작 - Form에 대해 (1) [2] | Legend | 2002.04.14 |
DHTML의 시작 - CSS와 객체 관계 [2] | Legend | 2002.04.12 |
이미지에 DHTML로 테두리를 만들어보자..포토샵 저리가라~~ [4] | ZipShin | 2002.04.11 |
DHTML의 시작 - HTML 구조 및 자바스크립트 객체지정법 [4] | Legend | 2002.04.11 |
드래그하면 바뀌는 마술거울효과 (-_-")v [16] | 짱나 | 2002.04.05 |
투명한 아이프레임 [15] | 파야 | 2002.04.04 |
점선테이블..만들기 [6] | 각설탕 | 2002.03.31 |
엔지오식 레이어 메뉴 구성하기 (허접) [3] | 정영순 | 2002.03.28 |
두 개의 프레임을 동시에 제어하기 [4] | (づ_-) 위드 | 2002.03.25 |
유군 스타일 웹사이트 제작법 [15] | 유군-_-)/ | 2002.03.20 |
스크롤바 색상을 이쁜것만 모와요 [6] | ZipShin | 2002.03.16 |
인코딩 정보 일본어, 중국어, 스페인어 [3] | 탐그루 | 2002.03.16 |
아름지기식 홈페이지만들기5 [5] | 아름지기 | 2002.03.16 |
타자를 치면 바로바로 화면에 글이 쑤욱 [7] | 이슈™ | 2002.03.13 |
아름지기식 홈페이지 만들기4 [14] | 아름지기 | 2002.03.12 |