Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/de/docs/Web/HTML/Reference/Elements/track below:

<track>: Das eingebettete Text-Track-Element - HTML

Baseline Widely available

Das <track> HTML-Element wird als Kind der Medien-Elemente <audio> und <video> verwendet. Jedes Track-Element ermöglicht es Ihnen, einen zeitlich abgestimmten Text-Track (oder zeitbasierte Daten) anzugeben, der parallel zum Medien-Element angezeigt werden kann, beispielsweise um Untertitel oder geschlossene Untertitel über ein Video oder zusammen mit Audio-Tracks anzuzeigen.

Mehrere Tracks können für ein Medien-Element angegeben werden, die unterschiedliche Arten von zeitlich abgestimmten Text-Daten enthalten oder zeitlich abgestimmte Text-Daten, die für verschiedene Regionen übersetzt wurden. Die verwendeten Daten stammen entweder von dem Track, der als Standard festgelegt wurde, oder von einer Art und Übersetzung basierend auf den Benutzerpräferenzen.

Die Tracks sind im WebVTT-Format (.vtt-Dateien) formatiert — Web Video Text Tracks.

<video controls src="/shared-assets/videos/friday.mp4">
  <track
    default
    kind="captions"
    srclang="en"
    src="/shared-assets/misc/friday.vtt" />
  Download the
  <a href="/shared-assets/videos/friday.mp4">MP4</a>
  video, and
  <a href="/shared-assets/misc/friday.vtt">subtitles</a>.
</video>

video {
  width: 250px;
}

video::cue {
  font-size: 1rem;
}

Dieses Element enthält die globalen Attribute.

default

Dieses Attribut gibt an, dass der Track aktiviert werden sollte, es sei denn, die Benutzerpräferenzen geben an, dass ein anderer Track besser geeignet ist. Dies darf nur auf einem track-Element pro Medien-Element verwendet werden.

kind

Wie der Text-Track verwendet werden soll. Wenn weggelassen, ist der Standardtyp subtitles. Wenn das Attribut einen ungültigen Wert enthält, wird metadata verwendet. Die folgenden Schlüsselwörter sind erlaubt:

• subtitles

  • Untertitel bieten eine Übersetzung von Inhalten, die der Zuschauer nicht versteht. Zum Beispiel Sprache oder Text, der in einem englischsprachigen Film nicht Englisch ist.
  • Untertitel können zusätzliche Inhalte enthalten, in der Regel zusätzliche Hintergrundinformationen. Zum Beispiel der Text am Anfang der Star Wars-Filme oder das Datum, die Uhrzeit und der Ort einer Szene.

• captions

  • Geschlossene Untertitel bieten eine Transkription und möglicherweise eine Übersetzung von Audio.
  • Es kann wichtige nonverbale Informationen wie Musikhinweise oder Soundeffekte enthalten. Es kann die Quelle des Hinweises angeben (z. B. Musik, Text, Charakter).
  • Geeignet für Benutzer, die taub sind oder wenn der Ton stummgeschaltet ist.

• chapters

  • Kapiteltitel sind gedacht, um verwendet zu werden, wenn der Benutzer die Medienressource navigiert.

• metadata

  • Tracks, die von Skripten verwendet werden. Nicht sichtbar für den Benutzer.

label

Ein benutzerlesbarer Titel des Text-Tracks, der vom Browser verwendet wird, wenn verfügbare Text-Tracks aufgelistet werden.

src

Adresse des Tracks (.vtt-Datei). Muss eine gültige URL sein. Dieses Attribut muss angegeben werden und sein URL-Wert muss den gleichen Ursprung wie das Dokument haben — es sei denn, das <audio> oder <video>-Elternteil des track-Elements hat ein crossorigin-Attribut.

srclang

Sprache der Track-Text-Daten. Es muss ein gültiger BCP 47-Sprach-Tag sein. Wenn das kind-Attribut auf subtitles gesetzt ist, muss srclang definiert sein.

Der Typ der Daten, die track zum Medium hinzufügt, wird im kind-Attribut festgelegt, das die Werte subtitles, captions, chapters oder metadata annehmen kann. Das Element verweist auf eine Quelldatei, die zeitlich abgestimmten Text enthält, den der Browser beim Anfordern zusätzlicher Daten durch den Benutzer bereitstellt.

Ein Medien-Element kann nicht mehr als einen track mit demselben kind, srclang und label haben.

Der zugrundeliegende TextTrack, angezeigt durch die track-Eigenschaft, erhält jedes Mal ein cuechange-Ereignis, wenn sich der aktuell dargestellte Cue ändert. Dies geschieht auch dann, wenn der Track keinem Medien-Element zugeordnet ist.

Wenn der Track mit einem Medien-Element assoziiert ist, wobei das <track>-Element als Kind des <audio> oder <video>-Elements verwendet wird, wird das cuechange-Ereignis auch an das HTMLTrackElement gesendet.

let textTrackElem = document.getElementById("text-track");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});

Das JavaScript-Interface, das das <track>-Element darstellt, ist HTMLTrackElement. Der mit einem Element verbundene Text-Track kann aus der HTMLTrackElement.track-Eigenschaft abgerufen werden und ist vom Typ TextTrack.

TextTrack-Objekte können auch zu HTMLVideoElement oder HTMLAudioElement-Elementen hinzugefügt werden, indem die HTMLMediaElement.addTextTrack()-Methode verwendet wird. Die mit einem Medien-Element verbundenen TextTrack-Objekte werden in einer TextTrackList gespeichert, die mit der HTMLMediaElement.textTracks-Eigenschaft abgerufen werden kann.

<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de" />
  <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja" />
  <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz" />
  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
  <!-- Fallback -->
  …
</video>

Ein Medien-Element, <audio> oder <video>.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4