Diese Präsentation wurde erfolgreich gemeldet.

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

5

Teilen

Wird geladen in …3
×
1 von 10
1 von 10

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

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.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. 7. Praxisbeispiel Popcorn.js Footnote-Plugin var videoName = Popcorn("#video"); videoName.footnote({ start: 2, end: 6, text: "Hallo", target: "divElement" });
  8. 8. Ohne Quellcode- Popcornmaker http://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 Dank Julius Tröger Berliner Morgenpost digitalerwandel.de @juliustroeger

×