Youtube - Advance (2)

by 1004lucifer

HTML

<div style="height:500px;">
  <div id="gangnamStyleIframe"></div><br />
  <button type="button" onclick="playYoutube();">Play</button>
  <button type="button" onclick="pauseYoutube();">Pause</button>
  <button type="button" onclick="stopYoutube();">Stop</button>
  <button type="button" onclick="changeVideoAndStart();">ChangeVideo And Start</button>
  <button type="button" onclick="changeVideoObjectAndStart();">ChangeVideoObject And Start</button>
  <button type="button" onclick="changeVideoListAndStart();">ChangeVideoList And Start</button>
  <button type="button" onclick="changeVideoListObjectAndStart();">ChangeVideoListObject(Video IDs) And Start</button>
  <button type="button" onclick="changeVideoListObjectAndStart2();">ChangeVideoListObject(playlist ID) And Start</button>
  <textarea id="result" style="width:100%;height:100px"></textarea>
</div>

JavaScript

/**
  * Youtube API 로드
  */
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

/**
 * onYouTubeIframeAPIReady 함수는 필수로 구현해야 한다.
 * 플레이어 API에 대한 JavaScript 다운로드 완료 시 API가 이 함수 호출한다.
 * 페이지 로드 시 표시할 플레이어 개체를 만들어야 한다.
 */
var player;
function onYouTubeIframeAPIReady () {
  player = new YT.Player('gangnamStyleIframe', {
    height: '315',            // <iframe> 태그 지정시 필요없음
    width: '560',             // <iframe> 태그 지정시 필요없음
    videoId: '9bZkp7q19f0',   // <iframe> 태그 지정시 필요없음
    playerVars: {             // <iframe> 태그 지정시 필요없음
      controls: '2'
    },
    events: {
      'onReady': onPlayerReady,               // 플레이어 로드가 완료되고 API 호출을 받을 준비가 될 때마다 실행
      'onStateChange': onPlayerStateChange    // 플레이어의 상태가 변경될 때마다 실행
    }
  });
}
function onPlayerReady (event) {
  console.log('onPlayerReady 실행');
  $('#result').val($('#result').val() + 'onPlayerReady 실행\n')
}
var playerState;
function onPlayerStateChange (event) {
  playerState = event.data == YT.PlayerState.ENDED ? '종료됨' :
    event.data == YT.PlayerState.PLAYING ? '재생 중' :
    event.data == YT.PlayerState.PAUSED ? '일시중지 됨' :
    event.data == YT.PlayerState.BUFFERING ? '버퍼링 중' :
    event.data == YT.PlayerState.CUED ? '재생준비 완료됨' :
    event.data == -1 ? '시작되지 않음' : '예외';

  console.log('onPlayerStateChange 실행: ' + playerState);
  $('#result').val($('#result').val() + 'onPlayerStateChange 실행: ' + playerState + '\n')

  // 재생여부를 통계로 쌓는다.
  collectPlayCount(event.data);
}

function playYoutube () {
  player.playVideo();
  $('#result').val($('#result').val() + 'playVideo\n')
}
function pauseYoutube () {
  player.pauseVideo();
  $('#result').val($('#result').val() + 'pauseVideo\n')
}
function stopYoutube () {
  player.seekTo(0, true);     // 영상의 시간을 0초로 이동시킨다.
  player.stopVideo();
  $('#result').val($('#result').val() + 'seekTo\n')
 ...