Elemento source en HTML

El elemento html source especifica múltiples fuentes de archivos multimedia dentro del elemento <picture>, <audio> o <video>. Este elemento está vacío, su uso más común es proporcionar el mismo contenido multimedia en diferentes formatos para que el navegador pueda reproducir el más adecuado.

Este ejemplo explica cómo proporcionar un video en formato webm a aquellos cuyo navegador admite video WebM y cómo proporcionar el clip en formato MP4 a los usuarios cuyo navegador admite este formato.

Si el elemento <audio> no es compatible o <video> no es compatible con el navegador, aparecerá un mensaje alertando al usuario sobre esto. Si el navegador no puede reproducir ningún formato disponible, error se producirá el evento y los controles predeterminados (si están habilitados) indicarán un error.

< video > 
  < source  src = "video-1.webm"  type = "video / webm" > 
  < source  src = "video-1.mp4"  type = "video / mp4" > 
  Su navegador no es compatible con el < code > video </ code > elemento .
</ video >

Este ejemplo muestra cómo incrustar un clip de audio usando el elemento <audio> que tiene más de una fuente, una en Ogg y otra en MP3:

< audio  controls = "controls" > 
  < source  src = "audio-1.ogg"  type = "audio / ogg" > 
  < source  src = "audio-1.mp3"  type = "audio / mpeg" > < code > el 
  elemento de audio no es compatible por su navegador </ code > .
</ audio >

Etiqueta html source

Clasificaciones de contenido	No hay.
Contenido permitido	No hay, es un elemento vacío.
Acrónimo	La etiqueta inicial debe estar presente y la etiqueta final debe omitirse.
Elementos del padre	El elemento <audio> o `<video>` debe estar presente antes de cualquier contenido del mismo y por elemento `<track>`. O un elemento y `<picture>` debe colocarse antes del elemento `<img>`.
Interfaz DOMO	`HTMLSourceElement`

Características

En este elemento html source se pueden utilizar propiedades globales.

`sizes`

Añadida en HTML5, esta función acepta una cadena con uno o más valores (separados por comas) para diferentes fuentes de escalado de imágenes. Cada fuente debe contener:

La declaración de consulta de medios, que debe eliminarse en el último elemento de la lista.
valor de escala de la imagen

El valor de escala de la imagen determina el tamaño de la imagen que se mostrará, y los navegadores usan una consulta de medios para ubicar un recurso de imagen definido en una propiedad srcset, cuando esos recursos se emparejan con un especificador de visualización ( w).

El tamaño de la imagen seleccionada afecta el tamaño neto de la imagen (es decir, el tamaño al que se renderiza la imagen si no se le aplican reglas CSS).

Si la propiedad srcset no existe o no tiene ningún valor en el especificador de visualización w, la propiedad sizes no tiene ningún efecto. La propiedad sizes no tiene ningún efecto si el elemento no es <source> un hijo directo del elemento <picture>.

`src`

Esta propiedad es necesaria si el elemento <source> es hijo de uno de los dos elementos <audio> o <video>, y especifica el enlace al archivo multimedia. Esta propiedad se ignorará si se coloca dentro del elemento <picture>.

`srcset`

Una lista de una o más cadenas de texto separadas por comas, que indican un conjunto de posibles fuentes de imágenes para que una de ellas sea utilizada por el navegador.

Cada cadena del contenido de esta propiedad consta de:

Enlace a la URL del archivo de imagen
Opcional un espacio seguido de uno de los siguientes delimitadores
- El delimitador de ancho, que es un número entero positivo seguido por el carácter w, el valor del delimitador de ancho se dividirá por el tamaño de origen proporcionado en la propiedad de tamaños para calcular la densidad de píxeles real.
- El determinante de la densidad de píxeles, que es un número decimal positivo seguido inmediatamente por la letra x.

Si no se da ningún valor a uno de los parámetros anteriores, el delimitador predeterminado se asignará al recurso 1x. Es incorrecto usar el selector de ancho con el selector de densidad en la misma propiedad srcset, y es incorrecto duplicar los selectores (es decir, dos fuentes diferentes no pueden tener el mismo srcset especificador de densidad 2x).

El navegador elegirá una de las fuentes mencionadas en esta función a su discreción, dando a los navegadores la posibilidad de elegir la mejor escala de imagen en función de las preferencias del usuario o para restringir el uso de la mensajería de red. La propiedad no tendrá srcset ningún efecto si el elemento no es <source> un hijo directo del elemento <picture>.

`type`

Tipo MIME con configuración de parámetros codecs para declarar los codificadores utilizados, consulte RFC 4281 para obtener información sobre la sintaxis para escribir codificadores.

Si no se establece el valor de la propiedad de tipo, el navegador intentará obtener el tipo de datos del servidor y luego comprobará que puede ejecutarlo <source>. Si la propiedad está type configurada, la comparará con las fórmulas que puede ejecutar, si no puede ejecutarla, no preguntará al servidor y pasará directamente al <source> siguiente elemento.

`media`

Una expresión de consulta de medios para el recurso especificado, y esta propiedad solo se puede usar dentro de un <picture>.

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado