2018 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
JS – youtube 재생 완료 이벤트 받기

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

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

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

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

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

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

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

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

 

HoldHolic

nain

이메일 : nis@naminsik.com

리뉴얼하려고 생각한지가 어느덧 3년이 지났다. ㅠ 망...
  • atest

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

    • werty

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

.