• Über mich
  • Kurse
  • Kontakt / Impressum / Datenschutz
  • Unterstützen / Donations
Rufposten
  • Über mich
  • Kurse
  • Kontakt / Impressum / Datenschutz
  • Unterstützen / Donations
29 Februar 2016
Scrollytelling

Tutorial für stumme Scrollreportagen

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:

  1. Rechts unter dem Player des hochgeladenen Videos den Video-Manager starten.
  2. Bearbeiten/Untertitel
  3. Sprache wählen, dann Neue Untertitel hinzufügen.
  4. Jetzt kann man die Untertitel in ein Textfeld eingeben. Praktisch: Das Video stoppt automatisch, solange man tippt.
  5. Dann auf Timing festlegen: Youtube versucht nun, die Untertitel zeitlich mit dem gesprochenen Wort zu synchronisieren.
  6. In einem weiteren Schritt kann man diese Zuordnung manuell verbessern:

    youtube_untertitel

    Die Untertitel-Blöcke können anschließend im Youtube-Editor noch komfortabel verschoben werden.

  7. 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.

 

Related Posts

  • Storyform und Racontr im Test

    Storyform und Racontr im Test

  • Der große Scrollytelling-Tool-Test

  • Minimal Scrollytelling

Leave a Reply

Antworten abbrechen

Text. Bild. Ton. Daten.

Diese Seite berichtet seit 2004 über multimedialen Journalismus und Datenschutz. Und stellt eigene Entwicklungen in diesem Bereich vor.

Rufposten wird betrieben von Matthias Eberl.

Vorheriges Weblog (2004-2014)

RSS Rufposten Toots (via Mastodon)

  • rufposten: “Die Aussage vom @lfdi@xn--baw-…” 17. April 2021
    Die Aussage vom @lfdi, warum die #Lucaapp angeschafft wird, verdient Beachtung:"Die Landesregierung hat letzendlich eine politische Prognoseentscheidung getroffen, dass wir die Pandemiekrise nicht dadurch beseitigen werden, dass wir auf Freiwilligkeit setzen: dass jeder der von seinem Infektionsriskio weiß, sich vernünftig verhalten wird. Die Landesregierung sagt: Das reicht uns nicht, wie brauchen die Durchgriffsmöglichkeit der Gesundheitsämter." […]
  • rufposten: “#flocdown” 17. April 2021
    #flocdown
  • rufposten: “Nobody is flying to join Googl…” 17. April 2021
    Nobody is flying to join Google’s FLoChttps://www.theverge.com/2021/4/16/22387492/google-floc-ad-tech-privacy-browsers-brave-vivaldi-edge-mozilla-chrome-safari
  • rufposten: “Meine Ideen: …” 15. April 2021
    Meine Ideen: - ehrenamtliche Moderationsteams getrennt vom Admin- Professionalisierung und bezahlte Server wie bei @digitalcourage - unabhängige Vermittlungsstelle für Server-Konflikte
  • rufposten: “Der Mastodonten-Admin @scroom@…” 15. April 2021
    Der Mastodonten-Admin @scroom gibt aus Zeitmangel seinen Server auf und vielleicht lag es auch ein bisschen an dem Stress, der durch einen transfeindlichen Account auf seinem Server und dem daraus hervorgehenden Konflikt mit chaos.social ausgelöst wurde. Wenn das nicht schon aus dem Handbuch für gesellschaftliche Sabotage kam, dann wird der Fall spätestens jetzt darin eingehen. […]
  • rufposten: “Wegen der großen Nachfrage nun…” 14. April 2021
    Wegen der großen Nachfrage nun auch als dauerhafter Blogbeitrag:https://rufposten.de/blog/2021/04/14/phase-6-wie-deutschlands-beliebtester-vokabeltrainer-kinder-getrackt-und-eltern-betrogen-hat/(cc @peter)
  • rufposten: “Happy End für die Kinder - abe…” 11. April 2021
    Happy End für die Kinder - aber der Fall zeigt eine katastrophale Mischung, die bleibt: Hilflose Schulbehörden, untätige Datenschutzbehörden, Naivität im Umgang mit privatwirtschaftlichen Akteuren im Bildungsbereich und skrupellose Softwareanbieter. Ich hoffe, das war eine interessante Recherche - damit ich weiterhin unabhängig arbeiten/veröffentlichen kann, freue ich mich über Spenden. https://rufposten.de/blog/spenden/Das komplette Recherchedossier gibt es hier […]
  • rufposten: “Im Dezember 2020 hat der SWR d…” 11. April 2021
    Im Dezember 2020 hat der SWR dann Phase6 kontaktiert, einige Tracker hatte man bis dahin bereits von selbst entfernt, den Großteil nahm man dann im Dezember raus. Heute ist die Website trackingfrei, die App nicht ganz. Am Ende wollte die Redaktion des SWR die Geschichte nicht mehr veröffentlichen, weil sie so lange auf die Stellungnahme […]
  • rufposten: “Dieser umkreiste Haken im link…” 11. April 2021
    Dieser umkreiste Haken im linken Feld bedeutet nicht, dass die anderen Felder abgewählt sind.Aber wenn man hartnäckig herausgefunden hatte, dass die drei rechten aktiv sind, konnte man sie grau schalten. Mit solchen betrügerischen Tricks kann man auch ins Gefängnis wandern. Das BDSG sieht Freiheitsstrafe bis zu zwei Jahren oder Geldstrafe vor.In der App nutzt man […]
  • rufposten: “Wollte man doch die Eltern fra…” 11. April 2021
    Wollte man doch die Eltern fragen, bekamen die eine Tafel vorgelegt …Hier willigten die Eltern also ahnungslos in die Nutzung von „anonymen Daten“ zur „Produktverbesserung“ ein, während in Wahrheit „personenbezogene Daten“ für die „Werbevermarktung“ verarbeitet wurden. Das ist Betrug, oder? Auf der Seite gab es auch einen Cookie-Banner. Ja, wir haben alle schon Dark Patterns […]

