diff options
Diffstat (limited to 'files/pt-br/web/html/element/video/index.html')
| -rw-r--r-- | files/pt-br/web/html/element/video/index.html | 348 |
1 files changed, 348 insertions, 0 deletions
diff --git a/files/pt-br/web/html/element/video/index.html b/files/pt-br/web/html/element/video/index.html new file mode 100644 index 0000000000..4d9e4db8d6 --- /dev/null +++ b/files/pt-br/web/html/element/video/index.html @@ -0,0 +1,348 @@ +--- +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><video></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><video></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"><!-- 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 seu 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> +</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> |