filipebatista
9/28/2012 - 7:22 AM

YouTube iFrame API wrapper for event videos

YouTube iFrame API wrapper for event videos

var EventYouTubeVideo = (function(){
	var module = {};
	
	module.init = function(){
		var tag = document.createElement('script');
		tag.src = "http://www.youtube.com/iframe_api";
		var firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	};
	
	var players = new Array();
	var debug = true;
	var autoplay = true;
	
	module.getPlayer = function(id){
		return players[id];
	};

	module.playPlayer = function(id){
		players[id].playVideo();
	};
	
	module.pausePlayer = function(id){
		players[id].pauseVideo();
	}; 
	
	module.stopPlayer = function(id){
		players[id].stopVideo();
	};
	
	module.destroyPlayer = function(id){
		players[id].destroy();
		delete players[id];
	};
	
	/*
	module.initPlayer = function(id, videoId, width, height, eventTag){
		players[id] = new YT.Player(id, {
			width: width,
			height: height,
			videoId: videoId,
			events: {
				'onReady': onPlayerReady,
				'onStateChange': onPlayerStateChange
			}
		});
		
		players[id].eventTag = eventTag;
	};
	*/
	
	module.initPlayer = function(id, videoId, eventTag){
		players[id] = new YT.Player(id, {
			width: '524',
			height: '295',
			videoId: videoId,
			events: {
				'onReady': onPlayerReady,
				'onStateChange': onPlayerStateChange
			}
		});
		
		players[id].eventTag = eventTag;
	};
	
	function onPlayerReady(event){
		clog('YouTube player ready.');
		try {
			if (autoplay)
				event.target.playVideo();
		}
		catch (ex) { }
	}
	
	function onPlayerStateChange(event){
		clog('YouTube player state change.');
		
		var category = 'Event - YouTube Video';
		var eventTag = event.target.eventTag;

		try {
			switch (event.data) {
				case YT.PlayerState.PLAYING:
					clog('playing ' + eventTag);
					trackEvent(category, 'Playing', eventTag);
					break;
				case YT.PlayerState.PAUSED:
					clog('paused ' + eventTag);
					trackEvent(category, 'Paused', eventTag);
					break;
				case YT.PlayerState.BUFFERING:
					clog('buffering ' + eventTag);
					trackEvent(category, 'Buffering', eventTag);
					break;
				case YT.PlayerState.CUED:
					clog('cued ' + eventTag);
					trackEvent(category, 'Cued', eventTag);
					break;
				case YT.PlayerState.ENDED:
					clog('ended ' + eventTag);
					trackEvent(category, 'Ended', eventTag);
					break;
			}
		}
		catch (ex) { }
	}
	
	function clog(message){
		if (window.console && debug) {console.log(message);}
	}
	
	return module;
})();

function onYouTubeIframeAPIReady() {
	if (window.console) {console.log('YouTube iFrame API ready.');}
}