XE 공식 자료실

제작자
배워서남준다
등록일
2012-04-16
다운로드 수
9,134
링크1
studyu.cafe24.com

웹에서 재생되는 각종 다양한 영상을 바로 재생할 수 있습니다.

라이선스
기타 라이선스
설치경로
./widgets/contentsmedia
최초 등록일
2012-03-11
전체 다운로드
12,580
체험하기

쉬운설치로 바로 체험할 수 있습니다

함께 설치해야 하는 확장 기능

다음 자료를 함께 설치하지 않으면 사용할 수 없거나 문제가 발생할 수 있습니다.

모듈 스킨 미디어보드 스킨

등록일
2012-04-16

상세 설명

미디어 위젯과 컨텐츠슬라이드 위젯이 하나로 통합된 XE 슬라이더 위젯이 있습니다.

XE 슬라이더 위젯만 있으면 홈페이지에 이미자와 영상을 출력하는데 더이상 고민할 필요가 없습니다.

첨부파일, 확장변수, 본문에 주소만 입력하면 모든 이미지와 영상 종류에 상관없이 자동으로 출력됩니다.

바로가기 : XE슬라이더 위젯



[미디어 위젯 0.7 업데이트 내용]

divx 플레이어 추가하였습니다.

미디어보드 0.4 버전에서 출력 오류를 수정하였습니다.

기타 작은 오류를 수정하였습니다.


[미디어 위젯 0.6 업데이트 내용]

AnythingSlider 스킨이 추가되었습니다. 

미디어보드와 연동하여 게시글 본문의 영상과 이미지 슬라이더로 사용되어집니다.

공개용 미디어 보드와 연동하여, 확장변수, 첨부파일뿐만아니라, 게시글 본문에 입력된 모든 영상 또는 이미지가 자동으로 슬라이드 됩니다.


미디어보드 예제 : http://studyu.cafe24.com/xe/index.php?document_srl=19782&mid=iCast



[기능설명]
  • 웹에서 재생될 수 있는 각종 다양한 형식의 영상을 바로 재생할 수 있습니다.
  • 윈도우 미디어 플레이어로 재생되는 영상도 모두 지원합니다. 
    첨부된 파일뿐만 아니라, 다음, 판도라, 네이버, 유투브, 비메오, 유쿠,아프리카등 외부 영상도 확장변수를 통해 모두 사용할 수 있습니다.
  • 당연히 모든 형식의 영상을 모두 무료로 사용할 수 있습니다. 
    기타 영상은 요청시 추가 지원해 드립니다.
  • 현재 사용되는 플레이어는 jwplayer, silverlight, swfobject, wmp, quicktime 등인데,
    다른 웹 플레이어도 추가 요청하시면 지원해 드립니다.
  • 추출 방식은 모듈과 직접 입력 방식 2가지가 있습니다. 
    직접 입력방식은 관리자가 영상 또는 이미지 주소등을 직접 입력하여 바로 사용할 수 있는 기능입니다.
  • 컬러 옵션을 통해 배경과 리스트 목록의 색상등을 마음대로 조절할 수 있습니다. 
    위젯박스 테두리는 위젯 스타일로 더욱 멋지게 꾸며서 사용하세요. ^^
  • XE 최신버전뿐만아니라 XE1.4.5.10 에서도 사용가능합니다.
[참고사항]
XE 1.4.5.10 버전의 기본 jQuery는 1.4.4 버전입니다. 미디어위젯 사용에는 크게 문제되지는 않으나, 가능하면 jQuery 1.7.1 최신버전에서 사용할것을 권장합니다.

[라이센스 안내]
배포되는 프로그램은 상업적인 목적으로 프로그램을 판매하거나 또는 재배포될수 없으며, 교육적인 목적으로 재수정하여 사용할 수 있습니다.

[잠깐! 위젯을 추가하기전에 아래 내용을 먼저 확인하세요.]
1. 플레이어가 실행안되는 오류가 있는분은 다음을 확인하세요.
관리자 페이지 > 일반 > XE 기본 URL 에서 사용자의 기본 URL이 http://studyu.cafe24.com/xe/ 처럼 맨끝에 슬레쉬(/) 가 있어야 합니다.

2. 유투브등 외부 영상을 로딩하지 못하는 오류가 있는 분은 다음을 확인하세요.
위젯 옵션에서 확장변수명이 올바르게 등록되었는지 확인하세요.
확장변수에 등록된 주소가 http:// 를 포함한 URL 주소로 등록되어 있는지 확인하세요.
외부영상이 게시글 내용에 embed 된 경우는 확장변수에 추가로 미디어 주소를 등록해 주어야 합니다.
확장변수 등록방법은 아래 내용을 참고하세요.

스킨 미리보기 : http://studyu.cafe24.com

[mplayer 스킨]
mplayer.png

[bxSlider 스킨]
bxSlider.png

[mediaNews 스킨]
medianews.png 

vimeo.png 

다음은 유투브등 외부 영상을 확장변수에 등록해서 사용하는 방법입니다.

[첫번째 단계] 확장변수를 등록하는 단계입니다.
게시판에 확장변수를 등록해서 추가된 입력항목에 동영상 주소를 등록해야 합니다.

