웹마스터 팁

  2. Support
  3. 웹마스터 팁

youtube (유튜브) 동영상 block없이 게시판에 embed 하기

2011.05.10 07:43

쏘프티

최근 youtube 동영상이 iframe으로 바뀌는 바람에 일반 사용자가 쉽게 youtube 동영상을 게시판에 삽입할 수가 없게 되었습니다.

다행히 jwplayer에서 최근 youtube 동영상을 지원하기 시작하였기에 이를 활용하여 youtube 동영상을 embed 태그나 iframe 태그 없이 XE에 내재된 멀티미디어 삽입 컴포넌트를 가지고 이용하는 방법을 소개하고자 합니다.

주의 core의 common.js 파일을 변경하므로, 전문적인 지식이 없으신 분들은 수정전 파일을 백업을 꼭 하셔야 합니다. 수정으로 인한 보안 및 안전에 대한 책임은 본인이 지셔야 합니다.

1. 최신의 JWplayer를 다운 받습니다.

http://www.longtailvideo.com/players/jw-flv-player/

다운 받으실 때, Include Viral, a video sharing plugin 체크를 끄고 다운받으시기 바랍니다 (그래야 동영상 공유화면이 자동으로 뜨지 않습니다)


2.. 다운 받으신 파일을 여시고 파일 내용중에 player.swf 파일을 flvplayer.swf 으로 이름을 바꾸신 이후에
XE 설치 폴더/common/tpl/images/flvplayer.swf 에 덮어 써 주시기 바랍니다.

3. 다운 받으실 폴더에서 jwplayer.js 를 복사하셔서 XE 설치 폴더 내에 임의의 폴더에 복사하시기 바랍니다.
예) XE 설치 폴더/layouts/xe_official/js/jwplayer.js

4. 지금 사용하시고 있는 레이아웃 상단에 위에 옮겨 놓은 js를 loading 하는 스크립트를 작성합니다

레이아웃 편집에서 최상단에 아래 코드 삽입

<load target="위에 복사하신 폴더명/jwplayer.js" type="text/javascript"/>

5. XE 설치 폴더/common/js/common.js 에서 _displayMultimedia 함수를 찾고, 아래 조건문을 삽입

else if(/^(https?:\/\/)?(youtu\.be)*/i.test(src)){
var myplayerid = "youtube_player_" + Math.floor(Math.random() * 10000000);
html = '<div id="'+myplayerid+'" align=center><a href="'+ '+src+'" target="'+myplayerid+'">Click to watch the video (동영상을 보시려면 클릭하세요)</a></div>';
html += '<script type="text/javascript">';
html += '  jwplayer("'+myplayerid+'").setup({';
html += '    "flashplayer": "'+request_uri+'common/tpl/images/flvplayer.swf",';
html += '    "file": "'+src+'",';
html += '    "controlbar": "bottom",';
html += '    "width": "'+width+'", "height": "'+height+'", "autostart": "'+autostart+'"';
html += '  });';
html += '</script>';

}

2012-02-23 수정 (mp4 재생, mp3 재생 script 포함)


아래는 1.4.5.10 버젼용 common.js 수정입니다.

_displayMultimedia 함수를 찾으시고, 아래로 통째로 변경하시면 됩니다.


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},params=jQuery.extend(defaults,options||{}),autostart=(params.autostart&&params.autostart!='false')?'true':'false';delete (params.autostart);var clsid="",codebase="",html="";if(/\.(gif|jpg|jpeg|bmp|png)$/i.test(src)){html='<img src="'+src+'" width="'+width+'" height="'+height+'" />'}
else if(/\.mp3$/i.test(src)){
var jwplayerid = "jwplayer_" + Math.floor(Math.random() * 10000000);
html = '<div id="'+jwplayerid+'" align=center><a href="'+src+'" target="'+jwplayerid+'">Click to listen the audio<BR>(음악을 들으시려면 클릭하세요)</a></div>';
html += '<script type="text/javascript">';
html += '  jwplayer("'+jwplayerid+'").setup({';
html += '    "file": "'+src+'",';
html += '    "controlbar": "bottom",';
html += '    "width": "'+width+'", "height": "20", "autostart": "'+autostart+'",';
html += '	"provider" : "http",';
html += '   "modes": [';
html += '        {type: "html5"},';
html += '        {type: "flash", src: "'+request_uri+'common/tpl/images/flvplayer.swf"},';
html += '        {type: "download"}';
html += '    ],';
html += '  });';
html += '</script>';
} else if(/\.flv$/i.test(src)|| /\.mp4$/i.test(src)||/\.mov$/i.test(src)||/\.moov$/i.test(src)||/\.m4v$/i.test(src)){
var jwplayerid = "jwplayer_" + Math.floor(Math.random() * 10000000);
html = '<div id="'+jwplayerid+'" align=center><a href="'+src+'" target="'+jwplayerid+'">Click to watch the video<BR>(동영상을보시려면 클릭하세요)</a></div>';
html += '<script type="text/javascript">';
html += '  jwplayer("'+jwplayerid+'").setup({';
html += '    "file": "'+src+'",';
html += '    "controlbar": "bottom",';
html += '    "width": "'+width+'", "height": "'+height+'", "autostart": "'+autostart+'",';
html += '	"provider" : "http",';
html += '   "modes": [';
html += '        {type: "html5"},';
html += '        {type: "flash", src: "'+request_uri+'common/tpl/images/flvplayer.swf"},';
html += '        {type: "download"}';
html += '    ],';
html += '  });';
html += '</script>';
}else if(/^(https?:\/\/)?(youtu\.be)*/i.test(src)){
var jwplayerid = "youtube_player_" + Math.floor(Math.random() * 10000000);
html = '<div id="'+jwplayerid+'" align=center><a href="'+src+'" target="'+jwplayerid+'">Click to watch the video<BR>(Youtube 동영상을 보시려면 클릭하세요)</a></div>';
html += '<script type="text/javascript">';
html += '  jwplayer("'+jwplayerid+'").setup({';
html += '   "width": "'+width+'",';
html += '   "height": "'+height+'",';
html += '   "modes": [';
html += '        {type: "html5"},';
html += '        {type: "flash", src: "'+request_uri+'common/tpl/images/flvplayer.swf"},';
html += '        {type: "download"}';
html += '    ],';
html += '   "file": "'+src+'",';
html += '   "autostart": "'+autostart+'",';
html += '  });';
html += '</script>';}
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"}else codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0";html='<object classid="'+clsid+'" codebase="'+codebase+'" width="'+width+'" height="'+height+'" flashvars="'+params.flashvars+'">';html+='<param name="movie" value="'+src+'" />';for(var name in params)if(params[name]!='undefined'&&params[name]!='')html+='<param name="'+name+'" value="'+params[name]+'" />';html+='<embed src="'+src+'" autostart="'+autostart+'"  width="'+width+'" height="'+height+'" flashvars="'+params.flashvars+'" wmode="'+params.wmode+'"></embed></object>'}else{if(jQuery.browser.mozilla||jQuery.browser.opera)autostart=(params.autostart&&params.autostart!='false')?'1':'0';html='<embed src="'+src+'" autostart="'+autostart+'" width="'+width+'" height="'+height+'"';if(params.wmode=='transparent')html+=' windowlessvideo="1"';html+='></embed>'};return html}


