virtuelle forschungsumgebungen n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Virtuelle Forschungsumgebungen PowerPoint Presentation
Download Presentation
Virtuelle Forschungsumgebungen

Loading in 2 Seconds...

play fullscreen
1 / 18

Virtuelle Forschungsumgebungen - PowerPoint PPT Presentation


  • 91 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
html5 videofunktion
HTML5: Videofunktion
  • Gliederung:
    • HTML5 Video
      • Übersicht
      • Formate
      • Debatte
    • Strategien
    • HTML5 Video Player
      • Vorteile
    • VideoJS / Weitere Player
html5 video bersicht
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 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 formate1
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
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
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
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
HTML5 Video Player: Vorteile
  • Kompatibilität der aktuellen Browser-Version
  • Zusätzliche Features
  • Einheitliche Designs & Controls
  • Fehlerbehebung der Browser
  • Kompatibilität der Features
videojs
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
videojs1
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 -->

document object model attribute und events
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
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
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
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
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
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 dank f r die aufmerksamkeit
Vielen Dank

für die

Aufmerksamkeit