Created
August 25, 2018 22:51
-
-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?