Eventos baseados no tempo de vídeo do Youtube

Já teve a necessidade de incorporar um vídeo do Youtube em seu site e lançar algum evento em um determinado tempo da execução do mesmo? Se sim, este post é pra você.

Recentemente tive uma demanda com um cliente onde existia a necessidade de abrir uma modal alguns segundos antes do vídeo finalizar. Apesar de a documentação da API do Youtube disponibilizar a informação de como obter o tempo atual do vídeo, ela não mostra um exemplo prático. E é isso que venho te mostrar.

Pegue o seguinte código como exemplo:

HTML

<div id="player" data-video-id="ZZ5LpwO-An4"></div>

Javascript

Primeiramente adicione o jquery, só pra ficar fácil de trabalhar daqui pra frente.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Depois inicie a configuração do player do Youtube.

<script>
// Adicionando o script do youtube iframe
var tag = document.createElement('script');
var firstScriptTag = document.getElementsByTagName('script')[0];
tag.src = 'https://www.youtube.com/iframe_api';

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// inicializando player

var playerDiv = $('#player');

var player = null;
// método chamado automaticamente pela API do Youtube

function onYouTubeIframeAPIReady() {

    player = new YT.Player('player', {

        height: 450, // qualquer altura desejada

        width: 800, // qualquer largura desejada

        videoId: $(playerDiv).attr('data-vide-id'),

        playerVars: { // adicionando algumas variáveis

            rel: 0, // não exibir videos relacionados ao final

            showinfo: 0, // ocultar informações do video

            autoplay: 1 // play automático

        }

    });

}

</script>

Feito isso já temos o seguinte resultado.

OnReady

A API do Youtube possui alguns eventos como o onReady que é lançado assim que o vídeo está pronto para a execução. Basta que adicionemos o evento vinculando à uma função que criaremos mais à frente.

// Nas inicializações das variáveis, adicione mais estas: videoDuration, videoTime e interval
var videoDuration = 0;
var videoTime = 0;
var interval = null;
// nas configurações do player adicione a configuração de eventos

// playersVars: {...},

events: {

    'onReady': onPlayerReady

}

Em seguida temos de criar nossa funcão onPlayerReady. Nele descobriremos qual é o tempo atual do vídeo e lançaremos uma ação em um determinado momento.

function onPlayerReady(event) {
    // obtendo o tempo atual do vídeo
    videoDuration = parseInt(player.getDuration());
// aplicando um loop de 1 em 1s

    interval = setInterval(discoverTime, 1000);

}

Mas de onde o discoverTime? Esta função ainda criaremos e é nela a grande jogada para executar qualquer ação baseada no tempo do video.

E a mágica

Agora criaremos a função discoverTime.

// adicionando um tempo em específico para que uma ação seja executada.
var fireAt = 15;
function discoverTime() {

    // obtendo o tempo atual do video

    if (player && player.getCurrentTime) {

        videoTime = parseInt(player.getCurrentTime());

    }
if (videoTime < videoDuration && videoTime === fireAt) {

        console.log('Aos ' + fireAt + 's, coloque aqui a sua mágica!');

    }
// quando o video terminar, resetamos o interval

    if (videoTime > videoDuration) {

        clearInterval(interval);

    }

}

Pronto! Agora só lançar o que for preciso, a qualquer momento do vídeo.

É recomendado para saber quando o vídeo chegou ao fim?

Não. Para isso existe outro evento, o onStateChange. O que foi feito acima é um listener que roda a cada segundo, recomendado somente para situações em que você precise lançar algum evento durante a execução do video ou a alguns poucos segundos de sua finalização, como foi o caso que tive com um cliente recentemente. Veja abaixo um exemplo de como identificar diversos estados do vídeo, inclusive o momento em que ele chega ao fim.

// nas configurações de eventos
events: {
    'onReady': onPlayerready,
    'onStateChange': onPlayerStateChange
}...
function onPlayerStateChange(event) {

    switch (event.data) {

        case YT.PlayerState.ENDED:

            console.log('Finalizou execução do video');

            break;

        case YT.PlayerState.PLAYING:

            console.log('Assistindo');

            break;

        case YT.PlayerState.PAUSED:

            console.log('Pause');

            break;

        case YT.PlayerState.BUFFERING:

            console.log('carregando');

            break;

    }

}

That's it!

Quer ver na prática? Então pega este gist que criei no dia em que implementei esta solução para meu cliente.