Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
Veröffentlicht von:Senta Werning Geändert vor über 10 Jahren
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
Ähnliche Präsentationen
© 2024 SlidePlayer.org Inc.
All rights reserved.