lw
programação
value="always"
></param>
<embed src="http:/
v/9sEI1AUFJKw&hl=en
GB&fs=1&"
type="application/x
shockwave-flash"
allowscriptaccess=
"always"
allowfullscreen="true"
width="425"
height="344"></embed>
</object>
Com o elemento vídeo do HTML5,
é possível ter a mesma funcionalidade,
com ainda mais vantagens, usando
menos código. Para inserir um vídeo
WebM em sua página, basta adicionar
o seguinte código em seu HTML:
<video src="movie.webm" controls>
<p>Mensagem para o caso do
navegador não suportar o vídeo.</p>
</video>
possível alterar borda, opacidade,
espelhamento, gradiente, transições,
transformações e diversos outros
recursos de animação. E a maior
vantagem é poder adicionar vídeos
com grande velocidade sem que haja a
necessidade de programar um tocador
de vídeo. O que economiza um precioso
tempo de desenvolvimento.
Formatos suportados
O formato do vídeo suportado varia
dependendo no navegador. Os mais
comumente aceitos são ogg, ogv
(Theora), webm (VP8) e mp4 (H.264).
Usando várias fontes para o vídeo, o
navegador escolhe automaticamente
qual vídeo será transmitido.
O navegador escolhe
automaticamente qual vídeo será
transmitido de acordo com codec
do vídeo.
<video poster="movie.jpg" controls>
<source src="movie.webm"
type='video/webm; codecs="vp8.0,
vorbis"'/>
<source src="movie.ogg"
type='video/ogg; codecs="theora,
O atributo “controls” é do tipo
booleano. Se ele estiver presente,
habilita a interface padrão do
navegador para o controle do vídeo.
Se o atributo de controle for omitido,
não será possível executar o vídeo e
somente o primeiro frame será visível.
Mas você pode fornecer os seus
próprios controles implementados
JavaScript, customizando da maneira
mais adequada para o seu website.
(A especificação completa do elemento
HTML5 pode ser conferida em
http://
dev.w3.org/html5/html-author
).
Veja um exemplo:
<video width="640" height="360"
controls preload="none"
poster="video.jpg" src="movie
webm" controls>
<p>Mensagem para o caso do
navegador não suportar o vídeo.</p>
</video>
Outra vantagem de inserir o vídeo
em HTML5, é que se pode usar CSS
para customizar todo o elemento. É
Página de desenvolvimento da Mozilla: no
site, há informações sobre suporte a vídeo
Com o vídeo
do HTML5,
é possível
ter ótimas
funcionalidades,
utilizando
pouco código
Chrome Firefox Opera SAFARI IE9+
WEBM (CODEC VP8)
Sim
Sim
Sim
Não
Sim
MP4 (CODEC H.264)
Sim
Não
Não Sim
Sim
OGV (CODEC OGG THEORA)
Sim
Sim
Sim
Não
Não
É possível combinar as tags vídeo
e canvas do HTML5 e criar efeitos
bem divertidos.
Sean Christmann
mostra um exemplo em que o vídeo
é partido em vários pedaços quando
o usuário clica sobre ele. Também
exibe o filme sendo executado em um
espaço tridimensional.
/
blowing-up-html5-video-and-
mapping-it-into-3d-space/
DIVERSÃONOHTML5
COMPARE SUPORTE DOS BROWSERS
locaweb
59
