YouTube Playlists and Autoplay

2010.03.13 23:42


이번 시간에는 지금까지 학습한 것을 응용해 누구나 이용할 수 있도록 사용자가 좀더 쉽고 편한 방법으로 접근을 하고, 유튜브계정에 등록한 즐겨찾기 또는 재생목록을 이용해 갤러리를 만들고 자동플레이(순차적재생) 하는 방법에 대해 알아보도록 하겠습니다.

 

일반적인 순차적재생은 DB로 연결해서 사용하는 것으로 알고 있는데, 저는 아직 실력이 부족해서 그 방법은 잘 모르겠습니다. 제가 사용한 방법은 동영상이 끝나기 1초전에 강제로 정지시키고, 다음 영상을 로딩시키는 방법을 사용하였습니다.

그리고 만약에 유튜브 이용자가 많을 경우 다음영상이 바로 로딩이 되질 않아서 먹통이 되는 경우도 있습니다. 정상적일 경우 Never Stop이 됩니다.

 

DEMO : My Playlists & Autoplay




 

Source

<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script> 
<script type="text/javascript" src="http://movyx.com/mov/playlists.js"></script>
<style type="text/css">
dl.playlist  {
    margin:0;
    padding:0;
    color: #000;
    font-size: 11px;
    text-align: center;
}
dl.playlist dt {
float:left;
padding:1px;
        margin:0;
width: 126px;
height: 150px;
}
#dl1 img{
border: 3px solid #fff;
}
</style>
<div id="ytapiplayer"><object id="playerid"></object></div><br>
<DIV id=videoInfo><INPUT onclick=javascript:HDPlayer() value=Widescreen type=button> <INPUT onclick=javascript:HQPlayer() value=Standard type=button></DIV><br>
<dl id="dl1" class="playlist">
<script type="text/javascript">
<!--
Playlists('5F347373E4BB8596',20);
//-->
</script>
 
</dl>
<br>
<div class="clear"></div>

 

자동플레이 소스코딩은 제가 직접작성 하였습니다.

필요하신분은 http://movyx.com/mov/playlists.js 에서 다운받아 사용하시길 바랍니다.

 

사용방법은 위의 소스를 그대로 복사 붙여넣기 한 다음

아래의 설명을 참조하여 수정을 합니다.

소스가 마우스를 막아 놓아서 안 될것입니다. 오페라 브라우져를 이용하세요

 

재생목록

Playlists('Your Playlist ID',Max Results);
재생목록 넘버와 원하시는 동영상 갯수를 넣어 주시면 됩니다. 최대 50개까지 가능합니다.

또한

즐겨찾기
Channel('Your YouTube ID',Max Results);
유튜브 아이디와 원하시는 동영상 갯수를 넣어 주시면 됩니다. 최대 50개까지 가능합니다.

 

그러면 자동적으로 첫번째 동영상이 로딩이 되고 썸네일이 보여질 것 입니다.

동영상 크기는 자바스크립트 소스에서 수정을 하여 크기를 조절하시길 바랍니다.

위의 소스를 이용해 유튜브에서 좋아하시는 음악들을 즐겨찾기와 재생목록을 만들어서 활용을 하신다면 좋을 것입니다.

현재 제가 예전에 만든 MOVYX에도 Autoplay 기능을 사용해 24시간 풀로 Never Stop Autoplay가 가능합니다.

신고

'YouTube' 카테고리의 다른 글

Lightbox for YouTube Videos - Fancy Box  (2) 2010.03.18
Videobox: Lightbox for YouTube videos  (0) 2010.03.18
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
  1. 좋은 자료 잘보고 갑니다. ^^
    아직은 스킨 겨우 수정하는 초보라, 무슨 말인지 다는 모르겠지만, 기준으로 삼을수 있겠습니다. ^^

  2. 댓글 감사합니다.

    저도 블로그하면서 실력이 많이 늘었네요

    필요에 의해서 찾아서 공부하다보니 재미있게 배울 수 있었습니다.

    좋은 주말 되세요

티스토리 툴바