Wie Videos Web-Bürger erster Klasse werden  Hypervideo HTML5 Popcorn
Beispiele•   DDR-Flüsterwitze    http://www.morgenpost.de/fluesterwitze•   Popcorn.js-Demos    http://www.popcornjs.org/de...
Experimentelle Beispiele•   Youtube und Slideshare synchronisieren    http://connect2campus.in/slides/try2.html•   Motion ...
Das ist•   Texte und andere Medienelemente sind in    Videos "eingebrannt“ (Tweets werden    abgefilmt, z.B.)•   Audio und...
Das geht•   Videos werden in die Hyperlink-Struktur    integriert und so ebenbürtiger Teil des Web    (Links auf Bauchbind...
Praxisbeispiel Popcorn.jsGrundlagen•   HTML-Datei erstellen•   Javascript-Bibliothek Popcorn.js laden•   Youtube-, Vimeo- ...
Praxisbeispiel Popcorn.jsFootnote-Pluginvar videoName = Popcorn("#video");  videoName.footnote({  start: 2,  end: 6,  text...
Ohne Quellcode- Popcornmakerhttp://maker.mozillapopcorn.org
Blogbeiträge zum Thema•   http://www.digitalerwandel.de/2011/12/30/we    binhalte-in-webvideos-popcornjs-fuer-    journali...
Vielen DankJulius TrögerBerliner Morgenpostdigitalerwandel.de@juliustroeger
Nächste SlideShare
Wird geladen in …5
×

Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden

1.400 Aufrufe

Veröffentlicht am

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

0 Kommentare
4 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.400
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden

  1. 1. Wie Videos Web-Bürger erster Klasse werden Hypervideo HTML5 Popcorn
  2. 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. 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. 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. 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. 6. Praxisbeispiel Popcorn.jsGrundlagen• 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. 7. Praxisbeispiel Popcorn.jsFootnote-Pluginvar videoName = Popcorn("#video"); videoName.footnote({ start: 2, end: 6, text: "Hallo", target: "divElement" });
  8. 8. Ohne Quellcode- Popcornmakerhttp://maker.mozillapopcorn.org
  9. 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. 10. Vielen DankJulius TrögerBerliner Morgenpostdigitalerwandel.de@juliustroeger

×