Etiqueta HTML <source>
La etiqueta <source> es un elemento vacío. Esto significa que la etiqueta no tiene ningún contenido, ni tampoco una etiqueta de cierre.
La etiqueta <source> es uno de los elementos HTML5. Se utiliza para definir múltiples recursos multimedia en diferentes formatos: video, audio o imagen. Esto es necesario para lograr la mejor compatibilidad posible entre navegadores. Entre las opciones disponibles, el navegador puede elegir el formato que admite y reproducir archivos de audio y video sin ninguna dificultad.
El elemento <source> puede utilizarse varias veces en un mismo documento para indicar archivos de audio/video alternativos e imágenes en numerosos formatos.
advertencia
Si la etiqueta
<source>se incluye en las etiquetas<audio>o<video>, debe colocarse antes de la etiqueta<track>y después de los archivos multimedia. Debe colocarse antes de<img>si está dentro de una etiqueta<picture>.
Sintaxis
La etiqueta <source> es vacía, lo que significa que no se requiere una etiqueta de cierre. Sin embargo, en XHTML, la etiqueta <source> debe cerrarse (<source/>).
Ejemplo de la etiqueta HTML <source>:
Ejemplo de la etiqueta HTML <source>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="https://es.w3docs.com/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
<source media="(min-width: 430px)" alt="img_2" srcset="https://es.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
<img src="https://es.w3docs.com/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;" />
</picture>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>Ejemplo de la etiqueta HTML <source> con los atributos src y type:
Fuente del video|Ejemplo|W3Docs.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.ogv" type=video/ogg />
<source src="https://es.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type=video/mp4 />
</video>
<p>Some information about video</p>
</body>
</html>Atributos
| Attributes | Value | Description |
|---|---|---|
| media | media_query | Indica que el archivo está adaptado a cierto tipo de dispositivos. |
| sizes | Indica el tamaño relativo aceptable de la fuente. Añadido en HTML5. | |
| src | URL | Indica la dirección URL del archivo multimedia. |
| srcset | URL | Indica las imágenes que se utilizan en diferentes situaciones (para pantallas de iPad, pantallas retina, etc.) Añadido en HTML5. |
| type | Valor para video: video/oggvideo/mp4video/webm Valor para audio: audio/ogg audio/mpeg | Indica el tipo MIME de la fuente multimedia. |
La etiqueta <source> también admite los Atributos Globales y los Atributos de Eventos.
Práctica
¿Cuál de las siguientes opciones representa correctamente el uso de la etiqueta HTML <source>?