Como manipular Player Html5 com javascript.
Aqui eu vou ensinar você a manipular os eventos de play, pausa e volume do player de qualquer navegador.
Caso você deseje personalizar o player html5 padrão você ira se logo ver que não é só baixar um pacote com tema ou algo assim, você terá de praticamente construir todo o controle do mesmo, botões de pausa play e etc.
Parece Complicado mas não é. Por isso aqui vão algumas dicas do que você vai usar nesta empreitada.
Prepare o seu HTML.
Tag Audio.
Não é muito complicado. Veja aqui como a sintaxe da tag audio é simples:
<audio src="URL.mp3"></audio>
Não aconteceu nada? experimente colocar o atributo controls na tag audio:
<audio src="URL.mp3" controls></audio>
Pronto você já tem um audio sendo executado no seu navegador :)
Muito simples não é? mas se você já conhece os navegadores de hoje em dia você já sabe que raramente eles se dão bem com todos os formatos de audio.
Para evitar problemas você deverá converter os arquivos de audio para .ogg, .mp3, e .wav, e colocar tudo isto no seu site.
Mas como? retirando o atributo source da tag audio e colocando ta tag source dentro da tag audio:
<source src="link_do_audio" type="tipo do audio">
Se você quiser saber mais sobre a tag audio e os formatos de audio eu recomendo dar uma passada no site da W3schools
Aqui vai um pequeno exemplo do uso da tag audio:
| Link do projeto no github. | Demo |
Tag Video
Agora para colocar um video você deve apenas substituir audio por video. Veja no exemplo abaixo:
| Link do projeto no github. | Demo |
Aproveite e de uma olhada no site da W3Schools pra saber um poquinho mais sobre a tag video.
Incluindo arquivo javascript
Agora nos vamos enfim para o objetivo deste tutorial: manipular toda esta mídia, que nos aprendemos a por no nosso site, com javascript.
Obs.: nos vamos usar jquery apenas para tornar o tutorial mais simples, mas as funções de manipulação do player funcionam independentemente a biblioteca.
Então aqui está a nossa estrutura:
| Link do projeto no github. | Demo |
Obs.: você pode usar tanto audio quanto video. Ambas vão usar as mesmas funções em js.
As Funções, e atributos, em JavaScript para manipular o player HTML5
Play
Pause
Volume
CurrentTime
Ufa!!! são todas bem simples agora é só aplicar em botões de player.
| Link do projeto no github. | Demo |
Legal né? mais podemos melhorar um pouco o botão de play com jquery
| Link do projeto no github. | Demo |
Esta Gostando deste post? Saiba que ele faz parte de uma série sobre multimidia aqui do meu blog que vale a pena dar uma conferida:
Conclusão
Esta aqui é apenas a base de multimidia para web. se você quiser uma lista completa e mais detalhada das funções em js relacionadas as tags audio e video va para o site da W3Schools>
É não deixe conferir os posts do nosso Blog!!!