SlideShare ist ein Scribd-Unternehmen logo
1 von 10
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/demos
•   Obama: State of the Nation
    http://nyti.ms/yj1eCz
•   Open Hypervideo Project
    http://www.open-hypervideo.org
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/
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
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)
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
Praxisbeispiel Popcorn.js
Footnote-Plugin


var videoName = Popcorn("#video");
  videoName.footnote({
  start: 2,
  end: 6,
  text: "Hallo",
  target: "divElement" });
Ohne Quellcode- Popcornmaker




http://maker.mozillapopcorn.org
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/
Vielen Dank
Julius Tröger
Berliner Morgenpost
digitalerwandel.de
@juliustroeger

Weitere ähnliche Inhalte

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

PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021SEARCH ONE
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenJonathan Weiß
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenTomas Caspers
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenJens Grochtdreis
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPCNico Steiner
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHPFrank Kleine
 
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - KölnTipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - KölnViktor Vogel
 
Web 2.0 in und für Bibliotheken
Web 2.0 in und für BibliothekenWeb 2.0 in und für Bibliotheken
Web 2.0 in und für BibliothekenChristian Hauschke
 
Flash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoFlash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoJakob
 
Vortrag accessible media Stammtisch "UT"
Vortrag accessible media Stammtisch "UT"Vortrag accessible media Stammtisch "UT"
Vortrag accessible media Stammtisch "UT"Jo Spelbrink
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkFabian Lange
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkFabian Lange
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)André Krämer
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]Jakob
 

Ähnlich wie Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden (20)

HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
WordPress Grundlagen Kurs
WordPress Grundlagen KursWordPress Grundlagen Kurs
WordPress Grundlagen Kurs
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - KölnTipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
 
Web 2.0 in und für Bibliotheken
Web 2.0 in und für BibliothekenWeb 2.0 in und für Bibliotheken
Web 2.0 in und für Bibliotheken
 
Flash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoFlash Video vs. HTML5 Video
Flash Video vs. HTML5 Video
 
Warum gerade TYPO3?
Warum gerade TYPO3?Warum gerade TYPO3?
Warum gerade TYPO3?
 
Vortrag accessible media Stammtisch "UT"
Vortrag accessible media Stammtisch "UT"Vortrag accessible media Stammtisch "UT"
Vortrag accessible media Stammtisch "UT"
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]
 

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

  • 1. Wie Videos Web-Bürger erster Klasse werden Hypervideo HTML5 Popcorn
  • 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. 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. 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. 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. 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. Praxisbeispiel Popcorn.js Footnote-Plugin var videoName = Popcorn("#video"); videoName.footnote({ start: 2, end: 6, text: "Hallo", target: "divElement" });
  • 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. Vielen Dank Julius Tröger Berliner Morgenpost digitalerwandel.de @juliustroeger