Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

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

1 709 vues

Publié le

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

Publié dans : Développement personnel
  • Soyez le premier à commenter

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

×