Virtuelle Forschungsumgebungen

Hintergrundbeitrag:

HTML5: Video Playerund

VideoJS

Universität zu KölnHistorisch-Kulturwissenschaftliche Informationsverarbeitung

Hauptseminar: Virtuelle ForschungsumgebungenDozent: Prof. Dr. Manfred Thaller

Referent. Johannes Döhrn

HTML5: Videofunktion

● Gliederung:– HTML5 Video

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

VideoJSCode:

<!-- 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– 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 Dankfür die

Aufmerksamkeit