In einer einstündigen Session habe ich am 1. September 2012 beim Videocamp in Berlin über interaktive Videos gesprochen.

1. Wie Videos Web-Bürger
erster Klasse werden
Hypervideo HTML5 Popcorn

2. Beispiele
• DDR-Flüsterwitze
http://www.morgenpost.de/fluesterwitze
• Popcorn.js-Demos
http://www.popcornjs.org/demos
• Obama: State of the Nation
http://nyti.ms/yj1eCz
• Open Hypervideo Project
http://www.open-hypervideo.org

3. Experimentelle Beispiele
• Youtube und Slideshare synchronisieren
http://connect2campus.in/slides/try2.html
• Motion Tracking im Browser
http://anavallasuiza.com/popcorn/
• HTML5-Video Media Events
http://www.w3.org/2010/05/video/mediaeven
ts.html
• Live Keying im Browser
http://www.seriouslyjs.org/

4. Das ist
• Texte und andere Medienelemente sind in
Videos "eingebrannt“ (Tweets werden
abgefilmt, z.B.)
• Audio und Video wird in (proprietären)
Plugins dargestellt, z.B. Flash
• Videos stehen irgendwie nebendran. Nicht
mittendrin

5. Das geht
• Videos werden in die Hyperlink-Struktur
integriert und so ebenbürtiger Teil des Web
(Links auf Bauchbinden bzw. direkt auf
bestimmte Parts verlinken)
• Videos reagieren auf Veränderungen der
Seiteninhalte und umgekehrt
• Texte werden "befreit" und dadurch
übersetzbar, von Suchmaschinen indizierbar
• Transparenz (Schnitt, Effekte im Browser
durch URL/Code nachvollziehbar)

6. Praxisbeispiel Popcorn.js
Grundlagen
• HTML-Datei erstellen
• Javascript-Bibliothek Popcorn.js laden
• Youtube-, Vimeo- oder natives Video
implementieren (Codecs beachten)
• Plugins und Beispiele nutzen (z.B. Twitter,
Google Maps, Untertitel)
• Web-Entwickler empfohlen

7. Praxisbeispiel Popcorn.js
Footnote-Plugin
var videoName = Popcorn("#video");
videoName.footnote({
start: 2,
end: 6,
text: "Hallo",
target: "divElement" });

8. Ohne Quellcode- Popcornmaker
http://maker.mozillapopcorn.org

9. Blogbeiträge zum Thema
• http://www.digitalerwandel.de/2011/12/30/we
binhalte-in-webvideos-popcornjs-fuer-
journalisten/
• http://www.digitalerwandel.de/2012/07/16/pr
ogrammier-crashkurs-fuer-journalisten/

10. Vielen Dank
Julius Tröger
Berliner Morgenpost
digitalerwandel.de
@juliustroeger