웹마스터 팁

  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 함수를 찾으시고, 아래로 통째로 변경하시면 됩니다.


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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
(음악을 들으시려면 클릭하세요)</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
(동영상을보시려면 클릭하세요)</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
(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)
목록
제목 글쓴이 날짜
청주오피 청주OP ⦑출장마사지안내.COM⦒ 청주휴게텔 청주오피 청주오피 koykoyah 2025.02.23
역삼1인샵【오피.CLUB】역삼마사지 역삼스웨디시 역삼안마 songkangkong767 2025.02.23
신도림오피 신도림오피 ⦑출장안마사이트.COM⦒ 신도림OP 신도림스파 신도림오피 koykoyah 2025.02.23
부평안마【오피쓰.COM】부평마사지 부평1인샵 부평스웨디시 songkangkong767 2025.02.23
답십리오피 ⦑오피.CLUB⦒ 답십리마사지 답십리오피 답십리오피 답십리OP koykoyah 2025.02.23
답십리1인샵【오피쓰주소.COM】답십리안마 답십리마사지 답십리스웨디시 songkangkong767 2025.02.23
부평오피 ⦑오피쓰주소.COM⦒ 부평오피 부평출장마사지 부평오피 부평OP koykoyah 2025.02.23
산본1인샵【출장안마사이트.COM】산본1인샵 산본 1인샵 산본1인샵 songkangkong767 2025.02.23
제주도오피 ⦑출장마사지안내.COM⦒ 제주도마사지 제주도오피 제주도오피 제주도OP koykoyah 2025.02.23
포항스웨디시【오피.CLUB】포항 스웨디시 포항스웨디시 포항스웨디시 songkangkong767 2025.02.23
대구오피 대구OP ⦑출장마사지안내.COM⦒ 대구휴게텔 대구오피 대구오피 koykoyah 2025.02.23
서초스웨디시【오피쓰.COM】서초스웨디시 서초 스웨디시 서초스웨디시 songkangkong767 2025.02.23
부산오피 ⦑오피.CLUB⦒ 부산OP 부산오피 부산출장샵 부산오피 koykoyah 2025.02.23
일산스웨디시【오피사이트.NET】일산스웨디시 일산 스웨디시 일산스웨디시 songkangkong767 2025.02.23
대전오피 대전OP ⦑출장마사지안내.COM⦒ 대전휴게텔 대전오피 대전오피 koykoyah 2025.02.23
울산마사지【오피쓰주소.COM】울산1인샵 울산안마 울산스웨디시 songkangkong767 2025.02.23
충주오피 ⦑출장안마사이트.COM⦒ 충주오피 충주출장마사지 충주오피 충주OP koykoyah 2025.02.23
강서1인샵【오피.CLUB】강서마사지 강서스웨디시 강서안마 songkangkong767 2025.02.23
해운대오피 ⦑오피.CLUB⦒ 해운대오피 해운대출장마사지 해운대오피 해운대OP koykoyah 2025.02.23
건대스웨디시【오피쓰.COM】건대스웨디시 건대 스웨디시 건대스웨디시 songkangkong767 2025.02.23
태그 쓰기