JS - youtube 재생 완료 이벤트 받기

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

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

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

 

Subscribe
Notify of
guest

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

2 댓글
Oldest
Newest
Inline Feedbacks
View all comments
atest
atest
7 years ago

https://developers.google.com/youtube/iframe_api_reference?hl=ko#Requirements
공식문서에는 ie8이야기는 없는데 혹시 8도 안된다는 문서를 볼 수 있을까요? ㅜ

werty
werty
7 years ago
Reply to  atest

공식문서중에는 ie7을 지원하지 않겠다고 나와있는데요. 사실상 위 코드중 종료 이벤트는 html5 지원 브라우저에서 작동이 잘 됩니다. ie8의 종류도 여러가지고 이고 설치되어있는 os가 xp도 있고 win7도 있다보니 실제 제작 테스트 할때 여러가지 변수에 의해 작동이 안되는 경우가 많습니다.
그래서 인터넷 익스플로의 경우 가장 html5가 안정적으로 작동되는 ie9부터 대상을 잡습니다. (그렇다고 이렇게 기준을 잡는 것이 정답은 아닙니다.)

TOP