HTML5: 10 Video Media Player in der Übersicht

Exzellenter Artikel
von Thomas Soyter | 0 | 8639 Aufrufe

Anzeige Hier werben

In der neuesten Version 5 von HTML wird es Spezifikationen für einen Video Tag geben, der es Webdesigner und Webentwicklern erstmalig erlauben wird, Videos ebenso einfach auf eine Website einzubinden, wie beispielsweise ein Bild.

In der Praxis könnte dies dann folgendermaßen aussehen:

 
HTML
1
2
3
4
5
<video width="320" height="240" src="/wp-content/flvplayer/content/demo-video.mp4" autobuffer autoplay controls>
    <div class="video-fallback">
        <br>Sie benoetigen einen Browser, der HTML5 unterstuetzt.
    </div>
</video>

Damit dies auch klappt, müssen die Browser-Hersteller mitziehen und die Videofunktionalität in ihre Browser implementieren und vor allem die vom W3C empfohlenen Richtlinien entsprechend auch umsetzen, damit die Videoeinbindung möglichst browserübergreifend identisch funktioniert.

Dies ist nicht selbstverständlich, da aufgrund verschiedener Gründe wie finanzielle und technische Aspekte die Entwickler der Browser durchaus andere Wege beschreiten könnten. Aber man kann davon ausgehen, dass kein Browser sich letztlich zu weit von den Spezifikationen des World Wide Web Consortium bewegen wird. Darüber hinaus befindet sich HTML5 noch in Entwicklung, so dass es durchaus noch zu Änderungen der betreffenden Spezifikationen kommen kann.

Zwar ist die Integration eines Videos derzeit ebenfalls relativ einfach möglich - Plugins wie beispielsweise dem Flashplayer, Quicktime, etc. sei Dank - jedoch wäre der HTML5-Ansatz ein Riesenschritt in Richtung Browser- und Geräteunabhängigkeit was die Wiedergabe von Videos angeht.

Es lohnt sich also deshalb sicherlich ein Blick auf bereits auf dem Markt verfügbare HTML5 Media Player zu werfen. Es gibt inzwischen eine Reihe von Playern zur Integration auf Webseiten, die die Einbindung von Videos mittels HTML5 und die Darstellung - ein geeigneter Browser vorausgesetzt - ermöglichen.

Wir möchten hier nun einige Video-Player ganz kurz vorstellen:

YouTube HTML5 Player

Verfügt man über einen entsprechenden Browser, beispielsweise Firefox 4 (WebM), Google Chrome (WebM und h.264), Opera 10.6 (WebM), etc. und den jeweils unterstützten Videocodecs, kann man statt des herkömmlichen Flashplayers für die meisten Videos auch den YouTube HTML5 Videoplayer nutzen.

Vimeo HTML5 Player

Der sich derzeit noch im Beta-Status befindenden Player läuft auf den aktuellsten Versionen der Browser Safari, Chrome und IE (mit installiertem Chrome Frame). Um den HTML5 Player von Vimeo zu nutzen bzw. zu testen, kann man innerhalb jedes Vimeo-Videos im unteren Bereich auf den Button "Switch to HTML5 player" klicken.

Video JS

Video JS ist ein Javascript basierter Videoplayer bestehend aus drei Teilen: Dem eingebundenen Code (Video for Everybody), einer Javascript Bibliothek (video.js) und einem reinen HTML/CSS Skin (video-js.css)

Features

  • Free & Open Source
  • Leichtgewicht: KEINE BILDER WERDEN VERWENDET
  • 100% skinnable durch CSS
  • Bibliotheksunabhängig
  • Leicht zu nutzen
  • Sehr verständlich & einfach zu erweitern
  • Konsistenter Look in allen unterstützenden Browsern
  • Full Screen und Full Window Modus
  • Lautstärken-Kontrolle
  • Flash Fallback (auch bei Verwendung einer nicht unterstützten Quelle)

JW Player for HTML5

Der JW Player ein komplett skinnbasierter und konfigurierbarer Videoplayer, umgesetzt in Javascript (jQuery) und ermöglicht bei Bedarf einen übergangslosen Fallback auf den beliebten JW Player für Flash.

Video for Everybody!

Video for Everybody! ermöglicht durch die einfache Einbindung von HTML5-Code die Integration von Videos auf entsprechenden Webseiten. Der Video-Player bietet ebenfalls einen automatischen Flash-Fallback ohne JavaScript oder Browser-Sniffing zu bemühen. Darüber hinaus funktioniert dieser Player ebenfalls in RSS-Readern und auf dem iPhone, auf dem iPad, sowie auf vielen Browsern und Plattformen.

Ambilight for Video Tag

Ambilight ist ein einfacher Videoplayer der die Einbindung von HTML5 Video ermöglicht und sich dadurch abhebt, dass er an den Rändern in Abhängigkeit der Farbgebung im Video die Durchschnitts-Farben im Ambilight-Style darstellt.

DailyMotion HTML5 Video Player Demo

FlareVideo

FlareVideo ist ein Open-Source-Projekt und auf jQuery-basierender HTML5 Video Player, der über einen Fullscreen-Modus und Flash-Fallback-Mechanismus verfügt.

Features

  • HTML5 Video mit Flash-Fallback
  • Einfache CSS/HTML/JS Anpassung und Möglichkeit Themes zu erstellen
  • Full-Screen Unterstützung
  • Komplett Open-Source und kostenlos, auch für den kommerziellen Einsatz

VP Factory

VP Factory unterscheidet sich generell dadurch, dass es eine komplett cloud-basierte Video-Management-Applikation darstellt mit einem flexibel anpassbaren Video Player und jeder Menge weiterer Features.

SublimeVideo

Der Sublime Video-Player befindet sich noch im Experimentier-Stadium und unterstützt derzeit nur eine bestimmte Anzahl von Browsern. Das langfristige Ziel der Entwickler ist es jedoch SublimeVideo für alle modernen Browsern lauffähig umzusetzen. Darüber hinaus soll der Videoplayer demnächst frei erhältlich angeboten werden, zumindest für nicht-kommerzielle Zwecke.

Ansonsten erlaubt der Sublime Videoplayer das einfache Einbinden von Videos in Blogs bzw. Websites die den modernen Webstandards entsprechen.

Features

  • Full-Window Modus
  • HTML5 Video mit seinen Vorteilen
    Kein Browser-Plugin notwendig
    Keine Flash-Abhängigkeit
    Beliebiges Anwählen einer bestimmten Stelle im Video ohne Bufferung
  • Full-Screen Modus
Über den Autor: Thomas Soyter
Leidenschaftlicher Web- / Screendesigner und Webentwickler mit langjähriger Erfahrung. Der Informationsdesigner (www.der-informationsdesigner.de) ist ein kreatives Büro für die Gestaltung und Umsetzung von Print- und Onlineprojekten.
Profilseite betrachten