¿Como funciona el comando en HTML5: 'Source'?

Instrucción <source> en HTML5

La etiqueta <source> en HTML5 se utiliza para especificar múltiples recursos de medios para elementos multimedia como <audio> y <video>. Esta etiqueta es útil para proporcionar diferentes formatos de un mismo contenido de medios, asegurando así compatibilidad con distintos navegadores y dispositivos.

Atributos de <source>

1. src: Define la URL del archivo multimedia. Es un atributo obligatorio.
2. type: Especifica el tipo MIME del recurso. Este atributo es altamente recomendado ya que ayuda al navegador a seleccionar el recurso más apropiado rápidamente.
3. media: Especifica las condiciones bajo las cuales el recurso es adecuado. Puede ser una expresión de media query como las que se utilizan en CSS.
4. srcset: Utilizado principalmente en el contexto de imágenes <picture>, permite definir una lista de recursos de imagen. Aunque generalmente no se usa con <video> o <audio>, es bueno conocer que puede existir en otros contextos.
5. sizes: Utilizado junto con srcset en <picture>, define el tamaño de una imagen en función de las condiciones de media query.

Uso de <source> en HTML5

Uso en un elemento <video>

Al utilizar la etiqueta <source> dentro de un elemento <video>, podemos proporcionar el mismo contenido en diferentes formatos. Esto ayuda a garantizar que los usuarios puedan reproducir el video independientemente del navegador que utilicen.

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.webm" type="video/webm">
    Tu navegador no soporta el elemento de video.
</video>

En este ejemplo, el navegador intentará reproducir el video movie.mp4 primero. Si no puede reproducir ese formato, probará con movie.ogg y luego con movie.webm.

Uso en un elemento <audio>

Al igual que con los videos, el elemento <source> dentro de una etiqueta <audio> permite especificar varios formatos de un mismo archivo de audio.

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Tu navegador no soporta el elemento de audio.
</audio>

Aquí, el navegador intentará reproducir el audio en formato MP3 primero, y si no es compatible, intentará usar el formato OGG.

Uso de media en <source>

Podemos usar el atributo media para proporcionar diferentes recursos en función de las características del dispositivo o la ventana de visualización.

<video controls>
    <source src="movie-hd.mp4" type="video/mp4" media="(min-width: 800px)">
    <source src="movie-sd.mp4" type="video/mp4" media="(max-width: 799px)">
    Tu navegador no soporta el elemento de video.
</video>

En este ejemplo, si la ventana de visualización tiene un ancho mínimo de 800px, se usará movie-hd.mp4. Si es menor de 799px, se usará movie-sd.mp4.

Estos ejemplos demuestran cómo el uso de la etiqueta <source> puede hacer que tu contenido multimedia sea más accesible y compatible con distintos navegadores y dispositivos.