2019년 9월 6일 금요일

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>

끗!


댓글 없음:

댓글 쓰기

BE Band (비밴드) - 2024년 03월 02일 잠실새내 락앤롤욱스 공연

나의 10~20대를 보낸 잠실에서의 공연.. 오랜만에 가보니.. 여기가.. 마눌님과 자주 가던 영화관이었는데... 여긴 뭐가 있었는데... 란 추억도 떠올리며 기분좋게 감.​ 공연장은 좀 협소한 편이었고, 인천의 쥐똥나무 보다는 약간 크고... 인천 ...