CSS, HTML & Javascript mit {stil}

HTML Video mit Untertitel – Video-Tracks

Das track-Element innerhalb eines video- oder audio-Tags ist für Titel, Untertitel, Übersetzungen und andere Texte gedacht, die beim Abspielen des Videos oder der Audio-Datei angezeigt werden. Textspuren verbessern die Zugänglichkeit von Medieninhalten insbesondere für gehörlose oder schwerhörige Nutzer. Sie tragen zur Suchmaschinenindizierung (SEO) bei, da der Text analysierbar ist.

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

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.

<video class="simple1" controls>
	<source src="atlantis.mp4" 
			type="video/mp4">
	<track src="atlantis.vtt" label="Untertitel" 
			 kind="subtitles" srclang="de" default>
</video>
Untertitel verfügbar ⋮ oder »

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 erstellen mit Amberscript. Caption Maker erstellt auch

Keine Untertitel sichtbar?

Nutzer wissen oft nicht, dass Untertitel verfügbar sind, denn die Standardeinstellung der Browser zeigt die Untertitel-Option meist sehr unauffällig:

  • In Chrome etwa versteckt sich die Track-Auswahl hinter einem kleinen Menüpunkt oder Symbol: ⋮.
  • In Safari werden Untertitel oft nur angezeigt, wenn sie aktiviert sind (z. B. in macOS-Systemeinstellungen für Barrierefreiheit). Das Symbol ganz rechts unten: »
  • Auf mobilen Geräten ist der Untertitel-Button manchmal gar nicht sichtbar, je nach eingebettetem Player.

Am besten gibt man dem Benutzer einen gut sichtbaren Hinweis: Video mit Untertiteln und Tipps, wie sie Untertitel aktivieren können.

CSS für Video-Tracks

Die Möglichkeiten einer individuelle Darstellung der Untertitel des Videos per CSS sind beschränkt. Das ::cue-Element erlaubt color, background, font-size, sogar text-shadow, aber keinen Zugriff auf die Position, auf margin und padding.

::cue {
    color: gold;         /* Gelbe Schrift */
    font-size: 0.9rem;   /* Kleinere Schrift */
    text-shadow: 2px 2px 4px black; /* Text-Schatten für bessere Lesbarkeit */
}

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?

Suchen auf mediaevent.de