HTML source

La etiqueta <source> en HTML se utiliza para especificar diferentes fuentes de medios para un elemento multimedia, como un video o un audio. La etiqueta <source> se utiliza junto con la etiqueta <picture> o <video> o <audio> para proporcionar diferentes formatos de medios para diferentes dispositivos y navegadores.

Esto es útil para mejorar la compatibilidad con diferentes navegadores y dispositivos y proporcionar una experiencia de usuario óptima.

Ejemplo de uso

Aquí tienes un ejemplo de cómo se utiliza:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está usando un video con tres formatos diferentes, “video.mp4”, “video.webm” y “video.ogg” para diferentes navegadores.

Atributos

Los atributos más importantes de la etiqueta <source> en HTML son:

• src: Este atributo especifica la ruta de la fuente de medios. Este atributo es obligatorio.

• type: Este atributo especifica el tipo MIME de la fuente de medios. Este atributo es obligatorio.

• media: Este atributo especifica una expresión media para mostrar la fuente de medios solo en dispositivos que cumplan con las condiciones especificadas.

Ten en cuenta que estos son solo algunos de los atributos más importantes de la etiqueta <source>, hay otros atributos adicionales que se pueden utilizar dependiendo de tus necesidades.

Más ejemplos

Aquí te muestro algunos ejemplos de cómo utilizar los atributos de la etiqueta <source> en HTML:

• Ejemplo de uso de src y type:

<video controls>
  <source src="path/to/video.mp4" type="video/mp4">
  <source src="path/to/video.ogg" type="video/ogg">
  <p>Tu navegador no soporta la etiqueta de video.</p>
</video>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se están especificando dos formatos diferentes de video mediante la etiqueta <source> y el atributo “src”, donde se especifica la ruta del video.

También se está especificando el atributo “type” en cada etiqueta <source>, donde se especifica el tipo de video. Si el navegador no soporta el formato especificado en la etiqueta <source>, se mostrará el mensaje de error.

• Ejemplo de uso de media:

<audio controls>
  <source src="path/to/audio.mp3" type="audio/mp3" media="(min-width: 800px)">
  <source src="path/to/audio.ogg" type="audio/ogg">
  <p>Tu navegador no soporta la etiqueta de audio.</p>
</audio>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se está especificando dos formatos diferentes de audio mediante la etiqueta <source> y el atributo “src”, donde se especifica la ruta del audio. También se está especificando el atributo “media” en la primera etiqueta <source>, donde se especifica el ancho mínimo de pantalla para mostrar ese formato de audio.

Si el dispositivo no cumple con esa condición se mostrará el formato de audio especificado en la segunda etiqueta <source>. Si el navegador no soporta el formato especificado en la etiqueta <source>, se mostrará el mensaje de error.