1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: source
slug: Web/HTML/Element/Source
translation_of: Web/HTML/Element/source
---
<h2 id="Sumário">Sumário</h2>
<p>O elemento <code>source</code> é utilizado para especificar múltiplos recursos de mídia de elementos {{HTMLElement("picture")}}, {{HTMLElement("audio")}} ou {{HTMLElement("video")}} em HTML5. É um elemento vazio. É normalmente usado para disponibilizar <a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">multiple formats supported by different browsers</a>.</p>
<h2 id="Contexto_de_uso">Contexto de uso</h2>
<table class="standard-table">
<tbody>
<tr>
<td>Conteúdo permitido</td>
<td>Nenhum; isso é um elemento vazio.</td>
</tr>
<tr>
<td>Omissão de tag</td>
<td>Deve ter uma tag de início, mas não deve ter uma tag de fim.</td>
</tr>
<tr>
<td>Elementos pais permitidos</td>
<td>{{HTMLElement("picture")}}, {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
</tr>
<tr>
<td>Documento normativo</td>
<td><a class="external" href="http://www.w3.org/TR/html5/video.html#the-source-element" title="http://www.w3.org/TR/html5/video.html#the-source-element">HTML5, section 4.8.8</a></td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Como todos os outros elementos de HTML, esse elemento suporta os <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<dl>
<dt>{{ htmlattrdef("src") }}</dt>
<dd>Requerido, endereço do arquivo de mídia.</dd>
<dt>{{ htmlattrdef("type") }}</dt>
<dd>O tipo MIME do arquivo, opcionalmente com um parametro de <code>codecs</code>. Veja o <a class="external" href="http://www.rfc-editor.org/rfc/rfc4281.txt" title="http://www.rfc-editor.org/rfc/rfc4281.txt">RFC 4281</a> para informações sobre como especificar codec.</dd>
<dt>{{ htmlattrdef("media") }}</dt>
<dd>Definição do tipo de mídia (<a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Media query</a>) pretendido.</dd>
</dl>
<p>Se o atributo <strong>type</strong> não está especificado, o tipo da mídia é obtido no servidor e é verificado se o Gecko consegue reproduzi-lo; se não for possível reproduzi-lo, o próximo <strong>source</strong> é verificado. Se o atributo <strong>type</strong> está definido, ele é comparado aos tipos que o Gecko consegue reproduzir, e se não for reconhecido, o servido não é solicitado; ao invés disso, o próximo elemento <strong>source</strong> é verificado.</p>
<h2 id="Interface_do_DOM">Interface do DOM</h2>
<p>Esse elemento implementa a interface <code><a href="/en/DOM/HTMLSourceElement" title="en/DOM/HTMLSourceElement">HTMLSourceElement</a></code>.</p>
<h2 id="Exemplos">Exemplos</h2>
<p>Esse exemplo demonstra como oferecer um vídeo no formato Ogg para usuários em que os navegadores suporta o formato Ogg, e um formato QuickTime para os usuários que o suporta. Se os elementos <code> audio</code> ou <code>video</code> não forem suportados pelo navegador, um aviso será mostrado. Se o navegador suportar o elemento, mas não suportar nenhum dos formatos especificados, um evento de <code>error</code> será lançado e os controles padrões de mídia (se ativados) indicarão o erro. Veja também a lista de <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> em vários navegadores.</p>
<pre class="brush: html"><video controls>
<source src="foo.ogg" type="video/ogg"> <!-- Escolhido pelo Firefox -->
<source src="foo.mov" type="video/quicktime"> <!-- Escolhido pelo Safari -->
Desculpa; seu navegador não é compatível com vídeo em HTML5.
</video>
</pre>
<p>Para mais exemplos, veja <a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a>.</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>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoDesktop("1.9.1") }}</td>
<td>9.0</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
<tr>
<td>Atributo <code>media</code></td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoDesktop("15.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</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>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoMobile("1.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Atributo <code>media</code></td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoMobile("15.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h3 id="Notas_específicas_do_Gecko">Notas específicas do Gecko</h3>
<p>Atualmente, apenas um pequeno conjunto de funcionalidades está implementado — o Gecko escolhe o primeiro elemento source que tem um tipo correspondente <a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">the MIME-type of a supported media format</a>; veja o {{ bug(449363) }} para detalhes.</p>
<div class="noinclude">{{ languages({ "en":"en/HTML/Element/source", "ja":"ja/HTML/Element/source" }) }}</div>
|
