Elemente <source> und <track>

8.1 Element <source>

Die Elemente <source> und <track> spielen eine wichtige Rolle in HTML5, indem sie Unterstützung für verschiedene Multimediaformate bieten und die Zugänglichkeit von Inhalten verbessern. Schauen wir sie uns genauer an.

Das Element <source> wird innerhalb der Elemente <audio>, <video> und <picture> verwendet, um verschiedene Quellen von Multimedia-Inhalten anzugeben. Dies ermöglicht es den Browsern, das am besten geeignete Format für die Wiedergabe auszuwählen und stellt Kompatibilität über verschiedene Browser und Unterstützung auf unterschiedlichen Geräten sicher.

Syntax

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

Attribute

• src: gibt den Pfad zur Multimedia-Datei an
• type: spezifiziert den Dateityp und seinen MIME-Typ. Dies hilft dem Browser zu bestimmen, ob er das Format unterstützt.

Verwendungsbeispiele:

Beispiel 1: Innerhalb des <video>-Elements

In diesem Beispiel versucht der Browser das erste unterstützte Format abzuspielen.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogv" type="video/ogg">
        Dein Browser unterstützt das Abspielen von Videos nicht.
      </video>
    
  

Beispiel 2: Innerhalb des <audio>-Elements

    
      <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        Dein Browser unterstützt das Abspielen von Audiodateien nicht.
      </audio>
    
  

Beispiel 3: Innerhalb des <picture>-Elements

    
      <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="Beispielbild">
      <picture>
    
  

Vorteile der Verwendung von <source>

• Kompabilität mit verschiedenen Browsern: ermöglicht die Angabe mehrerer Formate, was die Wiedergabe in verschiedenen Browsern sicherstellt
• Optimierung für Geräte: Möglichkeit, verschiedene Dateien für verschiedene Geräte und Bedingungen anzugeben

8.2 Element <track>

Das Element <track> wird verwendet, um Textspuren zu Multimedia-Inhalten hinzuzufügen, wie Untertitel, Untertitel für Gehörlose oder Schwerhörige, Beschreibungen, Kapitel und Metadaten. Es wird innerhalb der Elemente <audio> oder <video> platziert.

Syntax

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

Attribute

1. src: gibt den Pfad zur Textspurdatei an.
2. kind: definiert den Typ der Textspur. Mögliche Werte:
   • subtitles: Untertitel zur Übersetzung von Dialogen
   • captions: Untertitel für Gehörlose oder Schwerhörige, einschließlich Beschreibungen von Geräuschen
   • descriptions: Audiobeschreibungen für Sehbehinderte
   • chapters: Kapitel für die Navigation im Multimediainhalt
   • metadata: Metadaten, die mit JavaScript verwendet werden können
3. srclang: legt die Sprache der Textspur fest (z.B. en für Englisch, es für Spanisch).
4. label: beschreibender Name der Textspur, der im Spurauswahlmenü angezeigt wird.
5. default: gibt an, dass diese Spur standardmäßig aktiviert sein sollte

Verwendungsbeispiele:

Beispiel 1: Untertitel für Video

In diesem Beispiel hat das Video zwei Untertitelspuren: auf Englisch und Spanisch. Der Benutzer kann die gewünschte Spur aus dem Menü auswählen.

    
      <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">
        Dein Browser unterstützt das Abspielen von Videos nicht.
      </video>
    
  

Beispiel 2: Untertitel für Gehörlose oder Schwerhörige

Diese Konfiguration fügt eine Untertitelspur für Gehörlose oder Schwerhörige in englischer Sprache hinzu.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="captions" srclang="en" label="subtitles">
        Dein Browser unterstützt das Abspielen von Videos nicht.
      </video>
    
  

Vorteile der Verwendung von <track>

• Verbesserte Zugänglichkeit: Untertitel und Beschreibungen machen Inhalte zugänglich für Gehörlose, Schwerhörige und Sehbehinderte
• Unterstützung für Mehrsprachigkeit: Möglichkeit, Untertitel in verschiedenen Sprachen hinzuzufügen
• Zusätzliche Informationen: Kapitel und Metadaten ermöglichen die Organisation und Strukturierung von Inhalten

8.3 Dateiformat für Textspuren

Textspuren werden normalerweise im WebVTT (Web Video Text Tracks) Format gespeichert. Dieses Format wird von den meisten modernen Browsern unterstützt und ist sowohl für Maschinen als auch für Menschen leicht lesbar.

Beispiel einer WebVTT-Datei (subtitles_en.vtt)

    
      WEBVTT
      1
      00:00:00.000 --> 00:00:05.000
      Willkommen zu unserer Videopräsentation.

      2
      00:00:05.000 --> 00:00:10.000
      Wir hoffen, dass Sie diese informativ und unterhaltsam finden.
    
  

Beispiele für die umfassende Verwendung der Elemente <source> und <track>

    
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Video mit mehreren Quellen und Textspuren</title>
        </head>
        <body>
          <h1>Beispielvideo mit mehreren Quellen und Textspuren</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>