---
title: video
slug: Web/HTML/Element/Video
translation_of: Web/HTML/Element/video
---
<p> </p>

<h2 id="Sumário">Sumário</h2>

<p>O elemento HTML  <code>&lt;video&gt;</code> é utilizado para incorporar conteúdo de vídeo em um documento HTML ou XHTML.</p>

<p>Para uma lista de formatos suportados veja <a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a>.</p>

<h2 id="Contexto_de_uso">Contexto de uso</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td>Conteúdo permitido</td>
   <td><a href="/en/HTML/Content_categories#transparent_content" title="en/HTML/Content categories#transparent content">Transparent content</a>, contendo ou um atributo <strong>src</strong> ou um ou mais elementos {{ HTMLElement("source") }}, seguido por <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flow content</a> ou <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a> , sem <code>&lt;video&gt;</code> ou elementos {{ HTMLElement("audio") }}.</td>
  </tr>
  <tr>
   <td>Omissão de tag</td>
   <td>Nenhuma, tanto as tags iniciais quanto as finais devem estar presentes.</td>
  </tr>
  <tr>
   <td>Permissão de elementos pais</td>
   <td>Qualquer elemento que aceite <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flow content</a>, ou qualquer outro elemento que aceite <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a>.</td>
  </tr>
  <tr>
   <td>Documento normativo</td>
   <td><a class="external" href="http://www.w3.org/TR/html5/video.html#video" title="http://www.w3.org/TR/html5/video.html#video">HTML 5, section 4.8.6</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p>Como qualquer elemento HTML, este elemento suporta os <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>

<dl>
 <dt>{{ htmlattrdef("autoplay") }}</dt>
 <dd>Um atributo Booleano; se especificado, o video vai ser executado assim que possível sem precisar de carregar todo o arquivo.</dd>
</dl>

<div class="note">
<p>Nota: Algumas versões do Chrome aceitam somente o <code>autostart</code> e não o autoplay</p>
</div>

<dl>
 <dt>{{ htmlattrdef("autobuffer") }} {{ Non-standard_inline() }} {{ obsolete_inline() }}</dt>
 <dd>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.</dd>
 <dd>
 <div class="note"><strong>Nota de implementação:</strong> embora parte dos primeiros rascunhos das especificações do HTML5, o atributo<code> autobuffer</code> 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, <code>preload</code>, para substituir o atributo <code>autobuffer</code>, com sintaxe diferente. {{ bug(548523) }}</div>
 </dd>
 <dt>{{ htmlattrdef("buffered") }}</dt>
 <dd>Um atributo que pode ser lido para determinar os intervalos do vídeo que já foram carregados. Este atributo contém um objeto {{ domxref("TimeRanges") }}.</dd>
 <dt>{{ htmlattrdef("controls") }}</dt>
 <dd>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.</dd>
 <dt>{{ htmlattrdef("height") }}</dt>
 <dd>A altura da área de exibição do vídeo, em pixels de CSS.</dd>
 <dt>{{ htmlattrdef("loop") }}</dt>
 <dd>Um atributo Booleano; se especificado, ao chegar no fim do vídeo, ele voltará automaticamente para o começo.</dd>
 <dt>{{ htmlattrdef("muted") }}</dt>
 <dd>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.</dd>
 <dt>{{ htmlattrdef("played") }}</dt>
 <dd>Um objeto {{ domxref("TimeRanges") }} indicando que todo o vídeo foi reproduzido.</dd>
 <dt>{{ htmlattrdef("preload") }}</dt>
 <dd>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:
 <ul>
  <li><span style="font-family: Courier New;">none: </span>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.</li>
  <li><span style="font-family: Courier New;">metadata</span>: indica que embora o usuário não necessitará consultar o vídeo, pegar os meta-dados (ex: comprimento) é interessante.</li>
  <li><span style="font-family: Courier New;">auto</span>: 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.</li>
  <li>a <em>string vazia</em>: é um sinônimo do valor <span style="font-family: Courier New;">auto</span>.</li>
 </ul>

 <p>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 <span style="font-family: Courier New;">metadata</span>.</p>

 <div class="note"><strong>Notas de uso:</strong>

 <ul>
  <li>O atributo <code>autoplay</code> tem precedência sobre o <code>preload,</code>pois se é necessário executar o vídeo automaticamente, o navegador obviamente o baixará. Definindo ambos <code>autoplay</code> e <code>preload</code> é permitido pela especificação.</li>
  <li>O navegador não é forçado pela especifição a seguir o valor desse atributo; é apenas uma sugestão.</li>
 </ul>
 </div>
 </dd>
 <dt>{{ htmlattrdef("poster") }}</dt>
 <dd>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.</dd>
 <dt>{{ htmlattrdef("src") }}</dt>
 <dd>A URL do vídeo a ser incorporado. Isto é opcional; ao invés disso você pode usar o elemento {{ HTMLElement("source") }} dentro do bloco do vídeo para especificar o vídeo a ser incorporado .</dd>
 <dt>{{ htmlattrdef("width") }}</dt>
 <dd>A largura da área de exibição do vídeo, em pixels de CSS.</dd>
