El elemento HTML <source> especifica recursos de medios múltiples para los elementos <picture>, <audio>, o <video>. Es un elemento vacío. Normalmente se utiliza para servir el mismo contenido multimedia en varios formatos soportados por diferentes navegadores.

Categorías de contenido Ninguna.
Contenido permitido Ninguno, esto es un empty element.
Omisión de Etiqueta Debe tener una etiqueta inicial, pero no debe tener una etiqueta final.
Padres permitidos
Un elemento multimedia—<audio> o <video>—y se debe colocar antes que cualquier contenido de flujo o elemento <track>.
Un elemento <picture>, y se debe colocar antes del elemento <img>.
Roles ARIA permitidos Ninguno
Interfaz DOM   HTMLSourceElement

Atributos

Este elemento incluye los atributos globales.

sizes
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 srcset se utilizará.
El atributo sizes tiene un efecto solo cuando el elemento <source> es hijo directo de un elemento <picture>.
src
Es la ubicación del recurso multimedia, requerido por los elementos <audio> y <video>. El valor de este atributo es ignorado cuando el elemento <source> se coloca dentro de un elemento <picture>.
srcset
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:
  1. una URL a una imagen,
  2. un descriptor de ancho, que es un entero positivo seguido directamente por 'w'. El valor predeterminado, si falta, es el infinito.
  3. un descriptor de densidad de píxeles, que es un número flotante positivo seguido directamente por 'x'. El valor predeterminado, si falta, es 1x.

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.
El navegador elige la imagen más adecuada para mostrar en un momento determinado.
El atributo srcset solo tiene efecto cuando el elemento <source> es hijo directo de un elemento <picture>.

type
El tipo MIME del recurso, opcionalmente con un parámetro codecs. Consultar RFC 4281 para obtener información sobre cómo especificar los códecs.
media
Consulta multimedia de los medios destinados al recurso; esto solo debe usarse en un elemento <picture>.

Si el atributo type 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 <source>. Si se especifica el atributo type, 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 <source> se comprueba a la vez.

Ejemplos

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 audio o video, se muestra un aviso. Si el navegador admite los elementos pero no admite ninguno de los formatos especificados, se genera un evento error y los controles de medios predeterminados (si están habilitados) indicarán un error. Consulte también la lista de formatos de medios compatibles con los elementos de audio y video en varios navegadores.

<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>

Para obtener más ejemplos, consulte Uso de audio y video en Firefox.

Especificaciones

Especificación Estado Comentario
HTML Living Standard
La definición de '<source>' en esta especificación.
Living Standard  

Compaibilidad entre navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo 3.5
Notas
Soporte completo 3.5
Notas
Notas Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
IE Soporte completo 9Opera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4
Notas
Soporte completo 4
Notas
Notas Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
Opera Android ? Safari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
media
Experimental
Chrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo 15IE Soporte completo 9Opera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 15Opera Android ? Safari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
sizes
Experimental
Chrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo 38
Soporte completo 38
Soporte completo 33
Deshabilitado
Deshabilitado From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari Soporte completo 9
Soporte completo 9
Soporte parcial 7
WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 38
Soporte completo 38
Soporte completo 33
Deshabilitado
Deshabilitado From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Soporte completo 9.2
Soporte completo 9.2
Soporte parcial 8
Samsung Internet Android Soporte completo Si
srcChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo 3.5IE Soporte completo 9Opera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android ? Safari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
srcset
Experimental
Chrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo 38
Soporte completo 38
Soporte completo 33
Deshabilitado
Deshabilitado From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari Soporte completo 9
Soporte completo 9
Soporte parcial 7
WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 38
Soporte completo 38
Soporte completo 33
Deshabilitado
Deshabilitado From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Soporte completo 9.2
Soporte completo 9.2
Soporte parcial 8
Samsung Internet Android Soporte completo Si
typeChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo 3.5IE Soporte completo 9Opera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android ? Safari iOS Soporte completo SiSamsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo
Compatibility unknown  
Compatibility unknown
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: guillermomartinmarco, teoli, inma_610
Última actualización por: guillermomartinmarco,