Saiba inserir botões nas tags “audio” e “video” usando javascript

Neste post começa uma série de artigos que visam explicar novas funcionalidades que o HTML5 nos proporciona junto com o javascript, de uma forma fácil, de modo que que um usuário noob em javascript possa entender perfeitamente.

Veja o áudio é o vídeo abaixos:





.
.






Observe que o código acima é um simples html5, inserindo um áudio e um vídeo. Foi criado alguns botões e, para cada botão, foi dado o evento “onclick”, que aciona uma função diferente.
Acredito que a grande “mágica” é transformar o arquivo de mídia em um objeto javascript. Isso foi feito através do recurso “getElementById”.

Feito isso, podemos notar as seguintes funções:

play(): Executa o arquivo de mídia.
pause(): Pausa o arquivo de mídia.
webkitEnterFullScreen(): Coloca o vídeo em tela cheia. Funciona somente no Chrome.

E as seguintes propriedades:

volume: Define o volume da mídia. Seu valor padrão é 1.
duration: Define o tempo total de duração da mídia, em milisegundos.
currentTime: Define o tempo transcorrido da mídia, em milisegundos.

Façam os seus testes!

Confira aqui o Tutorial Completo HTML5 2012

Author Description

dukountra

There are 3 comments. Add yours

  1. 20th dezembro 2012 | wagna says: Responder
    como faço para reproduzir mais de uma musica num unico player??? me ajude...
  2. 21st agosto 2014 | Carolina says: Responder
    porque o botão de tela cheia não funciona?
  3. 19th fevereiro 2015 | Thiago says: Responder
    Obrigado cara, sua explicacao me ajudou bastante! Obrigado!

Join the Conversation