jPlayer Video Player

Details: Donnerstag, 08. September 2011; by Tappi

Alle Kontrollelemente sind pures HTML+CSS. Steuerung erfolgt über Javascript.

Das einzige Markup was der Benutzer auf der Seite erstellen muss:
<a href="/...video_file.webm" class="video-player">Linktext</a> <a href="/...video_file.m4v">optionale zweite Quellenangabe</a> <a href="/...posterimages.jpg">optionales Posterbild</a>
Als Quellen werden unterstützt und automatisch erkannt: webm, ogv, m4v, flv, mp3, jpg, png. Anzahl der Quellen ist nicht begrenzt. Die Reihenfolge der Quellen bestimmt ihre Präferenz. M4V vor FLV würde zum Beispiel FLashwiedergabe mit MP4 vor FLV wiedergabe präferieren. Einzige Bedingung ist das die Links in einer Zeile und nicht in weitere Dom Elemente(Paragraph, span) gewrappt sind.Sichtbar bleibt nur der Link mit der Klasse 'video-player'. Die anderen werden in Variablen gespeichert und aus dem DOM enfernt.

Video Player:

Quelle mit WebM, Mp4, Flv

Quelle mit WebM

Droplet mp4 flv Dropletposter

Trash Posterimage

Quelle mit WebM, Flv

Quelle mit WebM, Mp4, Flv

Putzt Sie Weg Flash only Quelle FLV Poster Bild

Webm + M4V + FLV M4V 3D Reel FLV Poster

Demo in 480p:

Droplet 480p WebM

Audio player:

Beispiel 2 Mp3

Beispiel 1 Mp3

Kompatibilität:

Internet Explorer 9 & <9 - wird auf Flash forciert, zwar ist eine WebM Wiedergabe nach Installation Webm for IE9 möglich, aber es kommt je nach Rechnerkonfiguration zu teils drastischen Fehlern(Blue Screen an meinem Laptop), MP4 ist nur bei deklariertem DOCTYPE !HTML(html5) darstellbar
Chrome - präferiert Flash bei Mp3, ansonsten funktioniert der Preload und der Fortschrittsbalken nicht, verwendet Html für WebM, Mp4 support wird von Google demnächst eingestellt
Safari+iOS Geräte ünterstützten nur Mp3 und Mp4 in Html, bisher nur unter Safari/Win getestet
Opera 11 und FIrefox >5 anstandslose Support von WebM, OGV und Mp3
Firefox <4 unterstützt nur OGV und OGA > Flashfallback