Skip to content

Instantly share code, notes, and snippets.

@andrebian
Created August 25, 2018 22:51
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save andrebian/14777f6c56cc00333dc69849042650e2 to your computer and use it in GitHub Desktop.
Save andrebian/14777f6c56cc00333dc69849042650e2 to your computer and use it in GitHub Desktop.
Youtube iframe API - Eventos baseado no tempo atual do video (current time events)
<div id="player" data-video-id="ZZ5LpwO-An4"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var tag = document.createElement('script');
var firstScriptTag = document.getElementsByTagName('script')[0];
// O container do video
var playerDiv = $('#player');
// inicializando o player
var player;
var videoDuration = 0;
// inicializando o contador do tempo do video
var videotime = 0;
// inicializando intervalo
var interval = null;
var lyrics = {
2: 'And so I cry sometimes When I\'m lying in bed just to get it all out',
7: 'What\'s in my head',
10: 'And I, I am feeling a little peculiar',
16: 'And so I wake in the morning',
18: 'And I step outside',
19: 'And I take a deep breath and I get real high',
23: 'And I scream from the top of my lungs',
25: 'What\'s going on?',
29: 'And I say, hey yeah yeah, hey yeah yeah',
36: 'I said hey, what\'s going on?',
43: 'And I say, hey yeah yeah, hey yeah yeah',
49: 'I said hey, what\'s going on?',
57: 'And he tries, oh my god do I try',
62: 'I try all the time, in this institution',
70: 'And heeeee prays, oh my god do I pray',
76: 'I pray every single day',
80: 'For a revolution',
85: 'And I say, hey yeah yeah, hey yeah yeah',
91: 'I said hey, what\'s going on?',
100: 'Chega... dá trabalho demais sincronizar'
};
// Adicionando Youtube iframe API
tag.src = 'https://www.youtube.com/iframe_api';
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Método chamado automaticamente pela api do youtube
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: 450,
width: 800,
videoId: $(playerDiv).attr('data-video-id'),
events: {
'onReady': onPlayerReady
},
playerVars: {
rel: 0,
showinfo: 0
}
});
}
// Método chamado nos eventos do player
function onPlayerReady(event) {
// obtendo a duração do video, em segundos
videoDuration = parseInt(player.getDuration());
// aplicando o intervalo de 1 em 1 segundo
interval = setInterval(discoverTime, 1000);
}
// método utilizado para descobrir o tempo atual do vídeo
function discoverTime() {
if (player && player.getCurrentTime) {
videotime = parseInt(player.getCurrentTime());
}
if (videotime < videoDuration && lyrics[videotime] !== undefined) {
fireEvent(videotime);
}
if (videotime > videoDuration) {
clearInterval(interval);
}
}
// Aqui vem sua lógica para que algo seja feito ao atingir o tempo desejado no video
function fireEvent(index) {
console.log(lyrics[index]);
}
</script>
@andrebian
Copy link
Author

Preview:
screen shot 2018-08-25 at 19 52 08

@wladerPI
Copy link

Legal o script amigo, eu estava batendo cabeça aqui, tentando encontrar uma forma para detectar se o usuario realmente assistiu o video inteiro, sem pular(passar para frente), aí dentro da function discoverTime() { coloquei assim

if (videotime == '6') { seg_assistidos1 = '1'; }
if (videotime == '12') { seg_assistidos2 = '1'; }
if (videotime == '18') { seg_assistidos3 = '1'; }
if (videotime == '24') { seg_assistidos4 = '1'; }
if (videotime == '30') { seg_assistidos5 = '1'; }
if (videotime == '36') { seg_assistidos6 = '1'; }
if (videotime == '42') { seg_assistidos7 = '1'; }
if (videotime == '48') { seg_assistidos8 = '1'; }
if (videotime == '54') { seg_assistidos9 = '1'; }
if (videotime == '60') { seg_assistidos10 = '1'; }

Em um video de 1 minuto, Sempre quando bater esse determinado segundo, registra em uma variavel o valor 1, que corresponde dizendo que o usuario visualizou essa parte, aí fora dessa function, e dentro dessa function onPlayerStateChange(event) { usei o comando para testar

// se finalizar
if (event.data == YT.PlayerState.ENDED) {
player1.pauseVideo();
alert('finalizado '+seg_assistidos1+' '+seg_assistidos2+' '+seg_assistidos3+' '+seg_assistidos4+' '+seg_assistidos5+' '+seg_assistidos6+' '+seg_assistidos7+' '+seg_assistidos8+' '+seg_assistidos9+' '+seg_assistidos10);
}

quando o video chegar no fim, me envia um alerta me dizendo se o video foi visto em todas as 10 etapas, se foi me retorna tudo 1, caso contrario se em alguma etapa foi pulada me retornaria 0.
Mas não deu certo kkkkkk não sei porque, vc sabe como isso poderia ser feito?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment