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: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.
<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>
Video Player:
|
Quelle mit WebM, Mp4, Flv |
Quelle mit WebM |
|
Quelle mit WebM, Flv |
Quelle mit WebM, Mp4, Flv |
Demo in 480p:
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