El Atributo SRCLANG

El atributo srclang en HTML se utiliza junto con el elemento <track> para definir el idioma de un archivo de texto asociado a un recurso multimedia (como un video o audio). Este atributo es clave para proporcionar subtítulos, descripciones o metadatos en diferentes idiomas, mejorando la accesibilidad y experiencia del usuario. A continuación, te explicamos cómo usarlo correctamente.

1. Introducción al atributo srclang

• Propósito:
  Especificar el idioma del archivo de texto (por ejemplo, subtítulos o descripciones) vinculado a un elemento multimedia mediante <track>.

• Contexto:
  Se usa dentro de la etiqueta <track>, que a su vez está dentro de <video> o <audio>.

• Valor:
  Un código de idioma en formato ISO 639-1 (ej.: es para español, en para inglés).

2. Sintaxis básica

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track 
    src="subtitles-en.vtt" 
    kind="subtitles" 
    srclang="en" 
    label="English"
  >
</video>

3. Ejemplos prácticos

Ejemplo 1: Subtítulos en múltiples idiomas

<video controls>
  <source src="video.mp4" type="video/mp4">
  <!-- Subtítulos en español -->
  <track 
    src="subtitles-es.vtt" 
    kind="subtitles" 
    srclang="es" 
    label="Español"
    default
  >
  <!-- Subtítulos en inglés -->
  <track 
    src="subtitles-en.vtt" 
    kind="subtitles" 
    srclang="en" 
    label="English"
  >
</video>

Resultado:
El usuario puede seleccionar entre subtítulos en español (predeterminados) o inglés desde el menú del reproductor.

Ejemplo 2: Descripciones para accesibilidad

<video controls>
  <source src="documental.mp4" type="video/mp4">
  <!-- Descripciones en español -->
  <track 
    src="descripcion-es.vtt" 
    kind="descriptions" 
    srclang="es" 
    label="Descripción (ES)"
  >
</video>

Ejemplo 3: Capítulos de un video

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <!-- Capítulos en inglés -->
  <track 
    src="chapters-en.vtt" 
    kind="chapters" 
    srclang="en" 
    label="Chapters"
  >
</video>

4. Valores clave del atributo kind

El atributo kind define el tipo de contenido del archivo vinculado. Debe usarse junto con srclang:

5. Buenas prácticas

1. Usa códigos de idioma válidos:
   Consulta la lista de códigos ISO 639-1 (ej.: fr para francés, de para alemán).

2. Proporciona una etiqueta clara:
   El atributo label muestra un nombre legible para el usuario (ej.: "Español - Latinoamérica").

3. Define un track predeterminado:
   Usa default en el track principal para que se active automáticamente.

4. Formato de archivo:
   Los tracks deben estar en formato WebVTT (.vtt). Ejemplo de contenido:

   vtt

   Copy

   WEBVTT
   
   00:00:02.000 --> 00:00:05.000
   Bienvenido a este tutorial sobre el atributo srclang.

6. Errores comunes

• Código de idioma incorrecto:
  Usar sp en lugar de es para español.

• Olvidar el atributo kind:
  Es obligatorio para que el navegador sepa cómo procesar el track.

• Archivos VTT mal estructurados:
  Asegúrate de que el archivo .vtt siga la sintaxis correcta.

7. Compatibilidad

• Navegadores modernos: Chrome, Firefox, Safari y Edge soportan <track> y srclang.

• Navegadores antiguos: Pueden ignorar los tracks (proporciona subtítulos incrustados como fallback).

8. Conclusión

El atributo srclang es esencial para:

• Multilingüismo: Ofrecer contenido en varios idiomas.

• Accesibilidad: Facilitar el acceso a usuarios con discapacidades auditivas o visuales.

• SEO: Mejorar la indexación del contenido multimedia.

Ejemplo final:

<video controls width="600">
  <source src="pelicula.mp4" type="video/mp4">
  <track 
    src="subs/es.vtt" 
    kind="subtitles" 
    srclang="es" 
    label="Español" 
    default
  >
  <track 
    src="subs/en.vtt" 
    kind="subtitles" 
    srclang="en" 
    label="English"
  >
  <track 
    src="subs/fr.vtt" 
    kind="subtitles" 
    srclang="fr" 
    label="Français"
  >
</video>