YouTube Player & Data API 2

2010.06.05 21:11


유튜브 플레이어 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('https://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>

TEXTTUBE YouTube API , , , , , , ,