웹마스터 팁
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
-
오락실주인
2012.02.26 02:33
-
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
으로 해야 할 때가 있습니다. -
귀여운유니
2012.03.02 14:58
그렇죠. 경로는 코어마다 다르니 ..
플러그인과 옵션도 추가로 지정할 수 있습니다. (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 요기까지만 있고 하위 폴더가 없어요.
-
어드민플레이
2012.05.06 15:47
안녕하세요..
스킨은 변경은 됬는데..전체 화면 보기가 안되는데..방법이 있을까요? ^^;
-
오락실주인
2012.06.27 12:49
으앙 바꾸고싶다 ? 근대 안되네요 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.03 14:21
공주님감사 되네욤 히히 ㅎ -
쓰리공주
2012.07.27 00:05
된다고 하니 저도 좋네요.
제목 | 글쓴이 | 날짜 |
---|---|---|
일반 회원이나 손님도, 제목의 글자색상 및 굵기 설정 가능하게. [1] | sejin7940 | 2010.07.14 |
초보의 모바일 페이지 등록하기 [5] | 조량 | 2010.07.15 |
지식인 스킨(naver_jisikin) 의견에 글이 겹쳐보일때 [1] | 조슈아킴 | 2010.07.15 |
게시판 에디터 확장 컴퍼넌트 중 원하는 항목을 밖에다가 버튼화 [3] | sejin7940 | 2010.07.18 |
회원확장정보 변수 (출처:sMaker) [5] | 시니시즘 | 2010.07.19 |
[최근 글 탭 형식 출력 위젯] 탭 제목이 브라우저 타이틀이 아닌 설명으로 나오게하기 [1] | 소렌트. | 2010.07.19 |
이미 알고 계신- 나눔고딕체를 에디터 기본 글꼴로 하는 방법 ^^" [5] | ZHANG™ | 2010.07.24 |
1.4.2 -> 1.4.3 업데이트 후 화면 백지 상태 해결방법 [2] | 니오티 | 2010.07.25 |
이미지 여러개 등록시 공백 팁입니다. 10.07.29 10:05 수정 [15] | 스카이피아 | 2010.07.25 |
XE 용량 효과적으로 줄이기 [13] | 코스트렐리아 | 2010.07.30 |
모바일 레이아웃 로그인페이지 개선방법 [4] | 스카이피아 | 2010.08.01 |
페이지 모듈 사용시 여백 관련한 팁! | sejin7940 | 2010.08.02 |
검정 배경 홈페이지용 회원 정보 스킨 | LutZ | 2010.08.03 |
회원가입폼 내멋대로 내맘대로 하기. [9] | 지인짜 | 2010.08.04 |
브라우저에 설치된 flash player의 version 알아 보기 [2] | 레미짱 | 2010.08.06 |
문서 서식에 관한 정보 [4] | YO-DA | 2010.08.06 |
회원 정보 및 회원 리스트에 회원 성별 앞에 아이콘 넣기 [5] | 늘푸른이 | 2010.08.06 |
게시판에 사전질문 넣기 특히 확장 변수 없는 지식in 게시판 - 초보자용 [3] | THEOTHERS | 2010.08.07 |
관리자페이지 회원목록을 일반페이지에서 사용하기 [5] | 늘푸른이 | 2010.08.07 |
영영사전이 필요하십니까? | 레미짱 | 2010.08.12 |
다른분들잘되나요??