Estas etiquetas integram uma API para o acessar os elementos correspondentes para poder manipulá-los, dispondo de controles e atributos para gerenciar a reprodução multimídia como, por exemplo, controles de avanço e retrocesso assim como da admissão de múltiplas fontes para assegurar a visualização em qualquer tipo de navegador.

Continuando com a demo, vamos integrar um elemento multimídia de tipo <Video depois do texto "Os manteremos informados". Esta etiqueta agrega o vídeo "HTML5.mp4" a nosso entorno e incorpora com os atributos autoplay e controls o início automático e controles de avanço e retrocesso. Observe que a etiqueta <Video> aninha em seu interior a etiqueta <Source> desde a qual vamos poder realizar a invocação dos arquivos de vídeo multimídia correspondentes. A etiqueta <video> tem que se mostrar exatamente assim:

<video autoplay="autoplay" controls="controls">
<source src="html5.mp4">
</video>

O resultado da pré- visualização da página HTML fica como se mostra a continuação. O vídeo começa de forma automática e dispomos dos controles típicos de deslocamento, pausa ou início e controle de tempo e de volume. No nosso caso só introduzimos um elemento <source> indicada a um formato mp4, mas podemos introduzir varias etiquetas <source> com outro tipo de extensões, por exemplo *.ogg.

Os dois seguintes códigos da demonstração se encarregam de mostrar que, mesmo que nossos elementos multimídia como o vídeo anterior, não tenham controles de serie, são altamente personalizáveis. Para isso, criamos uma função denominada mudarestadovideo() que se encontra situada dentro da etiqueta <Script> e que será utilizada para pausar ou reiniciar o vídeo.

Agora só falta chamar a função mudarEstadoVideo e para isso vamos criar um link que nos servirá para invocar a função através de um evento onClic (quando cliquemos) e assim poder pausar/reiniciar o vídeo multimídia dependendo do estado em que se encontre. Para isso, arrastamos o código justamente debaixo de onde situamos o vídeo y prosseguimos tirando os atributos Autoplay e Controls de tal etiqueta.

O resultado final é um simples controle de chamada à função que iniciará ou pausará o vídeo, como vocês podem ver a seguir.

Armazenamento local

Esta é uma nova funcionalidade que vai encaminhada a permitir o armazenamento de dados estruturados no lado do cliente de forma parecida à que se vinha produzindo com o uso dos cookies, mas tentando eliminar as limitações que vinham impostas com o uso delas, como por exemplo, o tamanho dos 4Kb. Os dados são armazenados mediante uma lista de pares chave/valor, podendo utilizar ou SessionStorage, para armazenar informação durante a sessão da página, ou então localStorage para o armazenamento compartilhado entre múltiplas páginas e sessões, limitando-se ao âmbito do domínio.

Para visualizar o uso destas API's, desloque-se à parte inferior da etiqueta <Script> e localize o código correspondente para a implementação das funções salvarTextArea, recuperarTextArea e apagarTextArea. Observe o código comentado de cor verde, que indica que o código que vem a continuação corresponde ao armazenamento local.

Para finalizar, só nos falta introduzir em nosso código a chamada a tais funções. Em nosso exemplo, foi realizada através de botões de formulário que situamos ao finalizar a entrada estabelecida para acrescentar comentários. O código correspondente para realizar a chamada ficaria assim:

<input onclick="salvarTextArea()" type="button" value="Salvar" />
<input onclick="recuperarTextArea()" type="button" value="Recuperar" />

E o resultado final da demonstração, uma vez visualizado o HTML5 em nosso navegador, ficará como se mostra a continuação.

Espero que vocês tenham achado realmente prático, e os convido a que fiquem atentos às mudanças e à evolução que se vai produzindo na tecnologia HTML5 desde o blog de Windows Técnico onde vocês podem se inscrever para seguir notícias como esta desde seu canal RSS.
Um abraço