Etiqueta <source> de HTML

Definición y uso

<source> Las etiquetas se utilizan para definir elementos de medios (como <video>,<audio> y <picture>）para especificar varios recursos de medios.

<source> La etiqueta permite especificar archivos de video/audio/imagen alternativos, que el navegador puede seleccionar según el soporte del navegador o el ancho de la vista. El navegador seleccionará el primero que soporte. <source>.

Véase también:

Tutorial de HTML:Vídeo HTML

Tutorial de HTML:Audio HTML

Manual de referencia del DOM HTML:Objeto de origen

Ejemplo

Ejemplo 1

Este es un reproductor de audio con dos archivos de fuentes. El navegador seleccionará el primero que soporte. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Su navegador no admite la etiqueta de audio.
</audio>

Pruebe personalmente

Ejemplo 2

En ejemplo 2 de <video> <source> Reproducir video:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Su navegador no admite la etiqueta de video.
</video>

Pruebe personalmente

Ejemplo 3

En ejemplo 3 de <picture> <source> Para definir diferentes imágenes en función del ancho de la vista, utilice <picture>:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flores" style="width:auto;">
</picture>

Pruebe personalmente

Atributo

Atributo Valor Descripción
media Consulta de medios Acepta cualquier consulta de medios válida, generalmente definida en CSS.
sizes Se especifica el tamaño de la imagen para diferentes configuraciones de diseño de página.
src URL

Se utiliza para especificar la URL del archivo de medios.

Cuando <source> se utiliza en <audio> y <video>, este atributo es obligatorio.
srcset URL

Se utiliza para especificar la URL de la imagen que se utiliza en diferentes situaciones.

Este atributo es obligatorio cuando <source> se utiliza en <picture>.
type Tipo MIME Especifica el tipo MIME del recurso.

Atributos globales

<source> La etiqueta también admite Atributos globales en HTML.

Atributos de evento

<source> La etiqueta también admite Atributos de evento en HTML.

Configuración CSS predeterminada

Ninguno.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad por primera vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5