반응형
유튜브 동영상 API를 사용하면, 본인이 원하는 동영상을 불러와서
바로 볼 수 있게끔 플레이어 부분과 페이징 부분이 나타나게 됩니다.
적용 예제는
http://shakej.co1.kr 의 공연영상 페이지를 보시면 되겠습니다.
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
function loadVideo(playerUrl, autoplay) {
swfobject.embedSWF(
playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
(autoplay ? 1 : 0), 'player', '480', '295', '9.0.0', false,
false, { allowfullscreen: 'true' }); //플레이어 크기를 지정해주세요
}
swfobject.embedSWF(
playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
(autoplay ? 1 : 0), 'player', '480', '295', '9.0.0', false,
false, { allowfullscreen: 'true' }); //플레이어 크기를 지정해주세요
}
function showMyVideos2(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul class="videos">'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t.substr(0, 9);
var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
var playerUrl = entries[i].media$group.media$content[0].url;
html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
'<span class="titlec">', title, '...</span><br /><img src="',
thumbnailUrl, '" width="130" height="97"/>', '</span></li>');
}
html.push('</ul><br style="clear: left;"/>');
document.getElementById('videos2').innerHTML = html.join('');
if (entries.length > 0) {
loadVideo(entries[0].media$group.media$content[0].url, false);
}
}
</script>
</head>
<body>
<center><div id="playerContainer" style="width: 480px; height: 295px; float: center;"> //이부분으로 플레이어 크기 및 배치를 정해줄 수 있습니다.
<object id="player"></object>
</div></center>
<div id="videos2" width=640px></div>
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul class="videos">'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t.substr(0, 9);
var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
var playerUrl = entries[i].media$group.media$content[0].url;
html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
'<span class="titlec">', title, '...</span><br /><img src="',
thumbnailUrl, '" width="130" height="97"/>', '</span></li>');
}
html.push('</ul><br style="clear: left;"/>');
document.getElementById('videos2').innerHTML = html.join('');
if (entries.length > 0) {
loadVideo(entries[0].media$group.media$content[0].url, false);
}
}
</script>
</head>
<body>
<center><div id="playerContainer" style="width: 480px; height: 295px; float: center;"> //이부분으로 플레이어 크기 및 배치를 정해줄 수 있습니다.
<object id="player"></object>
</div></center>
<div id="videos2" width=640px></div>
<script
type="text/javascript"
src="http://gdata.youtube.com/feeds/api/videos?q=한국언더힙합&alt=json-in-script&callback=showMyVideos2&max-results=30&format=5"> //q= '한국언더힙합'부분에 본인이 원하는 검색어를 쿼리로 날려주세요, max-results 최대 검색 결과 수
</script>
type="text/javascript"
src="http://gdata.youtube.com/feeds/api/videos?q=한국언더힙합&alt=json-in-script&callback=showMyVideos2&max-results=30&format=5"> //q= '한국언더힙합'부분에 본인이 원하는 검색어를 쿼리로 날려주세요, max-results 최대 검색 결과 수
</script>
<body> 부분에 넣어주시면됩니다!
반응형
'옛글 > 프로그래밍이야기' 카테고리의 다른 글
| 프로그래밍 이야기 - 두번째 이야기 (0) | 2010.10.28 |
|---|---|
| 프로그래밍 이야기 - 첫번째 이야기 (0) | 2010.10.28 |
| 'UHI' 2주간의 홈페이지 제작기 (0) | 2010.10.28 |
| 자바를 이용한 BMI체크(비만도체크)프로그램 (0) | 2010.10.28 |
| 프로그래밍 클래스의 개념 (0) | 2010.10.28 |