Youtube API 활용 팁

기획에서 Youtube 재생을 컨트롤 하는 것을 주문해서..

이것저것 해본거 정리..

요구 사항은..(나랑 의견이 안 맞긴 했지만...)

1. 동영상은 2개

2. 위에 동영상이 끝나면 자동으로 아래것이 재생

3. Youtube는 iframe 형식으로 사용

===============처리 방법=================

참조 문서 : https://developers.google.com/youtube/iframe_api_reference#Playback_controls

일단!!! 제일 중요한 부분!!! iframe에 들어있는 주소에 쿼리스트링으로 enablejsapi=1 을 붙인다!!! 이거 안 붙여서 1시간 날려먹음..

그리고.. api 호출해주고.. :

<script src="https://www.youtube.com/iframe_api">

이하 제어 스크립트.. 나머지는 주석 참고..

< script > var player1, player2; //동영상 2개에 대한 객체 선언... //onYouTubeIframeAPIReady 함수는 https://www.youtube.com/iframe_api 에서 자동으로 호출한다.. 별도의 호출 선언 없음.. function onYouTubeIframeAPIReady() { // iframe id 넣어줌 (player1) player1 = new YT.Player('player1', { events: { 'onStateChange': onPlayerStateChange } }); // iframe id 넣어줌 (player2) player2 = new YT.Player('player2', { events: { 'onStateChange': onPlayerStateChange } }); } function onPlayerStateChange(event) { //동영상 플레이어의 상태 변경시 호출됨... //console.log(event); //console.log(event.target.a.id) switch (event.data) { case 0: //재생 멈춤 상태값.. //record('video ended'); //플레이어가 1에서 이벤트가 발생했다면.. if (event.target.a.id == 'player1') { //player2의 상태가 시작되지 않았다면 if (player2.getPlayerState() != "-1") { player1.stopVideo(); //멈추고 player2.playVideo(); //시작... } } else { if (player1.getPlayerState() != "-1") { player2.stopVideo(); player1.playVideo(); } } break; case 1: //재생 시작 상태값.. //record('video playing from '+player.getCurrentTime()); break; case 2: //재생 일시정지 상태값.. //record('video paused at '+player.getCurrentTime()); break; } } function record(str) { console.log(str); } < /script>

끗!