웹마스터 팁

Cooliris Embed a Wall 위젯 v2.0은 Cooliris 프로그램을 활용하여 제로보드 내에 있는 최근 이미지들을 추출하여 3D로 보여주는 위젯입니다.

아래 링크를 클릭하시면, 자세한 사항을 확인하실 수 있습니다.

http://www.xpressengine.com/downloadWidget/18200857 

 

이미 위 위젯을 사용하시는 분들에게 드리는 팁임을 알려드립니다.

 

-----------------------------------------------------------------------------------------------

 

[샘플 Cooliris Embed a Wall

*동영상 파일 하나 올리기가 뭐해서 이미지파일들도 포함시켜봤습니다.

 

이미 우리는 제로보드에서 라르게덴님의 애드온과 저의 위젯을 이용하여 최근이미지를 3D로 추출하여 홈페이지를 멋지게 꾸미고 있습니다.

 

원래 Cooliris 프로그램은 이미지 뿐아니라 동영상(flv)파일까지 추출하여 보여줄 수 있지만, 라르게덴님의 애드온은 게시판에 첨부된 이미지만을 대상으로 하기 때문에 동영상을 추출할 수는 없습니다. 그래서 간단한 수작업을 통해 동영상(flv)을 Cooliris Embed a Wall 위젯 v2.0을 통해 표시하도록 하는 방법을 팁으로 알려드리도록 하겠습니다.

 

아래의 설명대로 그냥 따라해 보시면, 누구나 쉽게 이해하시고, 다양한 형태로 활용하실 수 있으리라 생각됩니다.

 

[준비물]

1. flv 동영상파일

2. 동영상 썸네일 이미지

3. MediaRss 파일

 

 

[준비작업]

될 수 있는 한 파일명은 공백이 없는 영문으로 지정하시기 바랍니다. 한글로 할경우 예외적인 오류가 발생합니다.

 

1. flv 준비하기 - Cooliris는 flv만을 지원합니다.

일반적으로 가지고 계신 파일들이 flv파일은 아니실 겁니다. wmv나 avi, mp4 등의 파일이라면, 동영상 인코더를 통해 변환해야 합니다. 제가 사용하는 인코더는 다음팟 인코더 입니다. 해당 프로그램 사용법은 해당 사이트에서 확인하시기 바랍니다.

링크 : http://tvpot.daum.net/encoder/PotEncoderSpec.do

 

2. 동영상 썸네일 준비하기

해당 동영상의 스틸컷 한장만 준비하시면 됩니다. 동영상과 상관없는 이미지를 사용하셔도 무방합니다. 일단 위젯에서는 이 동영상의 썸네일을 보여주고, 이를 클릭하시면, 동영상을 재생하게 됩니다. 참고로 동영상의 스틸컷을 만드는 것은 곰플레이어 또는 KMPlayer 등에서 쉽게 얻으실 수 있습니다.

 

이렇게 해서 아래의 그림처럼 동영상파일과 관련 스틸컷 이미지를 준비하였습니다.

1.jpg

 

3. RSS 파일 준비하기 [샘플다운 : movie.rss ]

위 스샷에 보시면, rss 파일이 한개 보이실 겁니다. 스샷처럼 rss파일을 동영상이 있는 곳에 함께 두셔야 합니다. rss 파일의 내용은 다음과 같습니다.

 

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss">
<channel>

<generator>piclens publisher win 1.0.12</generator>
<title></title>
<link></link>
<description></description>
        <item>
            <title>when you be lieve</title>
            <link>./whenyoubelieve.jpg</link>
            <media:thumbnail url="./whenyoubelieve.jpg"/>
            <media:content type="video/x-flv" url="./whenyoubelieve.flv"/>
        </item>

        <item>
            <title>동영상 제목</title>
            <link>링크</link>
            <media:thumbnail url="동영상 썸네일 이미지 파일"/>
            <media:content type="video/x-flv" url="flv 동영상 파일"/>
        </item>

</channel>
</rss>


동영상 1개당 <item> ~ </item> 이라고 생각하시면, 됩니다. 다른 내용은 모두 동일하게 하시고, 빨간글씨 부분만 알아서 편집 및 추가하시면 됩니다. 확장자를 rss로 하셔서 저장하시면 됩니다. 링크부분은 클릭하면 이동하는 주소이므로 원하시는 링크를 입력하시면, 됩니다. 위에는 이미지를 링크해 놓았기 때문에 클릭하면 페이지에 이미지가 표시되게 됩니다.


<item>

   <title></title> : 제목을 입력하는 부분입니다.
   <link></link> : 동영상의 링크주소룰 입력하는 부분입니다.
   <media:thumbnail url=""/> : 동영상의 썸네일 이미지주소를 입력하는 부분입니다. 
    <media:content type="video/x-flv" url=""/> : 동영상의 주소를 입력하는 부분입니다.

</item>

 

 

[Cooliris Embed a Wall 위젯에서 rss 파일 사용하기]

1. 준비한 파일 업로드

준비한 파일들을 홈페이지 계정에 폴더하나 만드셔서 전부 한 폴더에 업로드 시킵니다. 만약 test라는 폴더를 만들고, 그 안에 준비한 파일을 모두 업로드 하셨다면, rss 파일의 위치는 "도메인주소/test/파일명.rss" 가 되겠죠?

 

2. 위젯에서 설정하기

아래 그림처럼 위젯에서 추출대상을 외부 MediaRSS로 하시고, 주소입력란에 "도메인주소/test/파일명.rss"를 입력하시면됩니다.

2.jpg 

 


[추가팁:게시판에 첨부한 동영상파일 사용하기]

1. 게시판을 하나 만듭니다.

2. 글쓰기를 하여 파일 첨부에 동영상 flv파일과 동영상 썸네일 이미지 파일을 업로드 합니다.

3. 파일을 첨부한 후에 본문삽입을 하시면, 게시판 내용에 아래 그림처럼 멀티미디어와 이미지가 들어가는 것을 볼 수 있습니다. 해당내용을 더블클릭하면, 아래 스샷처럼 경로를 확인할 수 있습니다.

3.jpg 

4. MediaRSS파일 편집하기

3번과정에서 얻은 동영상 flv파일과 이미지 파일의 경로를 아래 내용처럼 편집하시면 됩니다.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss">
<channel>

<generator>piclens publisher win 1.0.12</generator>
<title></title>
<link></link>
<description></description>
        <item>
            <title>when you be lieve</title>
            <link>http://jc.vip.sh/?mid=xxxx&document_srl=59856</link>
            <media:thumbnail url="http://jc.vip.sh/files/attach/131212/123/12312/whenyoubelieve.jpg"/>
            <media:content type="video/x-flv" url="http://jc.vip.sh/files/attach/12321/123/12312/whenyoubelieve.flv"/>
        </item>

</channel>
</rss>

 

링크에는 게시판의 주소를 입력하시면, 링크 클릭시 게시물로 이동하게 됩니다.


원리는 매우 단순합니다. 익숙하지 않은 분들을 위해 조금 상세하게 쓴다고 설명이 좀 길어졌네요^^

휴가에서 돌아오자 마자 팁 남겨봅니다.

 

 

 

 

제목 글쓴이 날짜
모바일에서 댓글 중복되는 현상 해결- 애드온 문제 Happiness 2013.07.24
XE 1.5 를 1.7 로 업데이트한 경우, 카테고리 사용여부 설정 버그 수정법 sejin7940 2013.07.21
게시글에 댓글 부분 추천, 비추천 바로 노출하기 [5] file 똑디 2013.07.19
XE 1.7으로 업데이트 한 후 게시판을 생성하실 수 없으신가요? file 윈컴이 2013.07.19
회원가입폼에 필수항목 * 부분 처리 [3] 똑디 2013.07.18
XE 1.5 or 1.7 업그레이드후 글 ,댓글 쓸때 "내용 값은 필수" 혹은 내용 입력 하라는 메세지 뜰때 [3] Happiness 2013.07.17
모바일 설문조사 크기조절하기 다른 버전 [4] 낭만구미호 2013.07.15
모바일 설문조사 크기조절하기 ~ 오락실주인 2013.07.14
XE Recruitment 파일 미추가시 에러 뿜어내는 것 처리방법 [7] 송동우님최고 2013.07.12
[리눅스] 속도향상 팁. nginx를 리버스프록시로 써봅시다. [6] choco@_@ 2013.07.11
1.4에서 1.7로 바로 업데이트 안전하게 하기 [1] HolyJohn 2013.07.10
IPGUARD 모듈 배포 [33] file 우진홈 2013.07.10
스케치북5 sns버튼에서 요즘 삭제하기 [6] 도라미 2013.07.07
제이쿼리로 에디터에 내용 넣기 [1] Lansi 2013.07.02
크롬 사용시 타이태니엄 2013과 스케치북 게시판 충돌! 착한부산남자 2013.07.02
APM 세팅파일 webgon 2013.07.01
rewrite mod 가 안 돼서 고생한 경험담입니다. [2] obok 2013.06.29
모바일 파일첨부 테스트.. (극소수) 안되시는 분들 낭만구미호 2013.06.28
스케치북 게시판 스킨에서 라이브리 소셜댓글 다는 법(수정완료) file 착한부산남자 2013.06.27
view_document.html 없는 곳에 구글 애드센스 삽입하기.. file 착한부산남자 2013.06.27