Zurück in die Stummfilmzeit: Mit einem einfachen Trick kann man tonlose Scrollreportagen in jedem beliebigen CMS oder WordPress-Blog erstellen – ohne aufwendige Tools. Beim stummen Scrollytelling wird wahlweise mit Text oder Video erzählt, aber die stummen Clips mit Untertiteln eingebunden. Diese Einschränkung kann ein großer Vorteil sein – wenn der Leser nämlich im Büro sitzt oder von unterwegs ohne Kopfhörer auf die Geschichte zugreift.
Hier ein Beispiel für ein stummes Videoelement mit Untertitel.
Da Film und Untertitel mit HTML5 eingebunden sind, kann man das Beispiel mit Javascript interaktiv erweitern. Als Proof of Concept habe ich hier einen Javascript-Button angefügt, der den Ton für einen Clip aktiviert und die Untertitel ausschaltet.
Tonlose Scroller mit WordPress – so geht’s:
Für jedes Video braucht man eine Untertitel-Datei im Format .vtt. Die erstellt man am besten online mit dem komfortablen Untertitel-Tool von Youtube – auch wenn man die Datei später woanders hostet. Dazu den Clip bei Youtube hochladen, evtl. auch als privates Video. Dann:
- Rechts unter dem Player des hochgeladenen Videos den Video-Manager starten.
- Bearbeiten/Untertitel
- Sprache wählen, dann Neue Untertitel hinzufügen.
- Jetzt kann man die Untertitel in ein Textfeld eingeben. Praktisch: Das Video stoppt automatisch, solange man tippt.
- Dann auf Timing festlegen: Youtube versucht nun, die Untertitel zeitlich mit dem gesprochenen Wort zu synchronisieren.
- In einem weiteren Schritt kann man diese Zuordnung manuell verbessern:
Die Untertitel-Blöcke können anschließend im Youtube-Editor noch komfortabel verschoben werden.
- Anschließend auf Aktionen/Herunterladen/.vtt
Nachdem man Video und Untertitel bei WordPress oder seinem Server hochgeladen hat, kann beides mit diesem Code-Snippet eingebunden werden. Dazu bei WordPress in die Text-Ansicht wechseln und diesen Code einfügen und anpassen:
<video autoplay loop muted>
<source src="video.mp4" type="video/mp4" />
<track label="Deutsch" kind="subtitles" srclang="de" src="untertitel.vtt" default="" />
</video>
Kurze Beispielreportage
Es gibt auch wieder die bekannte Beispielreportage, mit der bereits im großen Scrollytelling-Tool-Test alle großen Tools wie Pageflow getestet wurden. Diesmal aber ohne großen Aufwand mit einer Standard-Wordpress-Installation: Die Freilufttänzer – tonlos. Für den redaktionellen Einsatz sollte man sich noch um ein responsives Layout und geräteabhängige Filmgrößen kümmern. Außerdem sollte man sich ab 4-5 eingebetteten und in Schleife laufenden Videos Gedanken über die Performance auf dem Rechner des Rezipienten machen. Abhilfe könnte ein dynamisches Ladescript schaffen, das Elemente in Abhängigkeit der Scrollposition aktiviert oder mit Ajax nachlädt. Eine mögliche Lösung ist das jQuery-Plugin LaziestLoader.
Noch wichtiger ist aber das Zusammenspiel der möglichst kurzen Clips mit dem Fließtext. Wie man mit Scrollytelling spannende Geschichte erzählt – ob mit oder ohne Ton – lernt man in meinen zwei-dreitägigen Kursen an verschiedenen Journalistenschulen. Zum Beispiel Mitte Mai in Luzern.
