1 / 13

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

shada
Télécharger la présentation

Virtuelle Forschungsumgebungen

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  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

More Related