youtube 재생 완료(종료) 이벤트 받기

http://lab.naminsik.com/3111

 

 

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

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

시작 전 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 (스킵 된)