O HTML5 veio para facilitar realmente tudo. Antigamente só conseguiríamos inserir vídeos, com auxílio do Shockwave-flash. Sem contar que os códigos eram um tanto quanto complexos de serem memorizados. E ainda vale ressaltar que traziam algumas limitações de interoperabilidade. Veja como fica simples inserir um vídeo com HTML5.
[html]
<video src=”meuvideo.mp4″ width=”300″ height=”150″ poster=”teste.jpg” controls> </video>
[/html]
Onde o atributo “poster” poster=”teste.jpg” é a imagem que você pode escolher para estaticamente ficar como padrão antes de iniciar o vídeo, como se fosse a “capa” do player do vídeo.
E o atributo “controls” é para que seja exibido os controladores do vídeo, play, pause, etc.
Além desses atributos exemplificados, temos alguns outros
autoplay – O vídeo será iniciado assim que a página carregar.
controls – mostra os controles embutidos, play/pause.
crossorigin – permite ou proíbe o compartilhamento de um vídeo com outros domínios.
loop – o vídeo será tocado novamente após ter terminado.
mediagroup – permite que múltiplos elementos de mídia sejam interligados.
muted – permite que o vídeo comece sem áudio.
poster – imagem como amostra do vídeo.
preload – diz para o navegador iniciar o download da página assim que a mesma for carregada.
none – ao contrário do preload, diz para o navegador apenas iniciar o download do vídeo quando o usuário clicar no “play”
metadata – o navegador pré-carrega apenas os metadados (dimensões, duração, etc)
auto – diz para o navegador escolher se baixa o arquivo, ou apenas os dados, ou nada.
src – identifica o local do arquivo.
Como toda migração demora a ser implementada e a ser tornar padrão a todos os navegadores, existem alguns formatos que funcionam em apenas alguns navegadores, para isso vamos listar os formatos aceitos, e quais navegadores aceitam quais formatos.
MP4 – IE9 / SAFARI4 / SAFARI5 / CHROME / – Alguns necessitam que o usuário tenha o Quicktime instalado.
OGG – MOZILA / CHROME / OPERA
WebM – IE9 / MOZILA4+ / CHROME6+ / OPERA
* Note que o WebM é aceito em quase todos os navegadores mais recentes a exceção do Safari, muito provável que num futuro próximo o Safari esteja aceitando também. Mas se você quiser garantir a interoperabilidade do seu vídeo coloque mais de um vídeo como source de seu player. Note que não será colocado o atributo src, mas o elemento source
Ficando assim:
[html]
<video width=”720″ height=”400″>
<source src=”teste.mp4″ type=”video/mp4″>
<source src=”teste.webm” type=”video/vp8″>
<source src=”teste.ogv” type=”video/ogg”>
</video>
[/html]
Se você quiser inserir legendas, note que existe o elemento “track”
Que resumidamente ficaria em uma sintaxe mais ou menos assim:
[html]
<video src=”teste.webm” controls>
<track kind=”subtitles” src=”teste.vtt”>
</video>
[/html]
Existem vários atributos que podem ser colocados no elemento track, tais como:
default, kind, subtitles, captions, descriptions, chapters, metadata, label, src, srclang.
Note que o fora utilizado o formato “.vtt” que é um vormato de arquivo WebVTT ( Web video Text Tracks) utilizado para fazer marcações de faixas de texto nos vídeos.
Como personalizar os botões de play e pause no player do html5 ?
Para isso utilizaremos um pouco de javascript, mas nada complexo, pelo contrário, bastante simples.
[html]
<video src=”teste.webm”>
</video>
<script>
var testevideo = document.getElementesByTagName(‘video’)[0];
</script>
<input type=”button” value=”Play” onclick=”testevideo.play()”>
<input type=”button” value=”Pause” onclick=”testevideo.pause()”>
[/html]
Acho que ficou bastante intuitivo e simples o código. Apenas criamos uma variável “var testevideo” recebemos o conteúdo dela pela tag <video>, se quisessemos poderíamos atribuir um ID para o <video> e fazer o velho getElementsById.
A partir daí vai a criatividade de estilizar pelo CSS.
Existem alguns players de vídeo em HTML5 já estilizados e prontos, que podem ser bastante úteis para o desenvolvimento front-end. Portanto vale a pena conferir alguns deles que estão dispostos em uma lista de compatibilidade aos navegadores > http://praegnanz.de/html5video/
Aqui segue também a dica de um site que traz passo a passo como você estilizar o seu player, o site é em inglês, mas tendo uma noção básica dos termos técnicos da para seguir intuitivamente. http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/
Em breve quando tiver um pouco mais de tempo, talvez traga um post também criando o passo a passo de uma estilização, mas por hora, fica essa excelente opção.
Esse post não esgota o assunto visto que tudo que diz respeito a HTML5 hoje é muito vasto, devido a grande comunidade que está envolvida nesse projeto. Para tanto utilize-se sempre das referências vindas da W3C que é a responsável junto com a WHATWG HTML, por manter os padrões dessa tecnologia.
