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.

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

1 738 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

×