Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


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 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: Poster Image Download Video: MP4, WebM, Ogg HTML5 Video Player by 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 – HTML5 Video – DOM Attributes and Events – Introduction to HTML5 video – Übersicht: HTML5 Videoplayer –

18 Vielen Dank für die Aufmerksamkeit


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

Ähnliche Präsentationen


Google-Anzeigen