Html 5 - tag

Disponível somente no TrabalhosFeitos
  • Páginas : 6 (1281 palavras )
  • Download(s) : 0
  • Publicado : 27 de novembro de 2012
Ler documento completo
Amostra do texto
Felipe Pelini

Trabalho sobre html 5
tag <video> html 5

faculdade de tecnologia ftec
caxias do sul 2012

Índice
Introdução 3
Tag <video> HTML5 4
atributos da tag <video> 5
Formatos de video 6
conversão de videos 7
easy video html 5 converter 8
Conclusão 10
Bibliografia 11

Introdução
Este trabalho tem o objetivo de apresentar os recursos da nova tag<video> incluída no padrão html5. Serão apresentados os codecs mais utilizados, navegadores com suporte a este novo recurso, problemas de compatibildiade, métodos de conversão de vídeo e a utilização da tag em uma página web utilizando apenas html.

Tag <video> html5
Atualmente o player mais utilizado na internet é o flash, mas este depende de um plugin instalado no navegador paraser utilizado ao modo que alguns navegadores não suportem este plugin. A tag <video> tem como principal objetivo, substituir ou pelo menos dar uma opção aos atuais players de video sem a necessidade de instalção de plugins ou software de terceiros.
A tag <video> se utiliza de uma estrutura simples e compacta como vemos no exemplo:
<video width="320" height="240"controls="controls" >
<source src="video.mp4" type="video/mp4" />
Seu navegador não suporta este tipo de video.
</video>
Nessa estrutura fica fácil identicar os elementos principais que fazem parte da tag:
<video> - representa a abertura da tag.
Width e height - atributo da tag <video> representam a largura e altura do vídeo que será apresentado em pixels.
Controls – atributoda tag <video> que mostra controles, como play, stop e volume.
<source> - fonte do vídeo.
Mensagem – para o caso do navegador não suportar nenhum dos codecs.
</video> - representa o fechamento da tag.
A tag <video> aceita ainda outros atributos que veremos no próximo tópico.

Atributos da Tag <video>
Como podemos ver na estrutura da tag, podemos utilizaralguns atributos para incrementar a apresentação da mesma no site.
Os atributos que estão atualmente disponíveis são:
Atributo | Valor | Descrição |
audio | muted | Atualmente apenas a opção muted está disponível |
autoplay | autoplay | Quando presente na tag, faz com que o vídeo toque automaticamente ao abrir o site |
controls | controls | Quando presente, mostra as opções de controle dovídeo como play, stop e volume |
height | pixels | Define a altura do vídeo em pixels |
loop | loop | Se estiver presente, o vídeo será repetido ao término do mesmo, desde o início. |
poster | url | Define uma imagem para exibição no local do vídeo. |
preload | auto
metadata
none | Especifica quando o vídeo será carregado. É ignorada quando o atributo “autoplay” está presente. |
src | url| URL do vídeo que será executada |
width | pixels | Define a largura do vídeo em pixels |



Formatos de video
Atualmente podemos utilizar 3 formatos específicos de vídeo dentro do html5.
São eles:
* Ogv = Theora video codec e Vorbis audio codec
* MP4 = H.264 video codec e AAC audio codec
* WebM = VP8 video codec e Vorbis audio codec
Esses formatos também trazem uma questãode compatibildiade a tona, como podemos ver na tabela a seguir:
Formato | IE | Firefox | Opera | Chrome | Safari |
Ogv | Não | 3.5+ | 10.5+ | 5.0+ | Não |
MP4 | 9.0+ | Não | Não | 5.0+ | 3.0+ |
WebM | Não | 4.0+ | 10.6+ | 6.0+ | Não |
Por causa da questão de compatibilidade a tag <video> aceita multiplas fontes de vídeo, para assim não ficarmos dependentes de um único navegador oucodec.
Para se utilizar a opção de multiplas fontes devemos inserir mais de uma entrada “source” no código, conforme o exemplo:
<video width="320" height="240" controls="controls" >
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
Seu navegador não suporta este tipo de video....
tracking img