Skip to content

Instantly share code, notes, and snippets.

@marceloxp
Created March 6, 2015 19:06
Show Gist options
  • Save marceloxp/83f2f867c003c0ea18f2 to your computer and use it in GitHub Desktop.
Save marceloxp/83f2f867c003c0ea18f2 to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment