youtube(유튜브) 동영상 black 없이 게시판에 embed하기
다행히 jwplayer에서 최근 youtube 동영상을 지원하기 시작하였기에 이를 활용하여 youtube 동영상을 embed 태그나 iframe 태그 없이 XE에 내재된 멀티미디어 삽입 컴포넌트를 가지고 이용하는 방법을 소개하고자 합니다.
주의 core의 common.js 파일을 변경하므로, 전문적인 지식이 없으신 분들은 수정전 파일을 백업을 꼭 하셔야 합니다. 수정으로 인한 보안 및 안전에 대한 책임은 본인이 지셔야 합니다.
1. 최신의 JWplayer를 다운 받습니다.
https://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 하는 스크립트를 작성합니다
레이아웃 편집에서 최상단에 아래 코드 삽입
5. XE 설치 폴더/common/js/common.js 에서 _displayMultimedia 함수를 찾고, 아래 조건문을 삽입
6. 멀티미디어 삽입 컴포넌트에서 youtube 공유 주소를 붙여 넣어 삽입해 보십시요~
이제 iframe이나 embed 없이도 youtube 동영상을 XE에 삽입하실 수 있습니다.
안녕하세요 반갑습니다. 구글링하다가 여기까지 오게되었습니다.
안그래도 유튜브 iframe 문제로 인해 게시판에 유튜브 삽입시 관리자외에 되지 않는 문제가 있어서 찾아오게 되었습니다.
iframe 이 되지 않으므로 저는 현재 사이트에서 유튜브영상의 원본 사이트 즉 "유튜브사이트에서 보기"를 하여 유튜브 사이트에서 영상의 소스보기를 할 경우에 iframe 이 아닌 embed 태그로 나타나므로 이러한 방법으로 embed태그로 삽입을 하고 있습니다.
더 간편히 멀티미디어컴포넌트로 삽입을 하고 싶어 찾게 되었는데요.
위 내용중에서 5번 항목이 잘 적용이 되지 않는군요.
현재 XE 1.4.5.10버전이며
_displaymultimedia 항목이 common.js파일을 열어보면 아주 길게 function 항목이 일렬로 주욱 되어 있습니다.
(궁금하여 1.5버전의 common.js를 열어보니 이건 보기 좋게 준단위로 되어 있군요.)
어쨌든 일렬로 되어 있는 상황에서 위 코드를 어떤식으로 넣어야 할지 막막합니다.
위 코드줄을 제가 옆으로 다 붙여서(일렬로)
_display 항목 elseif 부분을 찾아가서 비슷하게 붙여 넣어보아도 되지 않습니다.
5번 항목에 대해 조금더 자세한 설명을 부탁드립니다.
드림케쳐님. 안녕하세요?
제가 요즈음 개인적으로 조금 바쁜 일이 있다보니
답이 늦었습니다.
저도 이 부분에 대하여 명확하게 아는 부분이 없어서 도움이 될지가 의문입니다.
common.js 파일을 열어보면
13번째의 줄에 function displayMultimedia(src,width,height,options){var html=_displayMultimedia(src,width,height,options);if(html)document.writeln(html)}
그리고 14번째 줄에
function _displayMultimedia(src,width,height,options)가 있습니다.
위의 스크립트를 복사하여 윗부분이 끝나는 부분에 붙여넣기를 해보세요.
코드를 일부러 일렬도 넣지 않으셔도 됩니다.
function _displayMultimedia(src,width,height,options) 여기뒤에 바로 위 코드를 붙이란 말씀인가요?
붙여봤더니 브라우저에서 하단 상태 표시줄 좌측에 느낌표가 생깁니다. 보통 스크립트 등 문제가 있을때에 느낌표가 발생하는데요.
붙였더니 그러네요.
참 궁금한게 유튜브 영상이나 다음네이버등 소스코드가 아니라 소스 URL보기를 해서 그것을
컴포넌트에서 멀티미디어 로 주소란에 소스 URL을 넣어도 JWPLAYER 로 재생이 가능한것이지요?
현재 위 알려주신대로 해봤으나 그냥 네모박스만 보입니다.
그래요?
이상하네요.
URL을 넣어서는 사용을 해보지 않아서 잘 모르겠습니다.
다른 분들은 잘 사용을 하시는 것 같던데
저도 JwPlayer가 자꾸만 속을 썩이는 바람에 지금은 사용을 하지 않거든요.
예전에는 많이 사용을 했었는데..
혹시 iframe을 사용할 수 없기 때문에 제약을 받는 것이라면
xe 게시판에서 쉽게 ifraem을 사용할 수 있는 방법이 있습니다만.
감사합니다.iframe은 관리자외에 허용할 경우 보안상 위험할 수가 있다하여 적용해보지 않았습니다. 팁도 있긴 하던데요.
보안상 문제 없는 방식이라면 한번 알려주십시오.
lframe을 관리자 이외에 일반 접속자들에게도 사용하게 할 수 있는 방법은
간단합니다. - 사실 이러한 것을 누구도 알려주지 않은 탓에 혼자 노가다를 하였다는 ... -
/config/func.inc.php의 파일 내에 649 라인 쯤에 있는
function removeHackTag($content) {
// 특정 태그들을 일반 문자로 변경
$content = preg_replace('/<(\/?)(iframe|script|meta|style|applet|link|base|html|body)/is', '<$1$2', $content);
을 찾아서 그곳에서 "iframe|" 부분을 삭제해주시면 됩니다.
물론 script이나 mata, style 같은 태그를 사용하고 싶으실 때는 그 부분도 삭제를 해주면 되겠지요.
이 부분을 삭제를 해도 다른 곳에서 필터링을 하기 때문에
아직까지는 보안에 문제를 발견하지 못했습니다.
감사합니다. jwplayer 로 단순히 유튜브나 다음등 영상 주소를 멀티미디어 컴포넌트에 넣어서 바로 되게 하고 싶었지만 원래 알려주신 소스대로는 적용이 잘 안되는군요. 영상 소스코드 넣기로 밖에.. 안된다면 .
iframe이라도 일단 문제가 없다 하시니 일반회원도 쓸 수 있도록 위 조취를 해보겠습니다.
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
