이것저것 해본거 정리..
요구 사항은..(나랑 의견이 안 맞긴 했지만...)
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>
|
끗!
