Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link
Owner Author

commented Aug 25, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.