아래는 1.5 버젼용은 xe.min.js를 수정하셔야 하고, CDN 기능을 끄셔야 동작 가능합니다.


6. 멀티미디어 삽입 컴포넌트에서 youtube 공유 주소를 붙여 넣어 삽입해 보십시요~
이제 iframe이나 embed 없이도 youtube 동영상을 XE에 삽입하실 수 있습니다.


다음 링크에서 테스트 해보실 수 있습니다.


1.4 버젼용 예제:  http://softmind.pe.kr/xe14/index.php?mid=test&document_srl=60

1.5 버젼용 예제: http://softmind.pe.kr/xe15/index.php?mid=test&document_srl=215



태그 연관 글
  1. [2019/01/29] 묻고답하기 크롬에서 동영상 플레이어 문의 by 뻬빠 *3
  2. [2017/05/03] 묻고답하기 youtube 영상목록을 불러와서 게시판에 뿌려주는 모듈이나 스킨이 있을까요? by whitemind *1
  3. [2016/12/09] 묻고답하기 url 주소를 고정으로 쓰는 방법 by 타이슨리 *3
  4. [2016/07/07] 묻고답하기 contact us 전송버튼 누를시 인덱스페이지로 돌아갑니다 by 녹색사랑 *2
  5. [2015/11/02] 웹마스터 팁 이제는 유튜브동영상 손쉽게 다운로드 받으세요 ミ:つÞ by 딴죽을거는남자 *7
, , , , , 이 게시물을
좋아요(+2)
목록
제목 글쓴이 날짜
1.5.2.3 업데이트 후 이미지, 아이콘 테두리 생김 현상 없애는 방법 [3] 비밀얌 2012.04.28
1.5.2.3 에서 게시글이 등록이 되는데 ajax XML parser 에러가 나는경우 엑스셀코드 2012.04.28
게시판에 다운로드 횟수 출력하기 (스케치북 게시판 전용) [5] file 숭숭군 2012.04.20
관리자 글 등록시 비번 입력하게 만들기 [5] 우진♡아빠 2010.04.28
Xe 1.5.1로 사이트 꾸미기 part 1 [25] file 황비 2011.12.04
도라란님의 팁에 추가하여 MP3와 동영상 파일도 막고 싶을 경우.. [4] Canto 2011.07.23
이미지 외부링크 차단하는법 [6] 리리슐츠 2012.04.08
회원가입폼 비밀번호 찾기 질문/답변 삭제및 필수항목 선택 (송동우님 팁) 때린데 또때려 2012.04.08
XE 1.5 이상에서 XE 1.4.5.10 이하 버튼 사용하기 [4] [1] file 웹 엔진 2011.12.18
조회수 클릭때마다 올라가기(1.4.5.7 버전에서 되네요) [2] file 아네모네 2011.06.20
마우스 오버시 텍스트 호버링(주석나타내기..레이어적용) [1] Konghee 2012.04.02
[초보팁] 최근게시물 위젯에 확장변수 표시하기 [23] 오뎅궁물 2010.01.29
이번 xe 1.5.2.1 업데이트 하고 게시판 보기 .htaccess 문제 권기성2 2012.03.29
1.5 업데이트후 블로그스킨, 리스트에서 내용출력안되는분 수정방법 [4] Xiso 2011.12.23
제로보드4 에서 xe 1.5 버전설치후 xml 파일 이전시 파일 누락되는 현상해결 [4] 때린데 또때려 2012.03.24
youtube (유튜브) 동영상 block없이 게시판에 embed 하기 [23] 쏘프티 2011.05.10
그룹별 회원정보 검색 & 회원의 추가가입폼 복수 검색 팁 (XE 1.5) sejin7940 2012.03.22
phpmyadmin 로그인시 아래와 같은 에러나올경우 해결방법 [1] file 때린데 또때려 2012.03.12
XE Core 압축파일(tar.gz)을 올려 서버상에서 압축풀기 [2] 뚱뚱이1 2012.03.01
ie9에서 파일첨부버튼이 먹통일때.. (1.4.5.10 버전) 엔키오 2012.03.07
태그 쓰기