Virtuelle Forschungsumgebungen Hintergrundbeitrag: HTML5: Video Player und VideoJS Universität zu Köln Historisch-Kulturwissenschaftliche Informationsverarbeitung.

Präsentation zum Thema: "Virtuelle Forschungsumgebungen Hintergrundbeitrag: HTML5: Video Player und VideoJS Universität zu Köln Historisch-Kulturwissenschaftliche Informationsverarbeitung."—  Präsentation transkript:

1 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

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 Brwsern 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 ingebaut – Dieser jedoch nur rudimentär

9 HTML5 Video Player: Vorteile Kompatibilität der aktuellen Browser-Version Zusätzliche Features Identische 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: <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="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}]}' /> <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." /> Download Video: MP4, WebM, Ogg HTML5 Video Player by VideoJS

12 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

13 Vielen Dank für die Aufmerksamkeit