Elementos <source> e <track>

8.1 Elemento <source>

Os elementos <source> e <track> têm um papel importante no HTML5, proporcionando suporte a diferentes formatos de multimídia e melhorando a acessibilidade do conteúdo. Vamos dar uma olhada mais de perto.

O elemento <source> é usado dentro dos elementos <audio>, <video>, e <picture> para especificar diferentes fontes de conteúdo multimídia. Isso permite que os navegadores escolham o formato mais adequado para reprodução, garantindo compatibilidade entre navegadores e suporte para diferentes dispositivos.

Sintaxe

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

Atributos

• src: especifica o caminho para o arquivo multimídia
• type: especifica o tipo de arquivo e seu tipo MIME. Isso ajuda o navegador a determinar se ele suporta o formato

Exemplos de uso:

Exemplo 1: Dentro do elemento <video>

Neste exemplo, o navegador tentará reproduzir o primeiro formato suportado.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogv" type="video/ogg">
        Seu navegador não suporta reprodução de vídeo.
      </video>
    
  

Exemplo 2: Dentro do elemento <audio>

    
      <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        Seu navegador não suporta reprodução de áudio.
      </audio>
    
  

Exemplo 3: Dentro do 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="Exemplo de imagem">
      <picture>
    
  

Vantagens de usar <source>

• Compatibilidade entre navegadores: permite especificar vários formatos, o que garante reprodução em diferentes navegadores
• Otimização para dispositivos: possibilidade de especificar diferentes arquivos para diferentes dispositivos e condições

8.2 Elemento <track>

O elemento <track> é usado para adicionar faixas de texto ao conteúdo multimídia, como legendas, legendas para surdos ou com dificuldade auditiva, descrições, capítulos e metadados. Ele é colocado dentro dos elementos <audio> ou <video>.

Sintaxe

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

Atributos

1. src: especifica o caminho para o arquivo da faixa de texto.
2. kind: define o tipo de faixa de texto. Os valores possíveis são:
   • subtitles: legendas para tradução de diálogos
   • captions: legendas para surdos ou com dificuldade auditiva, incluindo descrições de sons
   • descriptions: descrições em áudio para pessoas com deficiência visual
   • chapters: capítulos para navegação no conteúdo multimídia
   • metadata: metadados que podem ser usados com JavaScript
3. srclang: define o idioma da faixa de texto (por exemplo, en para inglês, es para espanhol).
4. label: nome descritivo da faixa de texto, que aparece no menu de seleção de faixas.
5. default: indica que esta faixa deve ser ativada por padrão

Exemplos de uso:

Exemplo 1: Legendas para vídeo

Neste exemplo, o vídeo tem duas faixas de legendas: em inglês e espanhol. O usuário pode escolher a faixa desejada no menu.

    
      <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">
        Seu navegador não suporta reprodução de vídeo.
      </video>
    
  

Exemplo 2: Legendas para surdos ou com dificuldade auditiva

Esta configuração adiciona uma faixa de legendas para surdos ou com dificuldade auditiva em inglês.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="captions" srclang="en" label="subtitles">
        Seu navegador não suporta reprodução de vídeo.
      </video>
    
  

Vantagens de usar <track>

• Melhoria da acessibilidade: legendas e descrições tornam o conteúdo acessível para usuários surdos, com dificuldade auditiva ou visual
• Suporte a multilíngues: possibilidade de adicionar legendas em diferentes idiomas
• Informações adicionais: capítulos e metadados permitem organizar e estruturar o conteúdo multimídia

8.3 Formato de arquivos para faixas de texto

As faixas de texto geralmente são salvas no formato WebVTT (Web Video Text Tracks). Este formato é suportado pela maioria dos navegadores modernos e é facilmente legível tanto por máquinas quanto por pessoas.

Exemplo de arquivo 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.
    
  

Exemplos de uso abrangente dos elementos <source> e <track>

    
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Vídeo com múltiplas fontes e faixas de texto</title>
        </head>
        <body>
          <h1>Exemplo de vídeo com múltiplas fontes e faixas 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">
            Your browser does not support the video element.
          </video>
        </body>
      </html>