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
|
---
title: <source>
slug: Web/HTML/Elemento/source
tags:
- Elemento
- HTML
- Media
- Referencia
- Web
translation_of: Web/HTML/Element/source
---
<p>El <strong>elemento HTML <code><source></code> </strong> especifica recursos de medios múltiples para los elementos {{HTMLElement("picture")}}, {{HTMLElement("audio")}}, o {{HTMLElement("video")}}. Es un elemento vacío. Normalmente se utiliza para servir el mismo contenido multimedia en <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">varios formatos soportados por diferentes navegadores</a>.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</div>
<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> y envíenos una solicitud de pull.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorías de contenido</a></th>
<td>Ninguna.</td>
</tr>
<tr>
<th scope="row">Contenido permitido</th>
<td>Ninguno, esto es un {{Glossary("empty element")}}.</td>
</tr>
<tr>
<th scope="row">Omisión de Etiqueta</th>
<td>Debe tener una etiqueta inicial, pero no debe tener una etiqueta final.</td>
</tr>
<tr>
<th scope="row"><dfn>Padres permitidos</dfn></th>
<td>
<div>Un elemento multimedia—{{HTMLElement("audio")}} o {{HTMLelement("video")}}—y se debe colocar antes que cualquier <a href="/en-US/docs/HTML/Content_categories#Flow_content">contenido de flujo</a> o elemento {{HTMLElement("track")}}.</div>
<div>Un elemento {{HTMLElement("picture")}}, y se debe colocar antes del elemento {{HTMLElement("img")}}.</div>
</td>
</tr>
<tr>
<th scope="row">Roles ARIA permitidos</th>
<td>Ninguno</td>
</tr>
<tr>
<th scope="row">Interfaz DOM</th>
<th> </th>
<td>{{domxref("HTMLSourceElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Este elemento incluye los <a href="/en-US/docs/HTML/Global_attributes">atributos globales</a>.</p>
<dl>
<dt>{{htmlattrdef("sizes")}} {{experimental_inline}}</dt>
<dd>Es una lista de tamaños del origen que describe el ancho renderizado final de la imagen representada por el origen. Cada tamaño de origen consiste de una lista separada por comas de pares de longitud de condición de medios. Esta información es utilizada por el navegador para determinar, antes de distribuir la página, qué imagen definida en {{htmlattrxref("srcset", "source")}} se utilizará.<br>
El atributo <code>sizes</code> tiene un efecto solo cuando el elemento {{HTMLElement("source")}} es hijo directo de un elemento {{HTMLElement("picture")}}.</dd>
<dt>{{htmlattrdef("src")}}</dt>
<dd>Es la ubicación del recurso multimedia, requerido por los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}}. El valor de este atributo es ignorado cuando el elemento <code><source></code> se coloca dentro de un elemento {{HTMLElement("picture")}}.</dd>
<dt>{{htmlattrdef("srcset")}} {{experimental_inline}}</dt>
<dd>Una lista de una o más cadenas separadas por comas que indican un conjunto de posibles imágenes representadas por la fuente para que las utilice el navegador. Cada cadena se compone de:
<ol>
<li>una URL a una imagen,</li>
<li>un descriptor de ancho, que es un entero positivo seguido directamente por <code>'w'</code>. El valor predeterminado, si falta, es el infinito.</li>
<li>un descriptor de densidad de píxeles, que es un número flotante positivo seguido directamente por <code>'x'</code>. El valor predeterminado, si falta, es <code>1x</code>.</li>
</ol>
<p>Cada cadena en la lista debe tener al menos un descriptor de ancho o un descriptor de densidad de píxeles para que sea válido. Entre los elementos de la lista, solo debe haber una cadena que contenga la misma tupla de descriptor de ancho y descriptor de densidad de píxeles.<br>
El navegador elige la imagen más adecuada para mostrar en un momento determinado.<br>
El atributo <code>srcset</code> solo tiene efecto cuando el elemento {{HTMLElement("source")}} es hijo directo de un elemento {{HTMLElement("picture")}}.</p>
</dd>
<dt>{{htmlattrdef("type")}}</dt>
<dd>El tipo MIME del recurso, opcionalmente con un parámetro <code>codecs</code>. Consultar <a class="external" href="https://tools.ietf.org/html/rfc4281"> RFC 4281 </a> para obtener información sobre cómo especificar los códecs.</dd>
<dt>{{htmlattrdef("media")}} {{experimental_inline}}</dt>
<dd><a class="internal" href="/en-US/docs/CSS/Media_queries">Consulta multimedia</a> de los medios destinados al recurso; esto solo debe usarse en un elemento {{HTMLElement("picture")}}.</dd>
</dl>
<p>Si el atributo <code>type</code> no se especifica, el tipo de medio se recupera del servidor y se verifica para ver si el agente de usuario puede manejarlo; si no se puede procesar, se comprueba el siguiente <code><source></code>. Si se especifica el atributo <code>type</code>, se compara con los tipos que puede presentar el agente de usuario y, si no se reconoce, el servidor ni siquiera recibe consultas; en su lugar, el siguiente elemento <code><source></code> se comprueba a la vez.</p>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Este ejemplo muestra cómo ofrecer un video en formato Ogg para usuarios cuyos navegadores admiten el formato Ogg, y un video en formato QuickTime para usuarios cuyos navegadores lo admiten. Si el navegador no admite los elementos <code>audio</code> o <code>video</code>, se muestra un aviso. Si el navegador admite los elementos pero no admite ninguno de los formatos especificados, se genera un evento <code>error</code> y los controles de medios predeterminados (si están habilitados) indicarán un error. Consulte también la lista de <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">formatos de medios compatibles con los elementos de audio y video</a> en varios navegadores.</p>
<pre class="brush: html"><video controls>
<source src="foo.webm" type="video/webm">
<source src="foo.ogg" type="video/ogg">
<source src="foo.mov" type="video/quicktime">
Lo lamento; su navegador no soporta video HTML5.
</video>
</pre>
<p>Para obtener más ejemplos, consulte <a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Uso de audio y video en Firefox</a>.</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-source-element', '<source>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compaibilidad_entre_navegadores">Compaibilidad entre navegadores</h2>
<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de pull.</div>
<p>{{Compat("html.elements.source")}}</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>Elemento {{HTMLElement("picture")}}</li>
<li>Elemento {{HTMLElement("audio")}}</li>
<li>Elemento {{HTMLElement("video")}}</li>
</ul>
<p>{{HTMLRef}}</p>
|
