웹마스터 팁
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
된다고 하니 저도 좋네요.
제목 | 글쓴이 | 날짜 |
---|---|---|
JwPlayer.swf 스킨 변경하기
[12]
![]() | 귀여운유니 | 2012.02.20 |
중국어(zh-CN) 포함한 다국어시 페이지모듈 버그 해결법 [1] | sejin7940 | 2012.07.26 |
virtualhost 사용에 관한 잡담 [3] | 인터니즈™ | 2012.06.15 |
로그인 정보 폼에 읽지 않은 쪽지 개수 보이기.
[21]
![]() | 무얼까 | 2011.07.23 |
작성 글 보기에서 특정 모듈의 글 안나타나게 하기 | SCAC | 2012.07.21 |
1.5.1 최근 글 위젯에서 특수문자가 나가는 현상 [7] | Crom | 2012.02.12 |
관리자에서 그룹검색을 이용한 회원목록 제대로 안 보일때.. [2] | sejin7940 | 2012.06.01 |
IIS 7.5 + XE 업로드 용량 개선 방법
[1]
![]() | 류군 | 2012.07.16 |
XE 문서 및 게시판 첨부파일 증발 오류시 [1] | Ooops | 2012.05.10 |
첨부파일 증발되면 이 방법을 써보세요. [2] | 쌘쓰쟁이 | 2012.06.23 |
회원 가입 시 IP 중복 검사
[30]
![]() | CMD | 2012.02.24 |
XE사용 Mysql DB를 InnoDB로 바꿔봅시다 ※서버환경 사용자에 한함 [4] | 흰색앵초 | 2012.06.30 |
회원가입 이메일 수취 여부 선택 초기화
![]() | 아모스리 | 2012.07.07 |
카르마님의 외부이미지 자동저장애드온 한글이미지 저장 [1] | 패시브 | 2012.07.03 |
XE 1.5 이상에서 모바일 페이지 별도 구성 원하는 경우 | sejin7940 | 2012.06.23 |
게시판의 제목제거
![]() | saladin | 2012.07.02 |
1.5.x 사용자들 중에 IE9에서 셀렉트박스 목록이 안보일때 | 빽짱구 | 2012.06.30 |
관리자의 회원포인트목록 에서 ID/닉네임 등으로 검색하는 소스 추가 [3] | sejin7940 | 2012.06.25 |
content위젯 제목 밑줄 게시판 제목의 색깔 변경방법 안내
[2]
![]() | saladin | 2012.06.25 |
이미지 여러개 등록시 공백 팁입니다. 10.07.29 10:05 수정
[15]
![]() | 스카이피아 | 2010.07.25 |
다른분들잘되나요??