유튜브 API - Player and Data API 2

2010.03.09 19:36


유튜브 플레이어 API 를 통해 유튜브에서 제공하는 플레이어들을 살펴보고, 동영상 변경이 가능한 방법과 다양한 효과에 대해서 살펴 보았습니다.

그리고 유튜브 DATA API를 통해 동영상 DATA를 처리하는 방법 또한 살펴 보았습니다.

이번에는 썸네일 첫번째 영상을 자동으로 플레이어에 로딩 시키고 썸네일 클릭시 플레이어도 변경시키는 좀 더 쉽고 간결한 방법에 대해서 알아 보도록 하겠습니다.

동영상 변경시 플레이어도 같이 변경이 됩니다.



<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<SCRIPT type="text/javascript"> 
function HDPlayer() {
        resizePlayer(640, 385);
      }
 
function HQPlayer() {
        resizePlayer(480, 385);
      }
 
function resizePlayer(width, height) {
        var playerObj = document.getElementById("ytPlayer");
        playerObj.height = height;
        playerObj.width = width;
      } 
function showMyVideos(json) {
  var data = json.data;
  var items = json.data.items || [];
  var html = ['<ul class="videos">'];
  for (var i = 0; i < items.length; i++) {
    var title = json.data.items[i].title;
    var thumbnailUrl = json.data.items[i].thumbnail.sqDefault;
    var videoID = json.data.items[i].id;
    html.push('<li onclick="loadVideo(\'',videoID, '\', true)">');
    html.push('<img src="',thumbnailUrl,'" width="120" height="90"></a>');
    html.push('<br>', title, '</li>');}
    html.push('</ul><br style="clear: left;"/>');
 
  document.getElementById('videolist').innerHTML = html.join('');
 if (items.length > 0) {
    loadVideo(json.data.items[0].id,false);
  }
}
function loadVideo(videoID, autoplay) {
  swfobject.embedSWF('http://www.youtube.com/v/' + videoID + '?version=3&fs=1&autoplay=' + (autoplay?1:0)
  ,'ytPlayer', '640', '385', '9.0.0', false, false, {allowScriptAccess: 'always',allowfullscreen: 'true'});
  }

</SCRIPT>
<STYLE> 
ul.videos li {
overflow: hidden;
float: left;
width: 126px;
 margin:0px;
padding:0px;
font-size: 11px;
font-family: Verdana, Arial;
height: 185px;
cursor:pointer;
}
 
ul.videos li img {
border: 3px solid #fff;
}
 
</STYLE> 

<div><object id="ytPlayer"></object></div><br>
<DIV id=videoInfo><INPUT onclick=javascript:HDPlayer() value=Widescreen type=button> <INPUT onclick=javascript:HQPlayer() value=Standard type=button></DIV><br>

<DIV id=videolist></DIV>  
<SCRIPT type=text/javascript src="http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured?v=2&alt=jsonc&callback=showMyVideos&max-results=10&format=5"></SCRIPT>

신고

'YouTube' 카테고리의 다른 글

YouTube Playlists and Autoplay  (2) 2010.03.13
YouTube nyroModal Gallery  (6) 2010.03.11
유튜브 API - Player and Data API 2  (2) 2010.03.09
유튜브 DATA API 2 -Thumbnail  (2) 2010.03.03
유튜브 API - Player and Data API  (2) 2010.03.02
유튜브 DATA API 1 source  (1) 2010.03.01

  1. 안녕하세요. TYZEN님
    오랜만에 포스팅하셨군요.
    유튜브 변경소스 잘 보고 가요.
    나중에 유용하게 쓸 수 있겠어요. ^^
    전국이 날씨가 어수선한데, 퇴근은 괜찮으셨는지..
    내일 출근길도 조심하시고, 편한 밤 보내세요. :)

  2. 감사합니다.

    오늘 눈이 많이와서 출근은 잘 하셨는지요?

    좋은 하루 되세요

티스토리 툴바