• Ü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)

  • Jun 23, 2022, 20:26 23. Juni 2022
    Wild Wild Web – Die Kim Dotcom Story hat den Deutschen Podcast Preis gewonnen (Beste Autor:in).War auch wirklich eine großartige Geschichte. https://www.br.de/radio/bayern2/wild-wild-web-die-kim-dotcom-story100.html#dpp2022
  • Jun 19, 2022, 06:49 19. Juni 2022
    "Julian Assange stirbt einen Tod in Raten: Wo ist die mediale Empörung?"https://www.berliner-zeitung.de/kultur-vergnuegen/julian-assange-stirbt-einen-tod-in-raten-wo-ist-die-mediale-empoerung-li.229468
  • Jun 16, 2022, 08:50 16. Juni 2022
    EDPS Conference with Max Schrems and @ulrichkelber in live stream now. https://tube.network.europa.eu/w/9GF6bwPFdX9oEHVx295VBE
  • Jun 16, 2022, 08:41 16. Juni 2022
    Now also the European Data Protection Supervisor @EDPS joined the official EU Fediverse Video Instance:https://tube.network.europa.eu/c/edps_tv/videos?s=1
  • Jun 14, 2022, 07:59 14. Juni 2022
    Man kann seine Talks und Fernsehbeiträge zur Macht von Plattformen schon bei Youtube hochladen und bewerben.Aber dann merken eben auch alle, dass man keine Ideen hat, was man ändern könnte.
  • Jun 13, 2022, 06:57 13. Juni 2022
    Ja, das bräuchte man (Via https://twitter.com/wortfeld/status/1533559229986050053)
  • Jun 07, 2022, 10:56 7. Juni 2022
    Studie bemängelt Abhängigkeiten des Journalismus von Social-Media-Plattformen und schlägt unter anderem Leitlinien und die Bespielung nichtkommerzieller Plattformen vor:Kurzfassung:https://www.otto-brenner-stiftung.de/fileadmin/user_data/stiftung/02_Wissenschaftsportal/03_Publikationen/AH110_OERM_Soziale_Medien_Vierseiter.pdfBericht bei Netzpolitik:https://netzpolitik.org/2022/ard-und-zdf-auf-social-media-von-algorithmen-und-metriken-verleitet/@OttoBrennerStiftung
  • Jun 06, 2022, 08:36 6. Juni 2022
    Hallo liebe Kollegen von @klimavoracht Ihr macht tolle Arbeit, keine Frage … aber checkt auch mal eure Seite auf Datenschutz, die setzt aktuell nach einigen Aufrufen das Google-Werbecookie IDE ohne Einwilligung (ausgelesen wird es bereits beim ersten Aufruf).
  • Jun 03, 2022, 15:39 3. Juni 2022
    📎 Clippy 2000: "It look's like you're writing a letter - would you like help?"📎 Clippy 2022: "It looks like you wan't to leave the company so I secretly informed the admins to have a closer look at you." https://www.microsoft.com/en-my/microsoft-365/roadmap?filters=&searchterms=93251(Via https://twitter.com/coolharsh55/status/1532658299069505536)
  • May 13, 2022, 07:58 13. Mai 2022
    Und zum Ausklang noch die schönste Meldung der Woche, zu der ich noch nicht gekommen bin: Unser wunderbares Multimedia-Projekt MADE TO MEASURE hat den Datenschutzpreis gewonnen🥇https://www.bvdnet.de/datenschutzmedienpreis/Ich habe wochenlang bei den Recherchen mitgearbeitet und weiß, wieviel Arbeit und unbeirrbarer Wille vom Team Laokoon in das Projekt gesteckt wurde. 🎉 https://madetomeasure.online/de/

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
  • Datenschutz bei Microsoft Teams? 17. Mai 2020
  • Spenden 2021 – zweites Halbjahr 8. Januar 2022
  • How you are tracked without cookies using Identity Providers 5. Dezember 2021
  • Spenden 2021 – erstes Halbjahr 2. Juli 2021
  • Phase 6: Wie Deutschlands beliebtester Vokabeltrainer Kinder getrackt und Eltern betrogen hat 14. April 2021

Archiv

  • Januar 2022 (1)
  • Dezember 2021 (1)
  • Juli 2021 (1)
  • 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