Elementos <source> y <track>

8.1 Elemento <source>

Los elementos <source> y <track> son cruciales en HTML5 porque permiten soportar diferentes formatos multimedia y mejoran la accesibilidad del contenido. Vamos a verlos en más detalle.

El elemento <source> se usa dentro de los elementos <audio>, <video>, y <picture> para especificar distintas fuentes de contenido multimedia. Esto permite a los navegadores elegir el formato más adecuado para la reproducción, garantizando compatibilidad entre navegadores y soporte para diferentes dispositivos.

Sintaxis

    
      <source src="URL" type="MIME-type">
    
  

Atributos

• src: especifica la ruta al archivo multimedia.
• type: indica el tipo de archivo y su MIME-type. Ayuda al navegador a identificar si puede soportar ese formato.

Ejemplos de uso:

Ejemplo 1: Dentro del elemento <video>

En este ejemplo, el navegador intentará reproducir el primer formato soportado.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogv" type="video/ogg">
        Tu navegador no soporta la reproducción de video.
      </video>
    
  

Ejemplo 2: Dentro del elemento <audio>

    
      <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        Tu navegador no soporta la reproducción de audio.
      </audio>
    
  

Ejemplo 3: Dentro del elemento <picture>

    
      <picture>
        <source srcset="image-320w.jpg" media="(max-width: 320px)">
        <source srcset="image-640w.jpg" media="(max-width: 640px)">
        <source srcset="image-1280w.jpg" media="(max-width: 1280px)">
        <img src="image-1280w.jpg" alt="Ejemplo de imagen">
      <picture>
    
  

Ventajas de usar <source>

• Compatibilidad entre navegadores: permite especificar varios formatos, asegurando la reproducción en diferentes navegadores.
• Optimización para dispositivos: es posible proporcionar diferentes archivos para dispositivos y condiciones específicas.

8.2 Elemento <track>

El elemento <track> se usa para añadir pistas de texto al contenido multimedia, como subtítulos, subtítulos para personas sordas o con discapacidad auditiva, descripciones, capítulos y metadatos. Se coloca dentro de los elementos <audio> o <video>.

Sintaxis

    
      <track src="URL" kind="type" srclang="language" label="label">
    
  

Atributos

1. src: especifica la ruta al archivo de texto de la pista.
2. kind: define el tipo de pista de texto. Valores posibles:
   • subtitles: subtítulos para traducir diálogos.
   • captions: subtítulos para personas sordas o con discapacidades auditivas, incluyendo descripciones de sonidos.
   • descriptions: descripciones en audio para personas con discapacidad visual.
   • chapters: capítulos para navegar por el contenido multimedia.
   • metadata: metadatos, que pueden ser usados por JavaScript.
3. srclang: especifica el idioma de la pista de texto (por ejemplo, en para inglés, es para español).
4. label: nombre descriptivo de la pista de texto, que aparece en el menú de selección de pistas.
5. default: indica que esta pista debe estar activada por defecto.

Ejemplos de uso:

Ejemplo 1: Subtítulos para video

En este ejemplo, el video tiene dos pistas de subtítulos: en inglés y en español. El usuario puede elegir la pista deseada desde el menú.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
        <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
        Tu navegador no soporta la reproducción de video.
      </video>
    
  

Ejemplo 2: Subtítulos para personas sordas o con discapacidad auditiva

Esta configuración añade una pista de subtítulos para personas sordas o con discapacidad auditiva en inglés.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="captions" srclang="en" label="subtitles">
        Tu navegador no soporta la reproducción de video.
      </video>
    
  

Ventajas de usar <track>

• Mejorar la accesibilidad: los subtítulos y descripciones hacen el contenido accesible para usuarios con discapacidades auditivas o visuales.
• Soporte multilingüe: permite añadir subtítulos en varios idiomas.
• Información adicional: capítulos y metadatos ayudan a organizar y estructurar el contenido multimedia.

8.3 Formatos de archivos para pistas de texto

Las pistas de texto suelen guardarse en el formato WebVTT (Web Video Text Tracks). Este formato es soportado por la mayoría de los navegadores modernos y es fácil de leer tanto por humanos como por máquinas.

Ejemplo de archivo WebVTT (subtitles_en.vtt)

    
      WEBVTT
      1
      00:00:00.000 --> 00:00:05.000
      Welcome to our video presentation.

      2
      00:00:05.000 --> 00:00:10.000
      We hope you find this informative and enjoyable.
    
  

Ejemplos de uso combinado de los elementos <source> y <track>

    
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Video con múltiples fuentes y pistas de texto</title>
        </head>
        <body>
          <h1>Ejemplo de video con múltiples fuentes y pistas de texto</h1>
          <video controls width="600" poster="posterimage.jpg">
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.webm" type="video/webm">
            <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
            <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
            <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
            <track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="English Descriptions">
            Tu navegador no soporta el elemento de video.
          </video>
        </body>
      </html>