Youtube Api base

by Park Mino

HTML

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<br>
<span id="duration"></span>
<br>
<button type="button" onclick="playYoutube();">Play</button>
<button type="button" onclick="pauseYoutube();">Pause</button>
<button type="button" onclick="stopYoutube();">Stop</button>

JavaScript

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: '39j5v8jlndM',
    events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
    }
});
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
    }
    console.log(player.getPlayerState());
}
function stopVideo() {
    player.stopVideo();
}
/* 기본 호출 부분 E */

function playYoutube(){
    player.playVideo();
}
function pauseYoutube(){
    player.pauseVideo();
}
function stopYoutube(){
    player.seekTo(0, true);// 영상의 시간을 0초로 이동시킨다.
    player.stopVideo();
}