1 / 18

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.

jabir
Download Presentation

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

  18. Vielen Dank für die Aufmerksamkeit

More Related