유튜브 플레이어 API
2010. 2. 27. 21:53
유튜브 API 첫번째 시리즈 유튜브 플레이어 API 입니다.
현재 유튜브에서 제공하는 플레이어는 3가지 종류가 있습니다.
일반적인 embedded 플레이어, 새롭게 출시된 ActionScript 버젼3 플레이어, 그리고 크롬리스 플레이어 입니다.
각 플레이어마다 고유의 특징을 가지고 있습니다.
플레이를 실행하시면 느끼실 수 있을 것입니다.
AS3과 크롬리스는 관련동영상이 제공되지 않으며 그리고 광고없이 시청을 하실 수 있습니다.
유튜브 플레이어 API를 이용하는 목적은
유튜브 Data API로 얻어진 검색 결과물의 영상들을 시청하실 수 있도록 하기 위함입니다.
각 플레이어의 예는 아래와 같으며, 소스도 활용하실 수 있습니다.
Normal Embedded Player
AS3 Embedded Player
Chromeless Player
Loading...
Player state: --
Current Time: --:-- | Duration: --:--
Bytes Total: -- | Start Bytes: -- | Bytes Loaded: --
<- Set Volume | Volume: --
플레이어 API학습의 목적은 동영상 내용물을 변경하는 것입니다.
변경을 하고자 할 경우 JavaScript 주소는 다음과 같습니다.
변경을 하고자 할 경우 JavaScript 주소는 다음과 같습니다.
즉 검색 결과물 썸네일을 아래주소로 만들어주면 되는 것입니다.
아래의 주소를 사용자가 클릭하게 되면 해당 videoID 내용으로 변경이 됩니다.
<a href="javascript:ytplayer.loadVideoById('videoID')">자동시작</a>
<a href="javascript:ytplayer.cueVideoById('videoID')">대기상태</a>
LOAD
CUE
Normal Embedded Player Source:
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("swfobject", "2.1");
</script>
<script type="text/javascript">
// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}
// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("ytPlayer");
ytplayer.addEventListener("onError", "onPlayerError");
}
// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
// The video to load
var videoID = "ylLzyHk54Z0"
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: "always" };
// The element id of the Flash embed
var atts = { id: "ytPlayer" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("https://www.youtube.com/v/" + videoID +
"&enablejsapi=1&playerapiid=ytplayer",
"videoDiv", "480", "295", "8", null, null, params, atts);
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);
</script>
<div id="videoDiv">Loading...</div>
위의 소스는 일반적인 embedded 플레이어의 코드입니다.
AS3 플레이어로 변경하고 싶을 경우 ?version=3 을 추가 해주세요.
"https://www.youtube.com/v/" + videoID +
"?version=3&enablejsapi=1&playerapiid=ytplayer"
Chromeless Player Source:
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("swfobject", "2.1");
</script>
<script type="text/javascript">
/*
* Chromeless player has no controls.
*/
// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}
// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}
// This function is called when the player changes state
function onPlayerStateChange(newState) {
updateHTML("playerState", newState);
}
// Display information about the current state of the player
function updatePlayerInfo() {
// Also check that at least one function exists since when IE unloads the
// page, it will destroy the SWF before clearing the interval.
if(ytplayer && ytplayer.getDuration) {
updateHTML("videoDuration", ytplayer.getDuration());
updateHTML("videoCurrentTime", ytplayer.getCurrentTime());
updateHTML("bytesTotal", ytplayer.getVideoBytesTotal());
updateHTML("startBytes", ytplayer.getVideoStartBytes());
updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded());
updateHTML("volume", ytplayer.getVolume());
}
}
// Allow the user to set the volume from 0-100
function setVideoVolume() {
var volume = parseInt(document.getElementById("volumeSetting").value);
if(isNaN(volume) || volume < 0 || volume > 100) {
alert("Please enter a valid volume between 0 and 100.");
}
else if(ytplayer){
ytplayer.setVolume(volume);
}
}
function playVideo() {
if (ytplayer) {
ytplayer.playVideo();
}
}
function pauseVideo() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}
function muteVideo() {
if(ytplayer) {
ytplayer.mute();
}
}
function unMuteVideo() {
if(ytplayer) {
ytplayer.unMute();
}
}
// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("ytPlayer");
// This causes the updatePlayerInfo function to be called every 250ms to
// get fresh data from the player
setInterval(updatePlayerInfo, 250);
updatePlayerInfo();
ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
ytplayer.addEventListener("onError", "onPlayerError");
//Load an initial video into the player
ytplayer.cueVideoById("ylLzyHk54Z0");
}
// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: "always" };
// The element id of the Flash embed
var atts = { id: "ytPlayer" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("https://www.youtube.com/apiplayer?" +
"&enablejsapi=1&playerapiid=ytplayer",
"videoDiv", "480", "270", "8", null, null, params, atts);
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);
</script>
<table>
<tr>
<td><div id="videoDiv">Loading...</div></td>
<td valign="top">
<div id="videoInfo">
<p>Player state: <span id="playerState">--</span></p>
<p>Current Time: <span id="videoCurrentTime">--:--</span> | Duration: <span id="videoDuration">--:--</span></p>
<p>Bytes Total: <span id="bytesTotal">--</span> | Start Bytes: <span id="startBytes">--</span> | Bytes Loaded: <span id="bytesLoaded">--</span></p>
<p>Controls: <a href="javascript:void(0);" onclick="playVideo();">Play</a> | <a href="javascript:void(0);" onclick="pauseVideo();">Pause</a> | <a href="javascript:void(0);" onclick="muteVideo();">Mute</a> | <a href="javascript:void(0);" onclick="unMuteVideo();">Unmute</a></p>
<p><input id="volumeSetting" type="text" size="3" /> <a href="javascript:void(0)" onclick="setVideoVolume();"><- Set Volume</a> | Volume: <span id="volume">--</span></p>
</div>
</td></tr>
</table>
'YouTube' 카테고리의 다른 글
유튜브 DATA API 1 (4) | 2010.03.01 |
---|---|
유튜브 플레이어 API 2 - 크기변경과 전체화면 (0) | 2010.02.28 |
유튜브 플레이어 API (5) | 2010.02.27 |
YouTube API JSON-C / AS3 Player (2) | 2010.02.26 |
유튜브 API란 무엇인가? (0) | 2010.02.20 |
YouTube Fast Search Engine (0) | 2010.02.15 |
안녕하셨나요 tyzen님^^
오랫만에 포스팅보니 무척 반가와요~~~~
오는 봄처럼요^^
정말 반감습니다.
잘 지내고 계시는지요?
저도 놀러가도록 하겠습니다.
오래만에 글보니 반갑네요.
좋은 주말 되시길 바랍니다.
Femke님 반갑습니다.
예! 좋은 주말 되세요
감사합니다.
Chromeless Player는 동영상이 짤려서 보이는데 왜일까요?