Closed Captions für barrierefreie Videos

[cch]

Hallo liebe Community,

ich versuche vergeblich über die Einbindung von .vtt-Dateien Videos Untertitel zu verschaffen. Die .vtt-Dateien sind korrrekt eingebunden, die Videos laufen, aber es werden keine Untertitel ausgegeben. Aus irgendwelchen Gründen, wird die .vtt-Datei nicht im Quellcode ausgegeben - ein track-Tag fehlt auch bislang. Ich habe keine eigenen Templates in Verwendung, also alles auf dem vorgegebenen Standard.

Übersehe ich irgendeinen Schritt, damit die Untertitel angeboten werden? Hat jemand Ideen?

Mit herzlichen Grüßen
Christian

[Spooky]

Hast du auch entsprechende Metadaten in der Dateiverwaltung für die jeweilige VTT Datei gesetzt?

[zoglo]

Hast du auch entsprechende Metadaten in der Dateiverwaltung für die jeweilige VTT Datei gesetzt?

^Dies und...

Titel und Sprache sind hier notwendig (auch der Type), dann werden diese auch ausgegeben

[cch]

Super! Tausend Dank! Es fehlte der Titel der .vtt-Datei in den Metadaten.
Es kann so einfach sein.

BTW: Es ist toll, dass es die neuen Features zur Bearrierefreiheit im aktuellen Contao gibt. Danke an alle Entwickler/Beteiligten!

[cch]

Ich hätte nun noch eine Anschlussfrage: Wie lässt sich denn ein einfacher Alternativtext einem Video zuordnen? Geht das auch über eine .vtt-Datei vom Typ "Metadaten"? Aber ist die .vtt-Datei dann aufgebaut? Ich finde leider dazu keine Angaben im Netz. Vielleicht hat jemand einen guten Link-Tipp?

Grüße
Christian

[Spooky]

Möchtest du einfach das Video betiteln via Metadaten - oder einen Text anzeigen lassen, wenn keines der zur Verfügung gestellten Video Formate unterstützt wird?

[cch]

Ja, betiteln bzw. mit einem Alternativtext im Sinne der Barrierefreiheit versehen, also für Menschen mit Seheinschränkungen, die dann zumindest den Alt-Text vorgelesen bekommen.

Im Sinne von WCAG 1.2.1:
Stumme Videos brauchen eine Alternative, die sinngemäß denselben Inhalt wiedergibt, sodass keine visuellen Informationen verloren gehen. Es kann auch nur ein Alt-Text als Video-Titel sein.

[Spooky]

<video> Elemente haben kein "alt". In Contao kannst du von Haus aus aber bspw. einen "Untertitel" für das Video-Element eingeben.

[cch]

o.k., gut, danke! Ich hoffe das genügt den WCAG Vorgaben.

[zoglo]

o.k., gut, danke! Ich hoffe das genügt den WCAG Vorgaben.

Barrierefreiheit ist ja nicht nur eine Checkliste , aber ich gehe stark davon aus, dass du EN 301 549 erfüllen musst.

[dievirtuellecouch]

Hallo zusammen,

ich habe hier genau dasselbe Problem und auch die Sprache und die Art (Untertitel) ausgewählt, wie Inhalte für Titel und Untertitel bereitgestellt.
Video und VTT heißen vom Namen gleich, sind im selben Verzeichnis, es gibt kein überschreibendes Template und doch wird kein track im Quelltext angezeigt.

Mache ich noch irgendetwas falsch? Version ist 5.6.3

Ganz vielen Dank,
Lars

[Spooky]

Version ist 5.6.3

Die aktuellste Version wäre 5.6.10.

[dievirtuellecouch]

Hallo Spooky,

ja das stimmt. Nach Update auf die 5.6.10 bleibt aber das Problem bei Chrome, Safari und Firefox bestehen.

Bildschirmfoto 2026-01-20 um 07.02.50.png

Kann ich irgendwie testen, woran das liegt? Möglicherweise stört es sich an den zoglo/contao-legacy-templates?
Ich hatte auch kurz versucht zoglo/contao-accessibility zu installieren, das läuft wohl aber nicht mit den legacy-templates zusammen.

Meine Composer.json:

{
  "type": "project",
  "require": {
    "bluebranch/bilder-alt": "^1.5",
    "bugbuster/contao-visitors-bundle": "^1.16",
    "codefog/contao-news_categories": "^4",
    "contao/comments-bundle": "^5.6",
    "contao/conflicts": "*@dev",
    "contao/listing-bundle": "^5.6",
    "contao/manager-bundle": "^5.6",
    "contao/news-bundle": "^5.6",
    "dklemmt/contao_dk_mmenu": "^4.0",
    "dvc/contao-async-pagination": "2.1.1",
    "heimrichhannot/contao-slick-bundle": "^1.8",
    "madeyourday/contao-rocksolid-antispam": "^2.1",
    "madeyourday/contao-rocksolid-custom-elements": "^2.4",
    "numero2/contao-proper-filenames": "^2.2",
    "oveleon/contao-cookiebar": "^2.3",
    "plenta/contao-jobs-basic-bundle": "^3.1",
    "terminal42/contao-changelanguage": "^3.5",
    "terminal42/notification_center": "^2.0",
    "zoglo/contao-legacy-templates": "^1.0"
  },
  "extra": {
    "public-dir": "public",
    "contao-component-dir": "assets"
  },
  "scripts": {
    "post-install-cmd": [
      "@php vendor/bin/contao-setup"
    ],
    "post-update-cmd": [
      "@php vendor/bin/contao-setup"
    ]
  },
  "config": {
    "allow-plugins": {
      "contao-components/installer": true,
      "php-http/discovery": true,
      "contao/manager-plugin": true
    }
  },
  "repositories": [
    {
      "type": "vcs",
      "url": "https://github.com/dievirtuellecouch/contao-async-pagination.git"
    }
  ]
}

Achso und vorher wurde statt des Standardplayers eine RSCE Videoplayer Variante genutzt, die Desktop und Mobil Videos pflegebar machten, aber da gab es keine VTT Lösung, deshalb hatte ich auf Contao 5.6 upgedatet.

Ganz vielen Dank

[Spooky]

Du hast zoglo/contao-legacy-templates installiert, dadurch verwendest du die alten Inhaltselemente, statt den neuen.

[dievirtuellecouch]

Wow, bist du quasi immer wach? :-D

Okay, also irgendeinen Tod muss ich wohl sterben. Mit den contao-legacy-templates hatte ich eine schnelle Lösung erhofft, aber muss nun doch alles an CSS umschreiben, wie? ^^

[Spooky]

Nein, du kannst statt der Extension auch einfach gezielt auf alte Inhaltselemente zurück schalten (zB alle außer dem Video Element).

[dievirtuellecouch]

Ah okay, das wäre perfekt, gibt es da irgendwo eine Anleitung zu?

[Spooky]

https://github.com/contao/contao/blo...ntent-elements

[zoglo]

Die Extension sollte man sich nur installieren, wenn man die config.php nicht selber anpassen will, sich Kosten bei einem Update sparen möchte und.... wenn du keine neuen Features brauchst. Sie dient lediglich als Brücke um Twig zu lernen während man auf Contao 5 ist, damit man sich darum kümmern kann. Ich selber nutze sie nicht, warum auch

[dievirtuellecouch]

Nochmal vielen lieben Dank für die Unterstützung! Genau daran lag es und jetzt befasse ich mich endlich mit Twig (guter Jahresvorsatz, oder?) ;-)

Viele Grüße,
Lars