카테고리 글 목록: Youtube

Youtube Player JS API에서 onYouTubePlayerReady, onStateChange 이벤트 제대로 받기

제목을 어떻게 짧게 지어보려고 해도…

웹에서 사용하는 Youtube Player API는 크게  세 가지로 구분됩니다. iframe API, Javascript API, AS3(Flash) API 입니다. 이 중 JS API와 AS3 API는 사실상 차이가 없습니다. JS API는 ExternalInterface를 통해서 플래시로 전달되어, AS3 API를 호출하는 구조이기 때문입니다. JS API Documentation을 봐도 swfobject를 통해서 플레이어 임베딩을 하고, getElementById를 이용하는 방법을 안내해주고 있습니다.

문제는 이 경우 onYouTubePlayerReady 이벤트가 제대로 인식되지 않고, onStateChange 이벤트 추가 시점도 명확해지지 않는다는 점이 문제입니다. 임베딩된 swf가 유투브 프록시 플레이어를 로드하는 텀이 생기기 때문입니다. Documentation의 문서대로는 제대로 이벤트를 추가할 수가 없습니다.

그래서 다음과 같은 해결책을 사용해 보았습니다.

var params = { allowScriptAccess: "always" };
var atts = { id: "player" };
var player;

swfobject.embedSWF( ... );
player = document.getElementById( "player" );

function onYouTubePlayerReadyHandler() {
	try {
		// swf가 유투브 프록시 플레이어를 로드하지 못하면 이 try는 error가 catch됩니다.
		player.playVideo();
		player.addEventListener( "onStateChange", "onStateChangeHandler" );
	}
	catch( $error ) {
		// 100ms 후에 재시도합니다
		setTimeout( onYouTubePlayerReadyHandler, 100 );
	}
}

function onStateChangeHandler( $status ) {
	// do something
}

setTimeout( onYouTubePlayerReadyHandler, 100 );

썩 마음에 들지는 않습니다.
더 좋은 방법이 있는 분들은 의견 좀…