HTML `<track>`-Tag

Das <track>-Tag ist eines der HTML5-Elemente. Es definiert Untertitel, Beschriftungen, Beschreibungen, Kapitel oder Metadaten für ein <audio>- oder <video>-Medienelement.

Das kind-Attribut definiert die Art des Texttracks. Das Element verweist auf eine Quelldatei mit zeitgesteuertem Text, die der Browser anzeigt, wenn der Benutzer zusätzliche Informationen anfordert. Für Untertitel und Beschriftungen muss diese Quelldatei eine WebVTT-Datei (.vtt) sein.

Ein Medienelement kann nicht mehr als einen Track mit demselben label, srclang und kind haben.

Syntax

Das <track>-Tag ist leer, was bedeutet, dass das schließende Tag nicht erforderlich ist. In XHTML muss das <track>-Tag jedoch selbstschließend sein (<track />).

HTML <track>-Tag

html

<audio> or <video>
  ...
  <track src="...">
  ...
</audio> or </video>

Beispiel für das HTML `<track>`-Tag:

HTML <track>-Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="https://de.w3docs.com/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="subtitles" srclang="en" src="https://de.w3docs.com/build/videos/arcnet.io(7-sec).vtt"/>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Try it Yourself »

Attribute

Attribut	Wert	Beschreibung
`default`	`default`	Gibt an, dass der Track aktiviert werden soll, es sei denn, die Einstellungen des Benutzers deuten darauf hin, dass ein anderer Track geeigneter ist. Nur ein Track pro Medienelement kann dieses Attribut haben.
`kind`	`captions<br>chapters<br>descriptions<br>metadata<br>subtitles`	Definiert die Art des Texttracks.
`label`	`text`	Gibt einen für den Benutzer lesbaren Titel des Texttracks an.
`src`	`URL`	Legt den Pfad zur Track-Datei fest.
`srclang`	`language_code`	Legt die Sprache der Track-Textdaten fest (muss definiert sein, wenn `kind` = `"subtitles"`).

Das <track>-Tag unterstützt auch die Globalen Attribute und die Ereignisattribute.

Praxis

Welche Funktionalität hat das HTML <track>-Tag?

Es wird innerhalb eines <audio>-Tags verwendet, um einen Audiotrack anzugeben.Es stellt Texttracks für Medienelemente (<video> und <audio>) bereit.Es wird verwendet, um Untertitel, Beschriftungsdateien oder andere Dateien mit Text anzugeben, die während der Wiedergabe sichtbar sein sollen.Es wird verwendet, um einem HTML-Dokument ein CSS-Stylesheet hinzuzufügen.

HTML <track>-Tag ​

Syntax ​

Beispiel für das HTML <track>-Tag: ​

Attribute ​

Praxis ​

HTML `<track>`-Tag

Syntax

Beispiel für das HTML `<track>`-Tag:

Attribute

Praxis