O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

1.701 visualizações

Publicada em

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

Publicada em: Aperfeiçoamento pessoal
  • Seja o primeiro a comentar

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

×