Virtuelle Forschungsumgebungen

1. Hintergrundbeitrag: HTML5: Video Player und VideoJS Universität zu Köln Historisch-Kulturwissenschaftliche Informationsverarbeitung Hauptseminar: Virtuelle Forschungsumgebungen Dozent: Prof. Dr. Manfred Thaller Referent. Johannes Döhrn Virtuelle Forschungsumgebungen

2. HTML5: Videofunktion • Gliederung: • HTML5 Video • Übersicht • Formate • Debatte • Strategien • HTML5 Video Player • Vorteile • VideoJS / Weitere Player

3. HTML5 Video: Übersicht • Spezifikationen für das Video-Tag in HTML5 zur Verein-fachung der Darstellbarkeit • Videofunktionalität muss im Browser verankert sein • Browser-Entwickler halten sich teilweise an Vorgaben der W3C • HTML5 immer noch in der Entwicklung • HTML5 Video zur Standardisierung: • Eine Methode zum Einbetten von Videos • Open standards • Soll überall funktionieren können.

4. HTML5 Video: Formate • HTML5 Working Group: Ein Video-Format, das von allen Browsern unterstützt wird • Gute Kompression, gute Bildqualität • Lizenzfrei • Neben Dekodern der Software, sollen auch hardware-seitige Videodekoder vorhanden sein • Ursprünglich empfohlenes Format: Ogg Theora • Keine bekannten Patente

5. HTML5 Video: Formate • Weitere Formate: • H.264/MPEG-4 AVC • Unterliegt Patenten (MPEG LA, u.a. Microsoft und Apple) • VP8 (WebM) -> Google • Open Source: unterstützt durch Chrome, Opera, Firefox • Google Chrome unterstützt kein H.264 mehr seit Januar 2011

6. HTML5 Video: Debatte • Webseiten, die Videos bereitstellen kritisieren HTML5 Video: • u.a. Hulu, Netflix • Alternative Plugins: Adobe Flash Player, Quicktime, Silverlight, RealPlayer • Dem gegenüber: Apples iPhone und iPad unterstützt HTML5 Video, H.264 Format, anstatt des Adobe Flash Player • Da Flash der meist verbreiteste Player im Web ist, können viele Videos nicht auf iPhone bzw. iPad gesehen werden. • Keine Einigkeit über codecs.

7. Strategien • Webseiten, die sich auf Flash Player konzentriert haben, nutzen HTML5 Video nur z.T. • U.a. wg. Popularität von iPhone und iPad • Webseiten, die eine Technologie benutzen wollen, die möglicherweise zum Standard wird • RTMP Streaming vs. Progressive Download • RTMP schützt streaming Video vor Download bzw. Kopieren • Wird von HTML5 kompatiblen Browsern noch nicht unterstützt • Ältere Geräte können nicht auf RTMP Streams zugreifen • Prog. Download nicht sicher

8. HTML5 Video Player • Erweiterung der Kontrollfunktionen zum Abspielen von Videos durch JavaScript • Entwicklung eines frei verfügbaren Mustercodes, der durch libraries genutzt werden kann • z.B. VideoJS • HTML5 kompatible Browser haben bereits einen Video Player eingebaut • Dieser jedoch nur rudimentär

9. HTML5 Video Player: Vorteile • Kompatibilität der aktuellen Browser-Version • Zusätzliche Features • Einheitliche Designs & Controls • Fehlerbehebung der Browser • Kompatibilität der Features

10. VideoJS • Besteht aus 3 Komponenten: • Code zum Einbetten (reiner HTML-Code) • z.B. 'Video for Everybody' entwickelt von Kroc Kamen; • Kompatibel mit den meisten Browsern und Geräten • JavaScript-Datei (video.js) • s. Vorteile • HTML-CSS-Datei (video-js.css) • Ermöglicht einheitlichen Look

11. VideoJS Code: <!-- Begin VideoJS --> <div class="video-js-box"> <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody --> <video class="video-js" width="640" height="264" controls preload autoplay poster="http://video-js.zencoder.com/oceans-clip.png"> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' /> <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --> <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' /> <!-- Image Fallback. Typically the same as the poster image. --> <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." /> </object> </video> <!-- Download links provided for devices that can't play video in the browser. --> <p class="vjs-no-video"><strong>Download Video:</strong> <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>, <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>, <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br> <!-- Support VideoJS by keeping this link. --> <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS </p> </div> <!-- End VideoJS -->

12. Document Object Model: Attribute und Events • Display Attributes: • src: stellt URL der Videodatei zur Verfügung • poster (URL): ein Bild, das vom Browser angezeigt wird, solange das Video lädt. • Controls: Der Browser stellt die integrierten controls für Playback und Lautstärke zur Verfügung. • videoWidth, videoHeight

13. DOM: Attribute • Playback Attributes: • currentTime: Anzeige abgespielte Zeit • startTime: Die Startzeit des Videos (Streams) • duration: Laufzeit in sec • paused: Wurde das Video angehalten? • ended: Ist das Video zu Ende? • autoplay: Ist autoplay vorhanden? • loop, autobuffer, seeking, defaultPlaybackRate*, playbackRate*, seekable*, buffered*, played* • Andere: volume, muted, readyState, networkState, error • *: funktioniert noch nicht in Firefox

14. Events • Zur Regelung des Video-Playback werden Events benötigt: • loadstart: Browser beginnt Daten zu laden • progress: Browser lädt Daten • suspend: Browser lädt keine Daten, wartet • abort: Abbruch der Datenübertragung • error: Fehler aufgetreten • emptied: Daten nicht vorhanden • stalled: Datentransfer angehalten • Play, pause, loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough, seeking, seeked, timeupdate, ended, ratechange, durationchange, volumechange

15. JavaScript-Bibliotheken • Jquery • Meistverwendete JavaScript-Bibliothek • Komfortable Funktionen zur DOM-Manipulation und -Navigation • JavaScript-Datei: alle grundlegenden DOM-, Ereignis-, Effekt- und Ajax-Funktionen • MooTools • JavaScript-Framework zur effizienten Entwicklung von erweiterbarem und browserübergreifend kompatiblem Code • Objektorientiert, modular aufgebaut und kompakt

16. Weitere HTML5-Player • JW Player für HTML5 • Noch in der Beta-Phase; Platzieren eines Bildes vor oder nach dem Video; Skinning funktioniert über Grafiken; Fallback kann der JW Player auf Flash-Basis sein • Kaltura HTML5 Media Library • Leichtes skinnen per CSS oder jQuery; neue Funktionalitäten über JavaScript-Module; kann in Content-Management-Systeme eingebunden werden • Open Standard Media Player • YouTube- und Vimeo-Integration; Playlist • HTML5 ogv Media Player

17. Quellen • HTML5 Video Player / VideoJS • http://videojs.com • HTML5 Video – DOM Attributes and Events • http://www.chipwreck.de/blog/2010/03/01/html-5-video-dom-attributes-and-events • Introduction to HTML5 video • http://dev.opera.com/articles/view/introduction-html5-video • Übersicht: HTML5 Videoplayer • http://www.video-flash.de/index/html5-videoplayer-uebersicht2

18. Vielen Dank für die Aufmerksamkeit