Kategorien

  • Allgemein
  • Audio-Slideshow
  • Beispiele
  • Daten- und Informantenschutz
  • Interna
  • Narration
  • Reporterpreis
  • Scrollytelling
  • Testbericht
  • Tools
  • Tutorial
  • Video
  • z-Aufmacher
  • z-featured
  • Popular
  • Recent
  • Privacy Analysis of Tiktok’s App and Website 5. Dezember 2019
  • Die Zwei-Browser-Lösung gegen Datentracking 2. November 2016
  • Der große Scrollytelling-Tool-Test 15. April 2015
  • Tracking- und und googlefreies Smartphone 14. April 2019
  • Phase 6: Wie Deutschlands beliebtester Vokabeltrainer Kinder getrackt und Eltern betrogen hat 14. April 2021
  • Spenden 2020 1. Juli 2020
  • Tracking bei Shops und Markenherstellern 22. Juni 2020
  • Datenschutz bei Microsoft Teams? 17. Mai 2020

Archiv

  • April 2021 (1)
  • Juli 2020 (1)
  • Juni 2020 (1)
  • Mai 2020 (1)
  • Februar 2020 (1)
  • Dezember 2019 (1)
  • November 2019 (1)
  • Oktober 2019 (4)
  • Juni 2019 (2)
  • April 2019 (1)
  • Februar 2019 (1)
  • September 2018 (1)
  • August 2018 (2)
  • Juli 2018 (1)
  • Juni 2018 (1)
  • November 2017 (1)
  • Oktober 2017 (1)
  • September 2017 (1)
  • Juli 2017 (1)
  • November 2016 (1)
  • März 2016 (1)
  • Februar 2016 (2)
  • August 2015 (1)
  • Mai 2015 (1)
  • April 2015 (2)
  • Januar 2015 (1)
  • Oktober 2014 (2)
  • September 2014 (3)
  • August 2014 (1)
  • Juli 2014 (3)

Tags

Aesop auftragsarbeit Ausstellungstrailer Beruf BR Comic Debatte Erzählstimme Facebook Filterblase Google HTML5 Interview klynt Linius Musik Pageflow Print Racontr Scrollytelling Spark Storyform sway Tech Tonlos Tools Wordpress

Social Media

RSS RSS
 Twitter
Mastodon Mastodon