유튜브 동영상갤러리 쉽게 만들기

2009.12.28 14:09



유튜브 동영상갤러리를 누구나 편하고 가장 쉽게 만드는 방법은 없을까?

계속해서 유튜브와 관련하여 정보를 수집하면서,

가장 편한 방법을 찾고자 노력을 했었습니다.

가장 쉽고, 사용하기 편한 방법인 JW Player를 활용하는 것입니다.

아래 영상들은 제가 유튜브 영상중에 재생목록(playlist)로 등록한 동영상 입니다.
재생목록은 무한대로 playlist를  만들 수 있으므로 가장 유용하게 활용할 수 있을 것 입니다.
오늘 뒤늦게 유튜브 검색기 플러그인을 설치하였습니다. 검색기를 이용하셔서 원하시는 동영상도 시청하실 수 있습니다. <현재 블로그 내에서는 익스플로러만 지원이 됩니다. 다른 브라우져는 s, q를 입력하면 다른 곳으로 이동이 됩니다.>
홈페이지나 XE에서는 모두 가능합니다.


This text will be replaced


JW Player의 장점은 유튜브 광고가 없고, 유튜브 페이지로 이동없이 동일 페이지내에서 전체화면이 가능하며, 다양한 콘트롤 기능을 가지고 있습니다.

YouTube에 채널(user) 이 있고, 동영상 갤러리를 만들고자 하는 분들에게 소개를 하고자 합니다.

방대한 유튜브 영상 중에서 자신이 선호하는 영상만으로 갤러리를 만들기 위해서는 아래의 주소들을 활용합니다. 최대 25개의 동영상이 가능합니다.
즉, 아래 소스에서 feeds 주소만 변경하여 주면 가능합니다.


USER  Feeds 주소
업로드 : http://gdata.youtube.com/feeds/users/username/uploads
즐겨찾기: http://gdata.youtube.com/feeds/users/username/favorites
재생목록: http://gdata.youtube.com/feeds/api/playlists/재생목록넘버
<재생목록으로 가장 유용하게 활용할 수 있습니다.>

Search  Feeds 주소
제목검색: http://gdata.youtube.com/feeds/api/videos?q=search+title
태그검색: http://gdata.youtube.com/feeds/api/videos/-/search/tag


Standard Feeds 주소 <more>
http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured
http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed
http://gdata.youtube.com/feeds/api/standardfeeds/top_rated


JW Player 설치방법
아래 세개의 화일을 웹스페이스에 업로드하여 사용할 때 마다 주소를 넣어주시면 됩니다.


현재 웹호스팅 서비스를 받지 않고 계신다면 제것을 사용하셔도 됩니다.
swfobject: http://movyx.com/jwplayer/swfobject.js
player: http://movyx.com/jwplayer/player.swf

Source
<script type='text/javascript' src='http://movyx.com/jwplayer/swfobject.js'></script> <div id="mediaspace">my fifth youtube gallery 입니다.</div> <script type="text/javascript"> var so = new SWFObject('http://movyx.com/jwplayer/player.swf','ply','560','640','9','#ffffff'); so.addParam('allowfullscreen','true'); so.addParam('allowscriptaccess','always'); so.addParam('wmode','opaque'); so.addVariable('playlistsize','300'); so.addVariable('playlistfile','http://gdata.youtube.com/feeds/api/playlists/5F347373E4BB8596'); so.addVariable('playlist','bottom');
so.addVariable('plugins','yousearch-1');
so.write('mediaspace'); </script>


위의 소스를 활용하여 블로그에 복사 붙여넣기 하여주시면 됩니다.

player 크기 변경: 560, 640 부분을 변경하여 주세요

아래비율에서 thumbnail 영역인 높이 300을 더해주세요.

예) 560X640= 560 X (340+300)

YouTube추천 화면비율 16:9




YouTube추천 화면비율 4:3




동영상 Feeds 변경: playlistfile gdata 주소 부분을 변경하여 주세요


주의사항: html편집에서 저장하여 주시고, 수정시 첫째 줄이 없어집니다.
첫째줄만 다시 입력하여 주세요.


즐겨찾기와 재생목록: 공개가 되어 있어야 합니다. <more>

YouTube 검색기능: 제가 플러그인을 설치하였습니다. <참조>
이 기능을 없애고 싶을때는 so.addVariable('plugins','yousearch-1');
삭제하세요.

JW Player 다양한 기능: 다양하게 적용이 가능합니다. <참조>

처음 시작하시는 분들에게 많은 도움이 되기를 바랍니다.




신고
  1. 오오.. 지난번 블로그에서 활용하기에 이어서
    좋은 팁인듯 하군요..

    개인적으로는 search기능이 제일 맘에 드는군요 ^^

    언제나 좋은 정보 감사합니다~

  2. GrimAngel님 항상 좋은 댓글에 감사 드립니다.

    새해 복 많이 받으세요

    내년에도 좋은 교류가 있었으면 좋겠습니다.

  3. 네 저야말로 새해에도 잘부탁드립니다~^^
    좀 늦었지만 Tyzen님도 새해 복 많이받으세요~

  4. 좋은 정보 감사합니다.^^

  5. 새해 첫 댓글에 감사드립니다.

    새해 복 많이 받으세요

  6. 오오 유용한 정보네요+_+
    감사합니다^^

  7. 감사합니다.

    랑유님 새해 복 많이 받으세요

  8. 행복마루

    유용한 정보 감사합니다.
    그런대... 플래이리스트 위에 플레이어에서 검색창이 아닌 그냥 특정 동영상이 나오게 할수는 없나요?

티스토리 툴바