marceloxp
3/6/2015 - 7:06 PM

Capture Youtube events.

Capture Youtube events.

<!-- <iframe width="500" height="306" src="//www.youtube.com/embed/xpto?rel=0" frameborder="0" allowfullscreen></iframe> -->

<div id="player"></div>
<script>var ytVideoId = "xpto";</script>';
<script type="text/javascript">
	var player;
	var timer1 = null;
	var video_length = 0;
	var video_percent_curr = 0;
	var video_percent_last = 0;
	var sended_25 = false;
	var sended_50 = false;
	var sended_75 = false;
	var tag = document.createElement('script');

	var YT_EVT_CURR                  =  null; // Evento atual
	var YT_EVT_LAST                  =  null; // Nenhuhm evento disparado
	var YT_EVT_READY                 =  0;    // pronto
	var YT_EVT_NAO_INICIADO          = -1;    // não iniciado
	var YT_EVT_ENCERRADO             =  0;    // encerrado
	var YT_EVT_EM_REPRODUCAO         =  1;    // em reprodução
	var YT_EVT_EM_PAUSA              =  2;    // em pausa
	var YT_EVT_ARMAZENANDO_EM_BUFFER =  3;    // armazenando em buffer
	var YT_EVT_VIDEO_INDICADO        =  5;    // vídeo indicado

	$(document).ready(function() {
		tag.src = "https://www.youtube.com/iframe_api";
		var firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	});

	function onYouTubeIframeAPIReady()
	{
		player = new YT.Player
		(
			'player',
			{
				width: '500',
				height: '306',
				videoId: ytVideoId,
				playerVars: { 'autoplay': 0 },
				events:
				{
					'onReady': onPlayerReady,
					'onStateChange': onPlayerStateChange
				}
			}
		);
	}

	function onPlayerReady(event)
	{
		getVideoData();
		YT_EVT_READY = 1;
	}

	var done = false;
	function onPlayerStateChange(event)
	{
		if (YT_EVT_READY !== 1) { return; }
		YT_EVT_CURR = event.data;

		switch(YT_EVT_CURR)
		{
			case YT_EVT_EM_REPRODUCAO : 
				onYoutubePlay();
				startVideoDataCapture();
			break;
			case YT_EVT_ENCERRADO : 
				onYoutubeStop();
				stopVideoDataCapture();
			break;
			case YT_EVT_EM_PAUSA : 
				onYoutubePause();
				stopVideoDataCapture();
			break;
		}

		YT_EVT_LAST = YT_EVT_CURR;
	}

	function getVideoData()
	{
		video_length = player.getDuration();
	}

	function onYoutubePlay()
	{
		$(document).trigger('yt_evt_play');
	}

	function onYoutubePause()
	{
		$(document).trigger('yt_evt_pause');
	}

	function onYoutubeStop()
	{
		$(document).trigger('yt_evt_stop');
	}

	function stopVideo()
	{
		player.stopVideo();
	}

	function startVideoDataCapture()
	{
		timer1 = setInterval ( function(){ processVideoDataCapture(); }, 500 );
	}

	function processVideoDataCapture()
	{
		var video_position = player.getCurrentTime();
		video_percent_curr = Math.round((video_position * 100) / video_length);
		if (video_percent_curr != video_percent_last)
		{
			video_percent_last = video_percent_curr;
			if (video_percent_curr >= 75)
			{
				trigger_video_play_percent(75);
			}
			else if (video_percent_curr >= 50)
			{
				trigger_video_play_percent(50);
			}
			else if (video_percent_curr >= 25)
			{
				trigger_video_play_percent(25);
			}
		}
	}

	function trigger_video_play_percent(p_percent)
	{
		switch(p_percent)
		{
			case 75:
				if (sended_75 === false)
				{
					$(document).trigger('yt_evt_play_75');
					sended_75 = true;
					trigger_video_play_percent(50);
					trigger_video_play_percent(25);
				}
			break;
			case 50:
				if (sended_50 === false)
				{
					$(document).trigger('yt_evt_play_50');
					sended_50 = true;
					trigger_video_play_percent(25);
				}
			break;
			case 25:
				if (sended_25 === false)
				{
					$(document).trigger('yt_evt_play_25');
					sended_25 = true;
				}
			break;
		}
	}

	function stopVideoDataCapture()
	{
		if (timer1 !== null)
		{
			clearInterval(timer1);
			timer1 = null;
		}
	}
</script>