Das WordPress Plugin Videojs HTML5 Player ist eine tolle Sache. Man kann insbesondere in Ergänzung mit mit dem Plugin Advanced Custom Fields (ACF) bzw. ACF Pro relativ einfach Videos auf einer mit WordPress erstellten Website einbinden und per CSS so gestalten, wie es eben gewünscht ist. Die so eingebundenen Videos sind HTML-konfrom, lassen sich einfach per CSS gestalten und reagieren responsiv.

Eine kleine Schwierigkeit ist es, Untertitel in die Videos einzublenden. Diese Funktionalitäz ist von dem Plugin Videojs HTML5 Player leider nicht vorgesehen.

Normaler Weise können Untitel als CRT- oder VTT-Datei direkt am Video-Player angebracht werden. Die reguläre Syntax dazu sähe wie folgt aus:

<video id="video" controls preload="metadata">
  <source src="video-short.mp4" type="video/mp4" />
  <track
    label="Deutsch"
    kind="subtitles"
    srclang="de"
    src="subtitles.vtt"
    default />
</video>

Aber über jQuery lässt sich das relativ einfach nachträglich manuell einbauen.

Ich setze hier nun einmal voraus, dass mehrere Videos auf der Seite eingebunden werden sollen. Den Zähler realisieren wir üner eine einfache PHP-Abfrage und speichern die jeweils aktuelle Nummer in der Variablen $number.

Den eigentlichen Untertitel-Text müssen wir als VTT-Datei einbinden. Gegebenenfalls muss man zunächst aus einer SRT-Datei eine VTT-Datei generieren – dafür gibt es aber Tools – zum Beispiel diese hier:
hwww.happyscribe.com/de/untertitel-tools/srt-in-vtt-umwandeln

Um nun die Untertitel in den über das per Plugin „Videojs HTML5 Player“ generierten Player einzubinden, reicht es aus, folgenden Code des jeweiligen Templates einzubauen. Dabei sei angemerkt, dass wir die Klasse des Players über den Zähler modifizieren, um denPlayer eindeutig anzusteuern.

<script>
var video = jQuery('<track />', {
kind: 'captions',
src: '<?PHP echo($untertitel_vtt); ?>',
srclang: 'de',
label: 'Deutsch'
});
video.appendTo(jQuery('.video_<?PHP echo($number); ?> video-js'));

</script>

Ich spreche mit dem Code also das Video-Element an, das sich in dem HTML Element bzw. in dem Container mit der Klasse „video_x“ befinget – dabei wird das „x mit der laufenden Nummer des jeweils gerade aufgerufenen Videos getauscht.