Virtuelle Forschungsumgebungen 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

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

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.

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

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

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.

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

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

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

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

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

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

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

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

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

Weitere HTML5-Player JW Player für HTML5 Kaltura HTML5 Media Library 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

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

Vielen Dank für die Aufmerksamkeit