Na semana passada, explorei como o senhor poderia obter a duração de um vídeo HTML5. Essa é uma técnica importante, obviamente, mas uma que pode ser um pouco mais importante é o gerenciamento da configuração de tempo do vídeo. Tanto a definição quanto a obtenção do tempo do vídeo são importantes para a criação de um cromo em torno do vídeo, portanto, vamos analisar como realizar esse feito.


A primeira e provavelmente a mais importante parte do gerenciamento do estado do tempo do vídeo é saber que o vídeo currentTime é o atributo importante. O senhor pode recuperar a hora atual do vídeo com o seguinte:



// https://www.youtube.com/watch?v=Cwkej79U3ek
console.log(video.currentTime);  // 25.431747


currentTime atua como um getter e um setter, de modo que o senhor pode mover-se pelo vídeo definindo um valor para currentTime:



video.currentTime = 0; // Restart


A API é bastante fácil e a propriedade é autoexplicativa. O senhor ainda precisará fazer a matemática do “segundo” para interpretar o tempo, tanto para dentro quanto para fora, mas a unidade do segundo é a mais justa que se pode esperar, portanto, essa API deve ser apreciada.

  • Animação CSS vs. JS: O que é mais rápido?

    Como é possível que a animação baseada em JavaScript sempre tenha sido secretamente tão rápida – ou mais rápida – do que as transições CSS? E, como é possível que a Adobe e o Google lancem consistentemente sites móveis ricos em mídia que rivalizam com o desempenho de aplicativos nativos?

  • Envie mensagens de texto com PHP

    As crianças de hoje em dia, eu lhe digo. Tudo o que lhes interessa é a tecnologia. Os videogames. A água engarrafada. Ah, e as mensagens de texto, sempre as mensagens de texto. Na minha época, tudo o que tínhamos era… OK, eu também tinha todas essas coisas. Mas ainda não entendo…

  • Crie uma navegação no estilo Snook usando o MooTools
  • SmoothScroll usando o MooTools 1.2