1. 관리자페이지 > 확장기능 > 설치된 모듈 > 게시판 을 클릭합니다.

2. 게시판 관리페이지에서 확장변수를 등록할 게시판의 "설정" 버튼을 클릭합니다.

3. 게시판 정보페이지가 출력됩니다. 상단 메뉴중 "확장변수"를 클릭합니다.

4. 하단의 "추가" 버튼을 클릭합니다.

5. 확장변수 등록페이지가 출력됩니다. 아래와 같이 입력합니다. 
확장변수 이름 : url  (설명 - 확장변수 이름은 위젯에 확장변수에 등록되는 이름입니다.)
입력항목 이름 : URL (설명 - 게시판 글쓰기할때 제목아래에 출력되는 이름입니다.)
형식 : 한줄입력칸(text) 또는 URL 형식을 선택합니다.
** 확장변수 이름은 사용자임의로 지정해서 사용할수도 있습니다.

6. 모든 입력을 마쳤으면, 하단의 "추가" 버튼을 클릭하면 확장변수가 등록됩니다.
[게시판에 확장변수가 등록된 예]
ext1.png


[두번째 단계] 동영상 주소 등록하는 단계입니다.
1. 확장변수가 등록된 게시판에 글쓰기 버튼을 클릭합니다.

2. 제목 아래에 새로 등록된 입력항목이 보일것입니다. 
만약 보이지 않는다면 첫번째 단계를 다시 확인해 보세요.
그 입력항목에 동영상 주소를 입력합니다.
동영상 주소는 http:// 를 포함한 모든 URL 주소를 입력해야 합니다.
(예 : http://www.youtube.com/watch?v=AFvQTkNxIfY)

주의할 점은 : 본문 내용에 주소를 입력하는것이 아닙니다. 또한 확장컴포넌트를 통해 영상을 등록하는것도 아닙니다. 단지 새로 추가한 입력항목에 주소를 입력하는 것입니다.
만약 본문에 직접 재생되도록 하려면, HTML 편집기나 확장컴포넌트를 통해 embed 하셔야 합니다.
영상을 힘들게 embed 하지 않아도 자동으로 출력되는 미디어보드 스킨이 XE 마켓에 판매되고 있습니다.

3. 이미지 파일을 첨부하면, 미리보기로 출력됩니다. 동영상 파일을 첨부하면 동영상이 출력됩니다.

4. 마지막으로 등록버튼을 클릭해서 작성한 글을 저장합니다.
[외부 영상을 확장변수에 입력한 예]
ext2.png 

[세번째 단계] 페이지에 위젯을 등록하는 방법입니다.
1. 위젯을 추가할 페이지로 이동합니다.

2. 하단의 페이지수정 버튼을 클릭합니다.

3. 미디어 위젯을 선택한후, 추가 버튼을 클릭합니다.

4. 위젯 코드 생성 페이지에서 스킨을 선택한후, 선택 버튼을 클릭합니다.

5. 컬러셋을 선택합니다.

6. 대상모듈에는 위에서 등록한 게시판 모듈을 선택하여 추가합니다.

7. 확장변수에는 첫단계에서 등록한 확장변수 이름(url) 을 입력합니다.

8. 목록수를 입력합니다. 입력하지 않으면 기본값은 5개입니다.

9. 하단의 코드생성 버튼을 클릭합니다.

10. 페이지로 돌아와서 저장버튼을 클릭합니다.

출력 결과를 확인한후, 크기등을 수정해서 사용하세요.


설치가 잘 안되시거나, 기타 궁금한 사항, 오류 보고, 스킨 제작 요청등은 저의 홈피 질문답변 게시판에 올려주시면 성심껏 답변해 드리겠습니다.

배워서남준다 홈페이지 바로가기 : http://studyu.cafe24.com

감사합니다.

포럼 1

로그인 후 작성할 수 있습니다.
  • 2019-08-29 04:06:40 primesoup

    XE 버젼 1.10.* 이후로 작동이 되질 않더군요. 배워서남준다님도 더이상 업뎃이 없는 것 같고 다른걸로 교체할까 뒤적이다가 결국에는 소스에서 문제점을 발견하였습니다.

    ~/widgets/contentsmedia/contentsmedia.class.php 로 가서 이 부분을:

    //XE 버전체크
    $xever = __ZBXE_VERSION__;
    if($xever > '1.4.5.10') {
    $obj->statusList = array('PUBLIC');
    $output = executeQueryArray('widgets.contentsmedia.getDocuments152', $obj);
    } else {
    $output = executeQueryArray('widgets.contentsmedia.getDocuments', $obj);
    }

    모두 이렇게 바꿔주면 다시 정상적으로 실행이 됩니다. 뭐 주석 달기 보다는 그냥 삭제해되 될듯 하지만 알아서 하시길...

    //XE 버전체크
    //$xever = __ZBXE_VERSION__;
    //if($xever > '1.4.5.10') {
    $obj->statusList = array('PUBLIC');
    $output = executeQueryArray('widgets.contentsmedia.getDocuments152', $obj);
    //} else {
    // $output = executeQueryArray('widgets.contentsmedia.getDocuments', $obj);
    //}

    이 코드가 두군데 정도 있으니 모두 변경하면 됩니다 (라인 314 & 397).