Neues Feature: Einbettbarer HTML5-Player

Ich habe den Player für die Episoden im Portal ersetzt. Dort kommt jetzt eine angepasste Version des großartigen HTML5-Player Projekktor zum Einsatz.

Im Smartphone Portal hatte ich bereits einige Erfahrung damit gesammelt und mich jetzt für die Integration im Portal entschieden. Technisch funktioniert der Player so, dass eine Datei mit den Browser-eigenen Abspielmöglichkeiten via <video>-Tag abgespielt wird, wenn der Browser das Format unterstützt. Ist das nicht der Fall, wird die Datei mit Flash geladen. So kann bereits ein große Anzahl an Mediendateien direkt online wiedergegeben werden. Der Autor von Projekktor – Sascha – arbeitet ständig an einer noch besseren Kompatibilität, so dass die heute bei einigen Videos auftretende Meldung, dass ein Inhalt nicht abgespielt werden konnte, in Zukunft noch seltener kommt.

Den neuen Player kannst du für einzelne Episoden in die eigene Webseite einbinden. Gehe auf die Detailseite einer Episode, z.B. eine Folge des Hörspiels Johnny Dollar. Dort findest du auf der rechten Seite bei den Icons einen Punkt „Player einbinden“. Klicke auf den Link, um eine kleine Textbox zu öffnen. Kopiere den Code, den du jetzt siehst. Den kopierten Code musst du an der Stelle in deine Webseite kopieren, an der der Player erscheinen soll. Das Ergebnis sieht in diesem Fall wie folgt aus:

Hörspiel Johnny Dollar – Folge 118: The Millard Ward Matter

Für die Profis gibt es einige Einstell-Optionen. Wenn wir uns den Code ansehen, finden wir einen iframe mit dem Attribut src. Dem Link werden einige Parameter übergeben (n|p|s).

<iframe src="http://www.podcast.de/player.html?t=audio/mpeg&n=&p=http://www.podcast.de/images/Feed/Channel/19032/1/19032.png&s=http%3A%2F%2Fhoerspiele.podcaster.de%2Fjohnny-dollar%2Fmedia%2FHoerspiel_Johnny-Dollar_118_The_Millard_Ward_Matter.mp3" style="width:440px;height:260px;border:0;" border="0" frameborder="0" scrolling="No"></iframe><br /><a href="http://www.podcast.de/episode/2682550/H%C3%B6rspiel+Johnny+Dollar+-+Folge+118%3A+The+Millard+Ward+Matter/" style="font-size:small;">Hörspiel Johnny Dollar - Folge 118: The Millard Ward Matter</a>

Das p steht für Poster (Logo), bzw. Picture (Bild) und bestimmt das Bild, das im Player angezeigt wird. Dort kannst du auch ein anderes Bild wählen, wenn dir danach ist.

Das s steht für Source (Quelle) und bestimmt, welche Mediendatei im Player geladen werden soll. Ihr könnt den Player also auch für eine beliebige, andere Mediendatei verwenden. In dem Falle freue ich mich über einen kleinen Hinweis auf podcast.de unter dem Player.

Das n, welches in diesem Falle leer ist, steht für Next (hier: danach). Darüber wird angegeben, welche Webseite nach dem Abspielen der Episode als nächstes geladen werden soll.

Das t steht für Type (Typ) und bestimmt den Medien-Typ. Dieser sollte korrekt angegeben werden, sonst funktioniert die Wiedergabe mit hoher Wahrscheinlich (im Moment) nicht. Für MP3 wäre das z.B. audio/mpeg.

Autoplay – also das automatische Abspielen nach Laden des Players wie im Portal – lässt sich durch Anhängen des Parameters autoplay ebenfalls aktivieren.

Die Größe des Players lässt sich über die Styles des iframe ändern. Einfach width und height anpassen. Der Player selbst verkleinert/vergrößert sich dann entsprechend.

Gefällt dir der Player? Hast du Fragen oder Anregungen zum Player, hinterlasse bitte einen Kommentar!