Youtube API 이용방법

[ HTML ]

<div id="player"></div>

해당 태그의 id값이 스크립트에서 사용됩니다.

​

[ js ]

<script>
/* youtube api 추가부분입니다. */
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


// API 적용 후
var player; // 해당 변수에 영상에 대한 것들을 넣어줄 것입니다.

function onYouTubePlayerAPIReady(){
    player = new YT.Player('player', {
        //여기 'player' 이 부분이 html 에서 <div id="player"></div> 여기 태그를 말합니다.
        videoId: 'E9M25hOF3vw', //영상 ID값 임시 삽입
        width: "560", //width값 임시 삽입
        height: "350", //height값 임시 삽입
        playerVars: {
            //iframe에 적용되는 기본 속성들입니다.
            'modestbranding': 1, //영상 우측 하단 유튜브 로고 노출여부 0:노출 / 1:숨김
            'autoplay': 1, //자동재생 1:자동재생
            'controls': 0, //컨트롤 유무 0:숨김 / 1:노출
            'showinfo': 0, //재생영상에 대한 정보 유무 0:숨김 / 1:노출 - 정책이 바뀌어서 안될 수도 있습니다.
            'loop': 1, //반복재생 여부 1:반복재생
            'fs': 1, //전체화면 버튼 0:숨김 / 1:노출
            'playlist': 'E9M25hOF3vw',
            //단일 동영상을 반복재생하기 위해서 playlist 라는 매개변수에 재생중인 같은 영상 id값을 삽입합니다.
        },
        events: {
            'onReady': onPlayerReady, //영상이 준비되면 발생하는 함수
            'onStateChange': onPlayerStateChange //상태가 변함에 따라 발생하는 함수 예)재생/정지/준비 등
        }
    });
}


//영상이 준비되면 발생하는 함수
function onPlayerReady(event){
	event.target.mute(); //자동재생을 위해서는 음소거 필수!
	event.target.playVideo(); //준비된 영상 재생
	//정책이 바뀌면서 모바일에서는 위 기본 세팅 함수(onYouTubePlayerAPIReady)에서 autoplay 매개변수를 자동재생으로 해도 자동재생이 되지 않습니다. 따라서 위 처럼 작성해주는게 더 좋은 것 같습니다.( 개인적 생각)
}


//상태가 변함에 따라 발생하는 함수 예)재생/정지/준비 등

function onPlayerStateChange(){
	console.log(player.getPlayerState()); //console을 통해 영상의 상태를 확인하고자 임시로 작성했습니다.
	
    /* 플레이어의 상태이며 상태를 이용해 이벤트 작성을 하면 됩니다.
    -1 : 시작되지 않음
    0 : 종료
    1 : 재생중
    2 : 일시중지
    3 : 버퍼링
    5 : 동영상 신호
    */
}
</script>