Drupal

Barrierefreiheit: Mehrsprachige Videos mit Untertitel und Description

Geposted am 1. August 2024
Schlagworte:

Videos mit Untertiteln und einer Description zu versehen ist eine gute Idee, um die Barrierefreiheit einer Seite zu verbessern. Möchte man das Video selber hosten, anstatt es von youtube oder einer anderen Plattform einzubinden, braucht es nicht viel. Ein Paragraph Type mit je einem Datei-Upload für Untertitel (SRT-Datei) und Description, ein Entity Reference Field für das lokal hochgeladene Video und ggf. noch ein Feld für das Vorschau-Bild. Bei nur einer Sprache war es das schon. Wenn man aber eine mehrsprachige Webseite hat und das Video in verschiedenen Übersetzungen vorliegt, wird es etwas kniffliger.

Das Problem ist, via twig an das aktuelle Sprachlabel heranzukommen, um die übersetzten Textdateien einzubinden.

Da wir die aktuelle Spracheinstellung der Seite benötigen, funktioniert die vorhandene Variable "langcode" nicht. Die gibt immer die Defaultsprache (hier "de") aus. Wir bräuchten also die Variable "language_used". Dazu bauen wir in der der mytheme.theme eine Preprocess-Funktion für Paragraphs ein:

function mytheme_preprocess_paragraph (&$variables) {
   $variables['language_used'] = \Drupal::languageManager()->getCurrentLanguage()->getId();
}

Jetzt können wir in unserer paragraph-video-selfhosted.html.twig folgendes einbauen (das ist nicht die vollständige twig-Datei, sondern nur der Teil, der das Video ausgibt):

{# Vorschaubild und Kontrollelemente ausgeben falls vorhanden #}
<video controls poster=
 {% if paragraph.field_vorschaubild_media %}
   {{  file_url(paragraph.field_vorschaubild_media.entity.field_media_image.entity.fileuri) }}
 {% endif %}
>
{# Video ausgeben falls vorhanden#}
{% if paragraph.field_video_upload %}
 <source src="{{ file_url(paragraph.field_video_upload.entity.field_media_video_file.entity.uri.value) }}" {{ paragraph.field_video_upload.entity.field_media_video_file.entity.filemime.value }}>
{% endif %}
{# Untertitel bereitstellen falls vorhanden#}
{% if paragraph.field_untertitel %}
 <track src="{{ file_url(paragraph.field_untertitel.entity.uri.value) }}" kind="subtitles" srclang="{{ language_used }}" label="
 {% if language_used == 'de' %}
   Deutsch
 {% else %}
   English
 {% endif %}
 ">
{% endif %}
{# Description bereitstellen falls vorhanden#}
{% if paragraph.field_beschreibungstext %}
 <track src="{{ file_url(paragraph.field_beschreibungstext.entity.uri.value) }}" kind="description" srclang="{{ language_used }}" label="
 {% if language_used == 'de' %}
   Deutsch
 {% else %}
   English
 {% endif %}
 ">
{% endif %}
</video>

Sollte die Seite in weiteren Sprachen verfügbar sein, muss man einfach das If-Else-Konstrukt entsprechend erweitern. Damit erscheint für jede Sprache ein Eintrag in dem Video-Kontrollelement für die Untertitel.

Blogthemen