웹마스터 팁

  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)
목록
제목 글쓴이 날짜
판교오피 판교오피 ⦑오피쓰.COM⦒ 판교OP 판교스파 판교오피 koykoyah 2025.02.22
답십리오피 답십리오피 ⦑오피사이트.NET⦒ 답십리OP 답십리스파 답십리오피 koykoyah 2025.02.22
분당오피 ⦑오피.CLUB⦒ 분당오피 분당OP 분당건마 분당오피 koykoyah 2025.02.22
선릉오피 선릉오피 ⦑오피쓰.COM⦒ 선릉OP 선릉스파 선릉오피 koykoyah 2025.02.22
용인오피 ⦑출장마사지안내.COM⦒ 용인오피 용인출장마사지 용인오피 용인OP koykoyah 2025.02.22
안산오피 안산출장안마 ⦑오피사이트.NET⦒ 안산OP 안산오피 안산오피 koykoyah 2025.02.22
해운대오피 해운대OP ⦑오피쓰.COM⦒ 해운대휴게텔 해운대오피 해운대오피 koykoyah 2025.02.22
역삼오피 역삼OP ⦑오피쓰.COM⦒ 역삼휴게텔 역삼오피 역삼오피 koykoyah 2025.02.22
서초오피 ⦑오피쓰주소.COM⦒ 서초OP 서초오피 서초출장샵 서초오피 koykoyah 2025.02.22
동대문오피 ⦑오피사이트.NET⦒ 동대문오피 동대문OP 동대문건마 동대문오피 koykoyah 2025.02.22
목포오피 ⦑오피쓰주소.COM⦒ 목포OP 목포오피 목포출장샵 목포오피 koykoyah 2025.02.22
세종오피 세종출장안마 ⦑오피사이트.NET⦒ 세종OP 세종오피 세종오피 koykoyah 2025.02.22
영등포오피 ⦑출장마사지안내.COM⦒ 영등포오피 영등포OP 영등포건마 영등포오피 koykoyah 2025.02.22
여의도오피 여의도오피 ⦑오피.CLUB⦒ 여의도OP 여의도스파 여의도오피 koykoyah 2025.02.22
강동오피 강동OP ⦑오피.CLUB⦒ 강동휴게텔 강동오피 강동오피 koykoyah 2025.02.22
전주오피 ⦑오피사이트.NET⦒ 전주마사지 전주오피 전주오피 전주OP koykoyah 2025.02.22
산본오피 ⦑오피.CLUB⦒ 산본마사지 산본오피 산본오피 산본OP koykoyah 2025.02.22
분당오피 ⦑오피.CLUB⦒ 분당마사지 분당오피 분당오피 분당OP koykoyah 2025.02.22
수원오피 ⦑출장안마사이트.COM⦒ 수원오피 수원출장마사지 수원오피 수원OP koykoyah 2025.02.22
목포오피 ⦑출장안마사이트.COM⦒ 목포오피 목포출장마사지 목포오피 목포OP koykoyah 2025.02.22
태그 쓰기