Aprenda a colocar uma barra de tempo no seu vídeo usando HTML5 e javascript

Vamos neste post como colocar uma barra de tempo no seu vídeo, utilizando um simples código HTML5 / Javascript.

Recomendo visualizar o post anterior, que dá uma introdução sobre o assunto.

Veja o código abaixo:











Observe que a barra de tempo do vídeo se dá através da tag "progress". Ela tem os seguintes atributos:
max: valor máximo em número inteiro.
value: valor atual em número inteiro.

Além disso (eu ainda vou postar detalhadamente sobre os novos eventos javascript compatíveis com o HTML5), temos o evento "ontimeupdate". Ele é acionado toda vez que a posição da mídia muda, fazendo com que o tempo de execução seja constantemente atualizado.

Vale lembrar que o código não está refatorado. Eu preferi colocar desta forma para que o leitor entenda melhor.

Até mais!

Confira aqui o Tutorial Completo HTML5 2012

Author Description

dukountra

Nenhum comentário ainda.

Join the Conversation