유튜브 플레이어 API

2010. 2. 27. 21:53

유튜브 API 첫번째 시리즈 유튜브 플레이어 API 입니다.

현재 유튜브에서 제공하는 플레이어는 3가지 종류가 있습니다.

일반적인 embedded 플레이어, 새롭게 출시된 ActionScript 버젼3 플레이어, 그리고 크롬리스 플레이어 입니다.

각 플레이어마다 고유의 특징을 가지고 있습니다.

플레이를 실행하시면 느끼실 수 있을 것입니다.

AS3과 크롬리스는 관련동영상이 제공되지 않으며 그리고 광고없이 시청을 하실 수 있습니다.

유튜브 플레이어 API를 이용하는 목적은

유튜브 Data API로 얻어진 검색 결과물의 영상들을 시청하실 수 있도록 하기 위함입니다.

각 플레이어의 예는 아래와 같으며, 소스도 활용하실 수 있습니다.

Normal Embedded Player

AS3 Embedded Player

Chromeless Player

Player state: --

Current Time: --:-- | Duration: --:--

Bytes Total: -- | Start Bytes: -- | Bytes Loaded: --

<- Set Volume | Volume: --

플레이어 API학습의 목적은 동영상 내용물을 변경하는 것입니다.
변경을 하고자 할 경우 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" />&nbsp;<a href="javascript:void(0)" onclick="setVideoVolume();">&lt;- 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

youtube, youtube api, 유투브, 유튜브, 유튜브 플레이어, 유튜브닷컴

TYZEN's NETLOG