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

  • Ohne Titel 21. März 2023
    Drei Argumente, warum es wichtig ist, dass unerwünschte Analysesoftware weiterhin nicht ohne Einwilligung erlaubt sein sollte. Mein abschließender Kommentar zur Artikelserie "TTDSG". https://www.kuketz-blog.de/meinung-es-gibt-kein-grundrecht-auf-analyse-ttdsg-teil5/
  • Ohne Titel 17. März 2023
    Das gilt auch für unternehmerische Aufträge von beispielsweise Verlagen. Eine Ausnahme sind journalistische Aufträge: Hier gehe ich davon aus, dass die Trennung zwischen Verlag und Redaktion ausreichend gut ist. Das heißt, dass ich kein Problem darin sehe, beispielsweise kritisch über einen Verlag zu schreiben und gleichzeitig Beiträge an die Redaktion zu verkaufen. Fortbildungen für Verlage […]
  • Ohne Titel 17. März 2023
    Ich nehme übrigens keine Aufträge oder Gelder von Unternehmen oder Behörden, die mit meinen Themenfeldern zu tun haben. Ich habe auch schon Anfragen zu Schulungen in diesem Bereich abgelehnt. Wenn ich Aufträge annehme, die entfernt in meinen Themenbereich fallen, dann berichte ich ich ein paar Jahre nichts mehr über dieses Unternehmen. Bei jedem nichtjournalistischen Auftrag […]
  • Ohne Titel 16. März 2023
    @noybeu:"Meta-Tracking-Tools rechtswidrig""In einer wegweisenden Entscheidung in noybs 101 Beschwerden hat die österreichische Datenschutzbehörde (DSB) entschieden, dass die Verwendung des Tracking-Pixels von Facebook direkt gegen die DSGVO und das sogenannte "Schrems II"- Urteil zu transatlantische Datentransfers verstößt."https://noyb.eu/de/datenschutzbehoerde-meta-tracking-tools-rechtswidrigBeachtlich. Wenn ich das richtig verstehe, kann der Verstoß auch nicht mit einer eingeholten Einwilligung verhindert werden. R.I.P. FB Pixel […]
  • Ohne Titel 13. März 2023
    Note to self (and my colleagues): If you ever write about social media recommendation algorithms do not only check the grammar of this word but read this tech primer from @randomwalker first to sort your thoughts and words correctly. https://knightcolumbia.org/content/understanding-social-media-recommendation-algorithms
  • Ohne Titel 12. März 2023
    (Und wie man auf die Idee kommt, IP-Adresse vor Google mit einem Google-Server zu anonymisieren 🤷‍♂️ )
  • Ohne Titel 12. März 2023
    Richtig lange Recherche und leider mit massiver Kritik am Öffentlich-Rechtlichen Rundfunk: Wie ÖRR-Sender Analysetracking ohne Einwilligung einsetzen. Wie sie dabei die herrschende Fachmeinung ignorieren. Wie sie falsche Behauptungen und Irreführungen dazu verbreiten. Wie die lascheste Behörde in ganz Europa es rechtfertigt, dass Google Analytics beim BR in einer verschärften Variante laufen darf. #TTDSG Teil 4https://www.kuketz-blog.de/google-analytics-beim-bayerischen-rundfunk-und-die-lascheste-datenschutzbehoerde-europas-das-ttdsg-teil4/
  • Ohne Titel 9. März 2023
    Ihr könnt euch schon mal auf den vierten Teil der TTDSG-Serie nächste Woche einstimmen:https://www.br.de/mediathek/video/bayernhymne-ohne-sie-geht-kein-sendetag-zu-ende-av:5a3c58c2185c080018d19ed8Bis dahin lest – falls noch nicht geschehen – in jedem Fall noch den dritten Teil über den umtriebigen Lobbyprofessor aus Köln. https://www.kuketz-blog.de/das-lobbyinstitut-vom-datenschutz-experten-rolf-schwartmann-das-ttdsg-teil3/
  • Ohne Titel 8. März 2023
    TV-Tipp: Die Machtmaschine - Wie Facebook und Co. Demokratien gefährden"Die Dokumentation zeigt, wie raffiniert soziale Medien missbraucht werden, um Demokratien anzugreifen."https://www.ardmediathek.de/video/dokus-im-ersten/die-machtmaschine-wie-facebook-und-co-demokratien-gefaehrden/das-erste/Y3JpZDovL2Rhc2Vyc3RlLmRlL3JlcG9ydGFnZSBfIGRva3VtZW50YXRpb24gaW0gZXJzdGVuL2Q5NTFlY2FmLWJmYmItNDkwNC04Y2MzLWJiOTU4ZjVlZDI0ZAU.a. von @sveckert
  • Ohne Titel 7. März 2023
    Hier sind die aktuellen Nominierten für den Datenschutzmedienpreis "2022" 🎉 :1. Ein Audio-Beitrag über Opfer von Identitätsmissbrauch https://www.br.de/radio/br24/sendungen/der-funkstreifzug/datenklau-identitaetsdiebstahl-jobportal-100.html2. Ein toller Kurzfilm über Werbetracking:https://www.bvdnet.de/wp-content/uploads/2023/03/Datenschutz_Berlin_Andrina_Schmid_Samuel_Wetter.mp43. Ein kritischer Beitrag der SZ zum Datenschatz von Google:Was Google über uns weißhttps://bvdnet.de/wp-content/uploads/2023/03/SZ-Archiv-20230306_160006.pdfhttps://www.bvdnet.de/datenschutzmedienpreis/

Kategorien

  • Allgemein
  • Audio-Slideshow
  • Beispiele
  • Daten- und Informantenschutz
  • Interna
  • klimaruf
  • Narration
  • Reporterpreis
  • Scrollytelling
  • Spenden
  • Testbericht
  • Tools
  • Tutorial
  • Video
  • z-Aufmacher
  • z-featured
  • Popular
  • Recent
  • Privacy Analysis of Tiktok’s App and Website 5. Dezember 2019
  • Der große Scrollytelling-Tool-Test 15. April 2015
  • Die Zwei-Browser-Lösung gegen Datentracking 2. November 2016
  • Datenschutz bei Microsoft Teams? 17. Mai 2020
  • Honk auf dem Uberspace 10. Januar 2023
  • How you are tracked without cookies using Identity Providers 5. Dezember 2021
  • Phase 6: Wie Deutschlands beliebtester Vokabeltrainer Kinder getrackt und Eltern betrogen hat 14. April 2021
  • Tracking bei Shops und Markenherstellern 22. Juni 2020

Archiv

  • Januar 2023 (3)
  • 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
Mastodon Mastodon