유튜브 영상을 가져와서 사이트를 제작할 경우가 발생할 때 여러가지 인터렉션을 구현하게 된다.

그 중 영상의 재생이 끝났다는 이벤트를 받아와서 다른 행동이나 스크립트가 실행되도록 하고자 할 때 아래와 같이 스크립트를 작성한다.

시작 전 ie8 이하는 해당 기능이 되지 않는다.  이유는 html5를 지원하는 브라우저에서만 가능하기 때문이다.

<div id="player"></div>

 html에 유튜브 영상을 넣을 div를 만들어 놓는다.

스크립트가 실행되면 저 div가 자동으로 iframe 로 바뀌어서 영상이 유튜브 영상이 삽입된다.

var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    function onYouTubeIframeAPIReady(fileName) {
        var player = new YT.Player('player', {
            height: '100%',
            width: '100%',
            videoId: '유튜브영상 ID',
            rel : 0, //0으로 해놓아야 재생 후 관련 영상이 안뜸
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }

 위처럼 스크립트를 작성하고 영상 재생이 끝난 후에 실행시킬 스크립트를 작성한다.

function onPlayerStateChange(event) {
    if(event.data === 0) {
        //여기에 재생이 끝났을 때 실행시킬 스크립트 작성
    }
}

 event.data에 다른 숫자가 나오는 의미는 아래와 같다.

-1 (시작되지 않음)
0 (종료)
1 (재생 중)
2 (정지)
3 (버퍼링 중)
5 (스킵 된)