유튜브 동영상갤러리 블로그에서 활용하는 방법

2009.12.28 00:34



유튜브 동영상을 페이지 이동없이 동일 페이지내에서 볼수는 없을까?

계속해서 동영상 갤러리를 만들면서 누구나 쉽게 할 수 있는 방법을 찾게 되었습니다.


제가 사용을 하면서 가장 편하고 좋은 소스이어서,

동영상 갤러리를 만들고자 하는 분들에게 소개를 하고자 합니다.


처음에는 아무것도 몰라서 무식한 방법으로

소스를 그대로 복사하여 붙여넣기 하기도 하였습니다.

어떤것은 되고, 또 어떤것은 불가능하고 여러번의 시행착오를 거쳐서 찾게 되었는데,


가장 쉬운 방법인 JSON을 이용한 방법입니다.

누구나 간편하게 소스를 복사하여 붙여넣기를 하면 됩니다.
그리고 비디오 선택은 앞에서 작성한 Video Feeds URL을 참조합니다.
보다 디테일한 검색을 위해서는 여기를 참조하시길 바랍니다.

즉, 소스에서 Video Feeds URL만 바꿔주면 되는 간단한 소스입니다.

예전에 작성한


한 페이지 내에서 이동없이 thumbnail을 클릭하면 동영상 볼 수 있도록 만든 것 입니다.

또한

유튜브내에서 순위변동이 있거나, 유저의 업로드가 이루어지면 자동적으로 업데이트가 됩니다.



* 기본주소 Thumbnail 영역

1. 채널 <user의 업로드>
비디오 Thubnail이 보여지는 영역은 다음과 같습니다.
뜨거운 영어강사 HotForWords 채널의 동영상 30개를 볼 수 있는 것입니다. <샘플>
30 대신에 원하시는 동영상 수 만큼 적어주시면 됩니다.
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/users/hotforwords/uploads?alt=json-in-script&callback=showMyVideos2&max-results=30">
</script


2. 제목검색
christmas 를 검색어를 사용한 경우 <샘플>
christmas라는 제목을 가진 30위권 동영상이 보여집니다.
검색어 추가를 하기 위해서는 christmas 다음에 +검색어 를 더해주시면 됩니다.
채널주소와 달리 주소에 &format=5 붙는데 이것은 소스가 비공개 된 영상들을 가져오지 않는 것입니다. 유명한 채널의 업로드된 영상은 소스가 비공개될 확률이 적으므로 붙지 않습니다.
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/api/videos?q=christmas&alt=json-in-script&callback=showMyVideos2&max-results=30&format=5">
</script>


3. 태그검색
2번의 제목 검색과 결과물이 비슷한데요, funny와 commercial의 태그를 가진 동영상을 최상위 30개까지 찾아줍니다. funny라는 태그만 찾고 싶을때는 /commercial부분을 삭제해주시면 됩니다. <샘플>
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/api/videos/-/funny/commercial?alt=json-in-script&callback=showMyVideos2&max-results=30&format=5">
</script> 


4. Standard Feeds
이것은 MOVYX 첫페이지에 사용되는 스탠다드 예제입니다.
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed?time=today&alt=json-in-script&callback=showMyVideos2&max-results=30&format=5">
</script> 


5. Standard Feeds 지역을 변경하고 싶을때는
JP, KR, UK 등 대문자로 작성하여 아래보이는 JP 대신에 바꾸어 넣어주시면 됩니다.
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_viewed?time=today&alt=json-in-script&callback=showMyVideos2&max-results=30&format=5">
</script> 


* 기본주소 Player 영역
function loadVideo(playerUrl, autoplay) {
  swfobject.embedSWF(
      playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
      (autoplay?1:0), 'player', '480', '385', '9.0.0', false, 
      false, {allowfullscreen: 'true'});
}

현재 4:3비율인 480X385로 되어 있습니다.
다른 비율로 변경을 하고 싶을 경우 480, 385 부분을 바꾸어 주시면 됩니다.
 

YouTube추천 화면비율 16:9

16:9




YouTube추천 화면비율 4:3

4:3




이러한 조합들을 응용하여 자신만의 동영상을 찾아내어
블로그나 홈페이지에 올릴 수 있습니다.
 
아래는 google에서 제시한 소스입니다.
소스와 URL을 참조하여 블로그에서 활용하시길 바랍니다.
스타일 부분에서 자신의 블로그에 맞게 편집을 하시길 바랍니다.
그리고 html편집 상태에서 저장을 하시고 수정시 깨집니다. 한번에 완료를 하셔야 합니다.

<html>
<head>
<title>My Videos</title>
<style>
.titlec {
  font-size:10pt;
}
ul.videos li {
  float: left;
  width: 10em;
  margin-bottom: 1em;
}
ul.videos
{
  margin-bottom: 1em;
  padding-left : 0em;
  margin-left: 0em;
  list-style: none;
}
</style>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
function loadVideo(playerUrl, autoplay) {
  swfobject.embedSWF(
      playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
      (autoplay?1:0), 'player', '290', '250', '9.0.0', false, 
      false, {allowfullscreen: 'true'});
}

function showMyVideos2(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul class="videos">'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t.substr(0, 20);
    var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
    var playerUrl = entries[i].media$group.media$content[0].url;
    html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
              '<span class="titlec">', title, '...</span><br /><img src="', 
              thumbnailUrl, '" width="130" height="97"/>', '</span></li>');
  }
  html.push('</ul><br style="clear: left;"/>');
  document.getElementById('videos2').innerHTML = html.join('');
  if (entries.length > 0) {
    loadVideo(entries[0].media$group.media$content[0].url, false);
  }
}
</script>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
    <object id="player"></object>
</div>
<div id="videos2"></div>
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/users/GoogleDevelopers/uploads?alt=json-in-script&callback=showMyVideos2&max-results=30">
</script>
</body>
</html>


신고
  1. 이거 제가 하기에는 난이도가 참 높네요. 내공을 쌓고 다시 도전해야겠어요. ㅠㅠ

  2. 좀더 쉬운 방법을 올려보았습니다.

    http://tyzen.net/142

    JMI님 새해 복 많이 받으세요

  3. 우와; 이런 방법도 있었군요;
    그냥 포스트내에서 비디오 업만 하던 저에겐.. 너무나 새롭군요. 그나저나.. 수정하면 깨져서 한번에 완료해야한다니.. 내공을 좀 쌓고 도전해봐야겠습니다.

    좋은 글 언제나 감사드려요~

  4. 항상 좋은 댓글 감사합니다.

    새해 복 많이 받으세요

  5. .......*^l^*.......
    까치 창 앉으며
    새 아침에
    손님 온다고 그래...

    희망 과 소망
    2010 경진년
    행복은 곁에 있어요
    사랑으로...
    기다림에

  6. 김재덕 님

    항상 좋은 글귀에 감사를 드립니다.

    저도 어떻게 하면 님 처럼 글을 쓸 수 있을까요?

    새해 복 많이 받으세요

  7. 비밀댓글입니다

  8. 님의 포스팅이 많은 도움이 되었습니다
    감사합니다

    한가지 질문이 있는데요,
    위의 포스팅 가장 아래에 있는 google에서 제시한 소스를 이용해서
    유튜브 갤러리를 만들었는데요

    최신순으로 정렬되게 하는 방법은 없나요?

티스토리 툴바