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년이 지났다. ㅠ 망...
.