HTML Video mit Untertitel – Video-Tracks

Video Tracks: Untertitle, Übersetzungen, Erklärungen mit vtt

Das track-Element innerhalb eines video- oder auto-Tags ist für Titel, Untertitel, Übersetzungen und andere Texte gedacht, die beim Abspielen des Videos oder der Audio-Datei angezeigt werden. Die Texte für die Untertitel kommen aus einer einfachen Textdatei mit genauen Zeitangaben, an welcher Stelle des Videos Textzeilen eingeblendet werden. track eröffnet z.B. eine Mitschrift von Tutorial-Videos, von Vorlesungen und Schulungen, Lesungen für Gehörlose und Übersetzungen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Video mit Untertiteln: Tracks

Das track-Element innerhalb des öffnenden und schließenden Video-Tags stellt Untertitel und Beschreibungen (z.B. für Screen Reader) zur Verfügung.

<track src="atlantis.vtt" label="Untertitel" 
       kind="subtitles" srclang="de" default>

atlantis.vtt ist eine Textdatei nach dem Muster

WEBVTT

00:02.000 --> 00:03.000
Es war eine finstre und eiskalte Nacht

00:05.000 --> 00:07.000
da tauchten die ersten Türme wieder auf

00:09.000 --> 00:11.000
erst zaghaft

00:11.000 --> 00:13.000
aber mit den Lichtern der Türme schneller und schneller

00:16.000 --> 00:19.000
und beim Morgengrauen

00:22.000 --> 00:25.000
erstrahlten die Türme im neuen Licht

Das Format der Zeitangaben ist "HH:MM:SS.sss".

--> ist das Zeichen für von / bis und muss in Leerzeichen vorher und nachher gesetzt werden.

countdown.vtt online erstellt mit Caption Maker. Caption Maker erstellt auch

srclang – mehrsprachige Tracks

<track src="atlantis.vtt"    label="Deutsch" kind="subtitles" srclang="de" default>
<track src="atlantis_en.vtt" label="English" kind="subtitles" srclang="en">

Track-Attribute

default
Definiert den Track als vorgegeben, falls die Einstellungen des Benutzers keinen anderen Track vorziehen.
kind (Art der Texteinblendung)
captions
chapters
descriptions
metadata
subtitles
label (Text)
Titel des Text-Tracks
src (URL)
Erforderlich: die URL zur Track-Datei
srclang (language_code)
Sprache der Text-Datei. Erforderlich bei kind="subtitles"

Playback von Ausschnitten

Mit einer #-Erweiterung hinter der URL des Videos spielt der Browser einen Ausschnitt des Videos ab. #t=4,8 löst ein Playback des Videos ab Sekunde 4 bis Sekunde 8 aus.

<video controls>
<source src="atlantis.mp4#t=00:00:20,00:00:30" 
        type="video/mp4" />
<track src="video/atlantis.vtt" label="Untertitel" 
        kind="subtitles" srclang="de" default>
</video>

src="atlantis.mp4#t=00:00:20,00:00:30" spielt das Video von Sekunde 20 bis zur Sekunde 30 ab. #t=00:5:00 würde das Video ab Minute 5 spielen, #t=,00:05:00 vom Anfang bis Minute 5.

Playback von Videos mit einem Timecode funktioniert auch bei Videos bei Vimeo.

Wie so oft sind Internet Explorer und Microsoft Edge die einzigen unter den moderenen Browsern, denen der Sprung zur Zeitmarke nicht gelingt. Zuverlässig ist der Sprung zu einer Zeitmarke weiterhin nur mit Javascript.

<script>
document.querySelector('.myvideo').addEventListener('loadedmetadata', function() {
  this.currentTime = 10;
}, false);
</script>

Wichtig ist das Event loadedmetadata, denn erst wenn dieses Event auslöst, hat der Browser die Informationen zur Gesamtdauer des Videos.

Quelle Start HTML video at a particular position when loading?