Kommentare 15

Ein Browser-kompatibler HTML5 Audio Player für WordPress

Um eigene Audio-Dateien von Songs oder Podcasts auf einem WordPress-Blog veröffentlichen zu, benötigt man einen passenden Audio-Player. Mit Hilfe des HTML5-Tags <audio> ist es zwar heute schon möglich einen Browser-internen Player zu nutzen, doch leider wird diese Option derzeit noch nicht von allen Browsern unterstützt. Bis dahin kann man mit Hilfe von JavaScript eine Übergangslösung anbieten, um so auch ein Fallback für ältere Browser parat zu haben. Für WordPress kann man z.B. das Plugin MediaElement.js nutzen, um eigene Audio- und Video-Dateien Browser-kompatibel abspielen zu können. Ich habe das Plugin getestet und die wichtigsten Optionen zusammen gefasst.

Das MediaElement.js WordPress-Plugin

Das WordPress-Plugin MediaElement.js ist eine praktische Option, um Audio- und auch Video-Dateien in einem WordPress-Artikel oder auf einer Seite anzeigen zu können und dabei die modernen HTML5 Elemente <audio> und <video> zu nutzen. Für ältere Browser kommen dann als Fallback-Lösung individualisierte Flash und Silverlight-Plugins zum Einsatz, die an die Funktion der modernen HTML5 MediaElement-Payer angeglichen sind.

WordPress HTML5 Audio und Video Player

Der Video- und Audio-Player von MediaElement.js in der Standard-Ansicht.

Auf der Webseite MediaElement.js kannst du die Player in einer Live-Demo testen.

Mit Hilfe der WordPress-Plugin Lösung von MediaElements.js kannst du dann also deine Dateien in den Formaten MP3, MP4, OGG, WebM, WMV, WAV und WMA über die Media-Uploadfunktion in WordPress hochladen, die URL deiner Datei kopieren und diese dann mit Hilfe der Shortcodes [audio] oder [video] in eine Seite oder einen Artikel deines Blogs integrieren.

WordPress HTML5 Audio und Video Player

Eine Audio-Datei mit Hilfe der Media-Uploadfunktion in WordPress hochladen.

Die Shortcodes

Diese Standard-Shortcodes für Audio und Video kannst du jetzt in einen Artikel oder eine Seite einfügen:

Zusätzlich stehen dir noch weitere Shortcode-Optionen zur Verfügung: Mit volume="false" kannst du z.B. den Volumenslider des Players deaktiveren, mit duration="false" die Zeitangabe ausschalten, mit fullscreen="false" die Vollbild-Option deaktiveren, mit autoplay="true" deine Datei automatisch abspielen lassen usw.

Eine komplette Auflistung aller Shortcode-Optionen findest du in der MediaElement.js Plugin-Beschreibung bei WordPress.org.

Die Plugin-Einstellungen

In den Einstellungen des Plugins in deinem WordPress-Adminbereich kannst du außerdem noch die Standard-Maße für Videos und Standard-Dateiformate für Audio- und Video-Dateien festlegen.

WordPress HTML5 Audio und Video Player

Plugin-Einstellungen des MediaElement.js WordPress-Plugins.

Neben der bereits für WordPress vorbereiteten Plugin-Lösung kannst du das JavaScript-Element natürlich auch selbst auf einer Webseite integrieren. Auf der Webseite MediaElementjs.com findest du hierfür alle wichtigen Infos.

Weitere HTML5 Audio- und Video-Player

Natürlich gibt es nicht nur die MediaElement.js Lösung. Eine Übersicht verschiedene HTML5 Player und ihrer Funktionen findest du z.B. auf der Seite “HTML5 Video player comparison”.

Hier werden 20 Player nach den Kriterien Lizenz, JavaScript Library, Flash Fallback, iOS, FullScreen, Keyboard, Subtitles, leicht zu integrieren und leicht zu stylen in einer übersichtlichen Liste verglichen.

Ein weiterer HTML5 Audio und Video Player mit WordPress-Plugin Lösung ist außerdem der jPlayer. Die WordPress-Plugin Lösung für den jPlayer MP3-jPlayer bietet beispielsweise jede Menge Einstellungsmöglichkeiten und ein Sidebar-Widget an. Auch das ebenfalls beliebte Haiku minimalist audio player-Plugin baisiert auf dem jPlayer als Lösung.

Hintergrund-Infos zum HTML5-Tag audio

Ein sehr hilfreicher Artikel zum Thema HTML5 mit Hintergrund-Infos zu den Möglichkeiten des HTML5-Tags <audio> ist “Native Audio in the browser” bei HTML5 Doctor.

Kennst du weitere Artikel, Plugin-Lösungen oder Tipps, um einen modernen Audio- oder Video-Player in WordPress zu integrieren? Über deine Erfahrungen, dein Feedback und weitere Tipps freue ich mich sehr!

