HTML5 Video Player für die eigene Website

Das Thema HTML5 gewinnt langsam an Fahrt. Die großen Videoportal wie YouTube und Vimeo haben bereits vor einiger Zeit erste Videoplayer auf HTML5-Basis vorgeführt. Dank des video-Tags kann man mittlerweile auf einfache Weise selbst Videos mit HTML5 einbinden.

Noch komfortabler und anpassbarer als der Standardplayer des Browsers ist ein vorgefertigter Player, von den ich zwei heute vorstellen möchte. Sie bestehen aus HTML5-Code, JavaScript und CSS und können auf der eigenen Website integriert werden.

Noch ein kurzer Hinweis zum Thema H.264 vs. Theora: Welches Format die Player abspielen können, hängt nicht vom Player ab, sondern vom Browser.
Bei den Codecs scheint Theora immer mehr in Bedrängnis zu geraten, da jetzt auch Microsoft die Unterstützung von H.264 für den Internet Explorer plant.

Sublime HTML5 Video Player

Ein sehr ansprechender Player, der dank HTML5 ohne Browserplugin auskommt, heißt SublimeVideo HTML5 Video Player.

Sehr gut gelöst ist der Wechsel in den Vollbildmodus, der allerdings im Gegensatz zum Flash Player kein echter Vollbildmodus ist. Bisher ist es mit den aktuellen Browsern und HTML5 lediglich möglich, den kompletten Browser auszufüllen („full-window“). In den aktuellen Nightly-Builds des Webkits wird jedoch an einer solchen Funktionalität bereits gearbeitet.

Der SublimeVideo HTML5 Video Player ist noch nicht veröffentlicht, wird zukünftig zumindest für nicht-kommerzielle Nutzung frei sein.

Link: jilion.com/sublime/video

projekktor-zwei

Dieser HTML5 Video Player ist Open Source (GPL) und kann auch problemlos für kommerzielle Zwecke genutzt werden.

Projekktor is a free open source multi media player for embedding audio- and video- content to any website based on single files or on multiple ones bundled through playlists (webTV).

Link: projekktor-zwei
Link: projekktor-zwei (Google Code)

Weitere Artikel unter dem Stichwort HTML5 hier im Blog.

[ad]

14 Gedanken zu „HTML5 Video Player für die eigene Website“

  1. Ne, aber vielleicht kennt "Jemand" ja so eine Möglichkeit. Weil manuell immer zu den HTML5-Tag eingeben, plus entsprechenden Video-Code, das ist doch etwas umständlich manchmal.

    Von daher wäre das ganze, innerhalb eines bestehenden Video-Plugin für WordPress schon was feines.

    So meinte ich das…

  2. @LexX Noel auf soetwas soll es beim Projekktor mal hinaus laufen. Es sind noch ein paar Tests und Verbesserungen notwendig, so dass man mehrere Player auf einer einzelnen Seite einbauen kann. Sobald das funktioniert gibt es das WP-Plugin.

  3. Das Projekktor WordPress-Plugin ist inzwischen verfügbar (http://www.projekktor.com/cms.php#wordpress). Es ermöglicht es HTML5 Video-Elemente per "Shorttag" in den Blogtext zu hacken. Parallel dazu wird der Javascript Player geladen und aktiviert, womit dann Flash-Fallback, eigene Themes usw. usf. ermöglicht werden. Als Bonbon kommt noch eine Playlist dazu, die automatisch aus den gebloggten Videos aggregiert wird und über den Player als webTV-Playlist ausgespielt werden kann.

  4. Ich verzehre förmlich die Informationen auf dieser Webseite. So viele infos. Leider muß ich mich hier als Video und Flashamateur outen. Für unsere Webseite wollen wir nur den nächsten Schritt einleuten und Videos, die mit der Canon Eos 5D Mark II gemacht wurden, einbinden. Ich merke schon, ich habe mir evtl. zu viel vorgenommen. Evtl. beginne ich da erste einmal mit unserem WordPress blog. Florian, vielen Dank für die Mühe die Du dir hier machst. Ich werde noch einige Stunden auf Deinen Webseiten verbringen. Ein lieber Gruß aus Köln, dirk

  5. Mittlerweile wird das ganze relativ unübersichtlich, bei so vielen verschiedenen HTML5 Video Playern wird es schwierig herauszufinden auf welchen man sich längerfristig konzentrieren soll. Zuerst wollte ich http://mediaelementjs.com/ verwenden aber nun hat Adobe ja sein HTML5 Video Player Widget herausgebracht und das basiert auf http://www.html5video.org/. Auf welchen Player würdet ihr setzen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert