video

Sumário

O elemento HTML  <video> é utilizado para incorporar conteúdo de vídeo em um documento HTML ou XHTML.

Para uma lista de formatos suportados veja Media formats supported by the audio and video elements.

Contexto de uso

Atributos

Como qualquer elemento HTML, este elemento suporta os global attributes.

autoplay

Um atributo Booleano; se especificado, o video vai ser executado assim que possível sem precisar de carregar todo o arquivo.

autobuffer

Um atributo Booleano; se especificado, o video vai começar a carregar automaticamente mesmo que não especificado para tocar automaticamente. Isso deve ser usado em casos que é esperado que o vídeo seja reproduzido (por exemplo, se o usuário acessa a página para assistir o vídeo, mas não se o vídeo estiver incorporado à pagina junto a outro conteúdo). O vídeo é carregado até que o cache de mídia.

Nota de implementação: embora parte dos primeiros rascunhos das especificações do HTML5, o atributo autobuffer foi removido das últimas versões. Ele foi removido do Gecko 2.0 e outros navegadores, e nunca implementado em outros. A especificação define um novo atributo enumerado, preload, para substituir o atributo autobuffer, com sintaxe diferente. bug 548523

buffered

Um atributo que pode ser lido para determinar os intervalos do vídeo que já foram carregados. Este atributo contém um objeto TimeRanges.

controls

Se esse atributo estiver presente, o Gecko oferecerá controles para permitir o usuário controlar a reprodução do vídeo, incluindo volume, navegação, e pausa/continuação da reprodução.

height

A altura da área de exibição do vídeo, em pixels de CSS.

loop

Um atributo Booleano; se especificado, ao chegar no fim do vídeo, ele voltará automaticamente para o começo.

muted

Um atributo Booleano que indica a configuração padrão do áudio contido no vídeo. Se definido, o áudio vai começar mudo. Seu valor padrão é falso, significando que o áudio será reproduzido juntamente com o vídeo.

played

Um objeto TimeRanges indicando que todo o vídeo foi reproduzido.

preload

Esse atributo enumerado pretende dar uma sugestão ao navegador sobre o que o autor pensa que proporcionará uma melhor experiência do usuário. Ele pode ter os seguintes valores:

• none: indica que o usuário não necessitará consultar o vídeo ou que o servidor quer minimizar seu tráfego; em outros termos indica que o vídeo não deve ser pré-carregado.
• metadata: indica que embora o usuário não necessitará consultar o vídeo, pegar os meta-dados (ex: comprimento) é interessante.
• auto: indica que o usuário necessita ter prioridade; em outros termos isso indicou que, se necessário, o vídeo inteiro pode ser baixado, mesmo que não seja esperado a execução.
• a string vazia: é um sinônimo do valor auto.

Se não definido, seu valor padrão será definido pelo navegador (isto é, cada navegador pode escolher seu valor padrão), embora a especificação recomenda que seja definido para o metadata.

Notas de uso:

• O atributo autoplay tem precedência sobre o preload,pois se é necessário executar o vídeo automaticamente, o navegador obviamente o baixará. Definindo ambos autoplay e preload é permitido pela especificação.
• O navegador não é forçado pela especifição a seguir o valor desse atributo; é apenas uma sugestão.

poster

Uma URL indicando uma imagem de prévia do vídeo até o usuário reproduzir ou navegar por ele. Se este atributo não estiver especificado, nada será mostrado até que o primeiro quadro esteja disponível; então o primeiro quadro será exibido como imagem de prévia.

src

A URL do vídeo a ser incorporado. Isto é opcional; ao invés disso você pode usar o elemento <source> dentro do bloco do vídeo para especificar o vídeo a ser incorporado .

width

A largura da área de exibição do vídeo, em pixels de CSS.

O tempo de compensação (time offset) entre o áudio e o vídeo está especificado como um valor de ponto flutuante (float) representando o número de segundos da compensação.

Exemplos

<!-- Exemplo simples de vídeo -->
<video src="arquivovideo.ogg" autoplay poster="imagemprevia.jpg">
  Desculpa, o seu navegador não suporta vídeos incorporados, 
  mas você pode <a href="videofile.ogg">baixá-lo</a>
  e assistir pelo se reprodutor de mídia favorito!
</video>

<!-- Vídeo com legendas -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

O primeiro exemplo reproduz um vídeo, começando a reprodução assim que o vídeo for recebido para permitir a execução sem parar a execução para baixar mais. Até que o vídeo comece a reproduzir, a imagem "imagemprevia.jpg" será mostrada em seu lugar.

O segundo exemplo permite o usuário escolher entre diferentes legendas.

Suporte ao Servidor

Se o tipo MIME do vídeo não estiver definido corretamente no servidor, o vídeo poderá não ser mostrado ou uma caixa cinza contendo um X (se o JavaScript estiver habilitado) será exibida em seu lugar.

Se você disponibiliza seu vídeos como Ogg Theora, você pode corrigir esse problema para o servidor web Apache adicionando a extensão utilizada por seu arquivos de vídeo (".ogm", ".ogv", e ".ogg" são as mais comuns) para o tipo MIME "video/ogg" através do arquivo "mime.types" localizado em "/etc/apache" ou através da configuração de diretiva "AddType" no httpd.conf.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Se você disponibilizar seu vídeos como WebM, você pode corrigir esse problema para o servidor web Apache adicionando a extensão usada por seu arquivos de vídeo (".webm" é a mais comum) para o tipo MIME "video/webm" através do arquivo "mime.types" localizado em "/etc/apache" ou através da configuração de diretiva "AddType" no httpd.conf.

AddType video/webm .webm

Seu serviço de hospedagem talvez forneça uma interface simples para mudar a configuração dos tipos MIME para as novas tecnologias até que uma atualização global ocorra naturalmente.

Interface do DOM

Esse elemento implementa a interface HTMLVideoElement.

Compatibilidade dos Navegadores

Veja também

• Media formats supported by the audio and video elements
• audio
• Using HTML5 audio and video
• Manipulating video using canvas
• nsIDOMHTMLMediaElement
• TinyVid - exemplos utilizando arquivos ogg em HTML5.
• The video element (Especificação HTML 5)
• Configuring servers for Ogg media