15 Kommentare

    • Hallo Vincent,

      vielen Dank für deinen Kommentar, oh ja, der ZEN Player ist ja wirklich auch sehr hübsch. Ich habe gerade gelesen, dass er auch auf dem jPlayer basiert. Da kann man wohl mit Hilfe von CSS3 noch so einiges machen. Da werde ich auf jeden Fall mal genauer reinschauen :-)

      Bzgl. WordPress-Seite für Musik: Hast du dir schon einmal das Free-Theme “Mixtape” von Allan Cole angeschaut? Das finde ich auch eine sehr schöne Lösung für einen Musik-Blog :-)

      Viele Grüße,
      Ellen

  1. Hi Ellen,
    das Audio-Theme gefällt mir auch recht gut. Weißt du wie der Player dort integriert ist? Da es ein älteres Theme ist, wird das nicht HTML5-kompatibel sein, oder?

    Viele Grüße

  2. Hallo Ellen,
    vielen Dank für den tollen Artikel un den Plugin-Tipp. Hab Ihn installiert und er funktioniert ansich auch sehr gut. Hätte trotzdem noch ein paar Kleinigkeiten die ich nicht gelöst bekomme:
    - Wenn man auf die Play-Taste drückt, fängt das Lied an zu spielen, der Lautstärkeregler ist aber erst mal auf Lautlos gestellt, so das man nichts hört. Hab versucht das Problem mit folgendem Code zu umgehen:
    [audio src="http://jen-music.de/music/119 - The Girl From Ipanema.mp3" startVolume: "0.8"]
    Hat aber leider nicht funktioniert, vielleicht hast du ja einen besseren Tipp für mich.
    Die zweite Frage ist mehr allgemeiner Natur: Ist es möglich mit dem MediaElement.js auch eine Playlist abzuspielen?

    Würde mich sehr über eine Antwort freuen.
    Liebe Grüße aus München
    Sarah

  3. Fabian

    Unter NGINX, klappt natürlich mal wieder garnix. Ich mein, sind die alle zu doof so zu Programmieren, dass es NICHT NUR auf Apache läuft?! Und NGINX ist jetzt wohl nicht gerade ein Nieschenbrowser. Bei der Zuwachsrate sollte sich Apache mal lieber ganz schnell verkriechen.

  4. gülin

    hallo ellen Gibt es eine Möglichkeit , ich möchte in meinem sender (flatcast) mit clip senden ob das auch möglich ist . wurde mich freuen wen du mir einen tip geben kanst.

    Mfg

  5. Liebe Ellen,
    es ist immer wieder eine Freude Deine Tipps zu lesen. Heute hatte ich das Problem, dass mein Video in allen Browsern außer dem IE8 lief. Dann habe ich Deinen Artikel gefunden und binnen ein paar Minuten funktionierte alles. Das liebe ich, wenn ein Artikel so geschrieben wurde, dass ich es auch nachvollziehen und anwenden kann. Vielen, herzlichen Dank dafür.

    Jutta van Straelen
    MangoMax Team

  6. Hi Ellen,
    nochmal ich, stimmt, was Martin geschrieben hat.

    (MediaElement.js ist sehr gut, aber funktioniert leider nicht mit den responsiven Themes von Elmastudio.)

    Ich lasse es jetzt erst mal so, wenn Du eine Lösung hast würde ich mich freuen, wenn Du sie mit mir teilst.

    Grüße Jutta

  7. Rolf

    Hallo,

    ich nutze mit WP den MediaElement.js player. Habe jedoch massive Probleme mit dem Vorschaubild. Wenn das Video mit dem normalen Code eingegeben wird wie z.B:

    [video mp4="http://www.domain/video_01.m4v"]

    erscheint schon mal kein Vorschaubild.

    Wenn ich das ganze dann ergänze mit

    poster=”http://www.domain/bild_01.png”

    wird zwar das ausgewählte Vorschaubild angezeigt, jedoch nach rechts und unten versetzt im Verhältnis zum Player. Also nicht genau über dem Player.

    Hat da jemand eine Lösung?

  8. Marius

    Hi Rolf,

    der poster Eintrag skaliert mir das ausgewählte Bild über den ganzen Player.
    Als Beispiel, habe ich ein png mit einem Kreis (200×200) erstellt und in den MediaElement.js eingebaut.
    [video width="1280" height="720" mp4="/temp/test1.mp4" ogv="source.ogv" webm="source.webm" poster="/temp/test1.png"]
    Hier wird das Bild über 1280×720 gestretched, so ergibt sich ein unproportionales Bild, das aber den Playerbereich komplett abdeckt (ovaler Kreis in der Horizontalen)

    Gruß, Marius

Schreibe eine Antwort