Video mit Untertiteln: Tracks
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.
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?
