
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.
- El delimitador de ancho, que es un número entero positivo seguido por el carácter
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 |
- Descripción de las Etiquetas HTML
- El Texto en HTML
- Elemento a en HTML
- Elemento abbr en HTML
- Elemento address en HTML
- Elemento area en HTML
- Elemento article en HTML
- Elemento aside en HTML
- Elemento audio en HTML
- Elemento b en HTML
- Elemento base en HTML
- Elemento bdi en HTML
- Elemento bdo en HTML
- Elemento blockquote en HTML
- Elemento body en HTML
- Elemento br en HTML
- Elemento button en HTML
- Elemento canvas en HTML
- Elemento caption en HTML
- Elemento cite en HTML
- Elemento code en HTML
- Elemento col en HTML
- Elemento colgroup en HTML
- Elemento data en HTML
- Elemento datalist en HTML
- Elemento dd en HTML
- Elemento del en HTML
- Elemento details en HTML
- Elemento dfn en HTML
- Elemento div en HTML
- Elemento dl en HTML
- Elemento dt en HTML
- Elemento em en HTML
- Elemento embed en HTML
- Elemento fieldset en HTML
- Elemento figcaption en HTML
- Elemento figure en HTML
- Elemento footer en HTML
- Elemento form en HTML
- Elemento head en HTML
- Elemento header en HTML
- Elemento hr en HTML