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
Upcoming SlideShare
Loading in …5
×

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

1,333 views
1,268 views

Published on

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

Published in: Self Improvement
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,333
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×