</dl>

<p>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.</p>

<div class="note"><strong>Nota:</strong> A definição de valor de tempo de compensação ainda não foi completada na especificação do HTML 5 e está sujeita a mudança.</div>

<h2 id="Exemplos">Exemplos</h2>

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

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

<p>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.</p>

<p>O segundo exemplo permite o usuário escolher entre diferentes legendas.</p>

<h2 id="Suporte_ao_Servidor">Suporte ao Servidor</h2>

<p>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.</p>

<p>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.</p>

<pre>AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
</pre>

<p>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.</p>

<pre>AddType video/webm .webm
</pre>

<p>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.</p>

<h2 id="Interface_do_DOM">Interface do DOM</h2>

<p>Esse elemento implementa a interface <code><a href="/en/DOM/HTMLVideoElement" title="en/DOM/HTMLVideoElementInterface">HTMLVideoElement</a></code>.</p>

<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte Básico</td>
   <td>3.0</td>
   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Atributo <code>autoplay</code></td>
   <td>3.0</td>
   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Atributo <code>buffered</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Atributo <code>controls</code></td>
   <td>3.0</td>
   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Atributo <code>loop</code></td>
   <td>3.0</td>
   <td>{{ CompatGeckoDesktop("11.0") }}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Atributo <code>muted</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("11.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Atributo <code>played</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("15.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Atributo <code>poster</code></td>
   <td>3.0</td>
   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Atributo <code>preload</code></td>
   <td>3.0</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>9.0</td>
   <td>Suportado sobre o nome antigo de <code>autobuffer</code></td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Atributo <code>src</code></td>
   <td>3.0</td>
   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte Básico</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("1.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Atributo <code>autoplay</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("1.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Atributo <code>buffered</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("2.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Atributo <code>controls</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("1.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Atributo <code>loop</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("11.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Atributo <code>muted</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("11.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Atributo <code>played</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("15.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Atributo <code>poster</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("1.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Atributo <code>preload</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("2.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Atributo <code>src</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("1.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a class="internal" href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li>
 <li><a class="internal" href="http://developer-new.mozilla.org/pt-BR/docs/HTML/Element/audio" title="pt-BR/HTML/Element/Audio"><code>audio</code></a></li>
 <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using HTML5 audio and video</a></li>
 <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipulating video using canvas</a></li>
 <li><a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="En/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li>
 <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - exemplos utilizando arquivos ogg em HTML5.</li>
 <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video">The <code>video</code> element</a> (Especificação HTML 5)</li>
 <li><a class="internal" href="/en/Configuring_servers_for_Ogg_media" title="en/Configuring servers for Ogg media">Configuring servers for Ogg media</a></li>
</ul>

<p>{{ languages( { "fr": "fr/HTML/Element/video","es": "es/HTML/Elemento/video" } ) }}</p>