웹마스터 팁
JwPlayer.swf 스킨 변경하기
2012.02.20 07:45
참고 : XE내에 있는 JW Media Player 업그레이드 하기
전 코어 1.4.3 을 사용하고 있습니다. (1.5.x기준으로 설명합니다.)
JwPlayer 의 디폴트 모양입니다. (버전에 따라 다를 수 있습니다.)
스킨을 변경해 봅시다. (스킨이 있는 곳 : http://www.longtailvideo.com/addons/skins)
1. 원하는 파일을 다운받습니다. 다운받은 zip 파일을 common/tpl/img 에 넣습니다.
(압축은 풀지 않습니다. 편의상 flvplayer.swf 가 있는곳)
2. common/js/common.js 중간(400~)쯤에
html = '<embed src="'+request_uri+'common/img/flvplayer.swf" allowfullscreen="true" autostart="'+autostart+'" width="'+width+'" height="'+height+'" flashvars="&file='+src+'&width='+width+'&height='+height+'&autostart='+autostart+'" wmode="'+params.wmode+'" />';
에 아래와 같이 절대경로를 추가하면 됩니다.
html = '<embed src="'+request_uri+'common/img/flvplayer.swf?skin=common/tpl/img/스킨.zip " allowfullscreen="true" autostart="'+autostart+'" width="'+width+'" height="'+height+'" flashvars="&file='+src+'&width='+width+'&height='+height+'&autostart='+autostart+'" wmode="'+params.wmode+'" />';
3. 파일첨부할때 미리보기도 바꾸고 싶다면 modules/editer/tpl/js/Uploader.js 중간에 위와 같은 부분이 있는데
flvplayer.swf?skin=스킨.zip 처럼 상대경로로 추가하면 됩니다. (절대경로로는 테스트 안해봐서 ...)
그러면 아래와 같이 변경이 됩니다.
( 크롬 스킨 적용 모습 http://www.longtailvideo.com/addons/skins/185/Chrome?q )
댓글 12
-
YO-DA
2012.03.02 14:33
XE버전에 따라서
common/img/flvplayer.swf?skin=common/tpl/img/스킨.zip은
common/tpl/images/flvplayer.swf?skin=common/tpl/images/스킨.zip
으로 해야 할 때가 있습니다. -
그렇죠. 경로는 코어마다 다르니 ..
플러그인과 옵션도 추가로 지정할 수 있습니다. (jwplayer 홈피 참고)
/flvplayer.swf?skin=common/tpl/images/mare.zip&plugins=timeslidertooltipplugin-2&controlbar=over"
업로드 파일 종류에 따라 본문에 업로드되는 스킨과 크기를 달리 할 수도 있습니다.
mp3(오디오)는 lightrv5 스킨에 300*24 크기로 업로드 되고,
mp4(비디오)는 mare 스킨에 720*405 크기로 업로드 되게끔 하려면
스킨은 위 방법으로 common.js 에서 mp3와 mp4를 분리하고,
크기는 에디터 모듈에 uploader.js 에서 mp3와 mp4를 아래처럼 분리하면 됩니다.
// 이미지외의 경우는 multimedia_link 컴포넌트 연결
} else {
if(/\.(mp3)$/i.test(file.download_url)){
text.push("<img src=\"common/tpl/images/blank.gif\" editor_component=\"multimedia_link\" multimedia_src=\""+file.download_url+"\" width=\"300\" height=\"24\" style=\"display:block;width:300px;height:24px;border:2px dotted #4371B9;background:url(./modules/editor/components/multimedia_link/tpl/multimedia_link_component.gif) no-repeat center;\" auto_start=\"false\" alt=\"\" />");
}else {
text.push("<img src=\"common/tpl/images/blank.gif\" editor_component=\"multimedia_link\" multimedia_src=\""+file.download_url+"\" width=\"720\" height=\"405\" style=\"display:block;width:720px;height:405px;border:2px dotted #4371B9;background:url(./modules/editor/components/multimedia_link/tpl/multimedia_link_component.gif) no-repeat center;\" auto_start=\"false\" alt=\"\" />");
}
}응용해서 이쁜 스킨 만들어 보세요.^^
-
YO-DA
2012.03.07 17:14
탁월한 아이디어입니다^^
-
김봉진412
2012.04.12 22:36
저도 아무 변화가 없네요..ㅜㅜ
-
참빛바다
2012.04.12 22:54
덧붙이자면, 에디터가 다르거나 다른 게시판 모듈(예를들어 게시판ex) 를 사용할 경우 저 수정사항이 적용이 안되는 경우가 있습니다. 그럴때는 해당 파일을 찾아 수정해야 겠지요.
-
김봉진412
2012.04.12 23:13
험...어렵네요..^^
저는 보면 common/tpl/img 에서 img 나 image가 없이 common/tpl 요기까지만 있고 하위 폴더가 없어요.
-
안녕하세요..
스킨은 변경은 됬는데..전체 화면 보기가 안되는데..방법이 있을까요? ^^;
-
으앙 바꾸고싶다 ? 근대 안되네요 common/img/flvplayer.swf?skin=common/img/스킨.zip 이렇게인데 .. 안되요 ㅠ.ㅠ
에디터는 기본에디터인데 .. 오ㅐ 안되는겨징... 1.5.2.6 입니다
-
쓰리공주
2012.07.01 08:09
[ XE 1.5.2.6 에 테스트 해본 방법 입니다. ]
common.jsxe.min.js 를 수정 하시면 됩니다.1. common/img/스킨.zip <--img폴더안에 스킨파일을 업로드 하세요.(압축은 풀지 않습니다)
2. common/js/xe.min.js <-- 44번줄 쯤 아래 적색 부분을 추가 하시면 mp3 , mp4 에도 스킨 적용이 됩니다.
function _displayMultimedia(src,width,height,options){if(src.indexOf('files')==0)src=request_uri+src;var defaults={wmode:'transparent',allowScriptAccess:'sameDomain',quality:'high',flashvars:'',autostart:false};var params=jQuery.extend(defaults,options||{});var autostart=(params.autostart&¶ms.autostart!='false')?'true':'false';delete(params.autostart);var clsid="";var codebase="";var html="";if(/\.(gif|jpg|jpeg|bmp|png)$/i.test(src)){html='<img src="'+src+'" width="'+width+'" height="'+height+'" />';}else if(/\.flv$/i.test(src)||/\.mov$/i.test(src)||/\.moov$/i.test(src)||/\.m4v$/i.test(src)||/\.mp3$/i.test(src)||/\.mp4$/i.test(src)){html='<embed src="'+request_uri+'common/img/flvplayer.swf?skin=http://www.도메인/common/img/스킨.zip" allowfullscreen="true" autostart="'+autostart+'" width="'+width+'" height="'+height+'" flashvars="&file='+src+'&width='+width+'&height='+height+'&autostart='+autostart+'" wmode="'+params.wmode+'" />';}else if(/\.swf/i.test(src)){clsid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000';if(typeof(enforce_ssl)!='undefined'&&enforce_ssl){codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0";}
※ 크롬에서 테스트 결과 잘 적용 됩니다.
[참고] JWPLAYER 5.10.2295 최신 버전이 업데이트 되었네요.
다운 받으신분은 파일이름을 flvplayer.swf 로 수정후, common/img/ 폴더에 업로드 하시면 최신 버전으로 업데이트 하실 수 있습니다.
-
공주님감사 되네욤 히히 ㅎ
-
쓰리공주
2012.07.27 00:05
된다고 하니 저도 좋네요.
다른분들잘되나요??