Etiqueta HTML <fuente>
Ejemplo
Un reproductor de audio con dos archivos fuente. El navegador elegirá la primera <fuente> que admita:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La <source>etiqueta se usa para especificar varios recursos multimedia para elementos multimedia, como
<video> , <audio> y <picture> .
La <source>etiqueta le permite especificar archivos de video/audio/imagen alternativos que el navegador puede elegir, según la compatibilidad del navegador o el ancho de la ventana gráfica. El navegador elegirá el primero <source>
que admita.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento.
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Atributos
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Specifies image sizes for different page layouts | |
| src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
| type | MIME-type | Specifies the MIME-type of the resource |
Atributos globales
La <source>etiqueta también es compatible con los atributos globales en HTML .
Atributos de eventos
La <source>etiqueta también es compatible con los atributos de eventos en HTML .
Más ejemplos
Ejemplo
Use <fuente> dentro de <video> para reproducir un video:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Ejemplo
Use <fuente> dentro de <imagen> para definir diferentes imágenes según el ancho de la ventana gráfica:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
páginas relacionadas
Tutorial HTML: vídeo HTML
Tutorial HTML: audio HTML
Referencia HTML DOM: Objeto fuente
Configuración predeterminada de CSS
Ninguna.