YouTube Player & Data API

2010.06.05 12:43



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

그리고 YouTube 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("https://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("https://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>

TEXTTUBE YouTube API , , , , ,