유튜브 API - Player and Data API

2010.03.02 21:56


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

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

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


아래 문장에서 i 는 비디오 정보의 노드인 items의 넘버를 나타냅니다.
만약 썸네일의 갯수가 10개라면 i 는 0에서 시작하여 9로 끝나게 됩니다.
그러므로 첫 번째 동영상 정보는 i=0 이 됩니다. loadingVideo 라는 새로운 function을 만들어 아래처럼 하여 작성하여 주면 처음으로 표시되는 썸네일의 영상이 자동으로 로딩이 됩니다.
자동으로 첫번째 videoID가 loadingvideo function으로 넘어가게 됩니다.
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><a href="javascript:ytplayer.loadVideoById(\''+videoID+'\')">');
    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) { loadingVideo(json.data.items[0].id); }
}
function loadingVideo(videoID) {
  swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "?version=3&enablejsapi=1&playerapiid=ytplayer&fs=1",
  'ytPlayer', '640', '385', '9.0.0', false, false, {allowScriptAccess: 'always',allowfullscreen: 'true'});
  }


DEMO: AS3, Resize, Full Screen Player & DATA API




<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><a href="javascript:ytplayer.loadVideoById(\''+videoID+'\')">');
    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) {
    loadingVideo(json.data.items[0].id);
  }
}
function onPlayerError(errorCode) {
        alert("An error occured of type:" + errorCode);
      }
 
function onYouTubePlayerReady(playerId) {
        ytplayer = document.getElementById("ytPlayer");
        ytplayer.addEventListener("onError", "onPlayerError");
      }

function loadingVideo(videoID) {
  swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "?version=3&amp;enablejsapi=1&amp;playerapiid=ytplayer&amp;fs=1",
  '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;
}
 
ul.videos li img {
border: 3px solid #fff;
 cursor: pointer;
}
 
</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' 카테고리의 다른 글

유튜브 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
유튜브 DATA API 1  (4) 2010.03.01
유튜브 플레이어 API 2 - 크기변경과 전체화면  (0) 2010.02.28
  1. TYZEN님 요샌 포스팅 자주 하시니, 저도 기분이 좋아요 ^^
    오늘은 날이 개서 저까지 상쾌해지네요.
    점심은 맛나게 드셨는지요?
    아무쪼록 오늘도 평안하고, 즐거운 하루 보내시고요.
    좋은 API정보 저도 숙지할게요. :)

  2. 감사합니다.

    누군가에게는 도움이 되기를 바라며 작성하고 있습니다.

    많은 도움이 되시길...

    좋은 하루 되세요

티스토리 툴바