QuickTip: WordPress HTML5-Video-Settings

Heute gibt’s mal einen wirklich kleinen, aber alles andere als unwichtigen QuickTip für alle diejenigen, die in ihren WordPress-Blogs eigene Videos via HTML5 einbinden. Das „Problem“ bei den Standard-Settings von WordPress ist, dass Videos bereits beim Aufruf der Seite vorgeladen werden. Das geht nicht nur auf euren Traffic, sondern müllt auch die Leitung des Besuchers voll, der vielleicht gar nicht das Video ansehen möchte.

Was kann man dagegen tun? Ziemlich simpel, man muss es nur mit einer kleinen Einstellung im Video-Shortcode verbieten!

Nachfolgend einmal der Shortcode mit allen möglichen Parametern inkl. Video-Fallbacks usw.

[ video mp4="http://.../videofile.mp4" ogg="http://.../videofile.ogg" webm="http://.../videofile.webm" poster="http://.../startscreen.png" preload="false" autoplay="false" width="1920" height="1080"][/video]

(Das Leerzeichen beim/vor dem ersten Video-Tag entfernen!)

Entscheidend ist die Angabe preload=“false“, ist diese eingefügt, wird das Video auch nicht einfach vorgeladen. Mit der Angabe für „Poster“ kann das Startbild des Videos vor dem ersten Anklicken festgelegt werden. Noch ein kleiner weiterer Tipp: Achtet unbedingt darauf, dass die Metadaten der Videodaten am Anfang der Datei und nicht wie bei einigen Videoconvertern am Ende geschrieben werden. Das hat den Vorteil, dass das Video umgehend startet und nicht erst vollständig durchgeladen werden muss. Bei den alternativen Formaten (mp4/webm/ogg) darauf achten, dass ihr die identische Auflösung beim konvertieren erhaltet, sonst kann es u. U. sein, dass im Firefox-Bowser das WebM-Video mit einer falschen Größe im vermeintlichen MP4-Player angezeigt und abgespielt wird.

Kleine Anmerkung am Rande noch: Reine WebM- und OGG-Videos laufen minimal an und laden dementsprechend durch. MP4-Videos sollten Poster-Startscreens hinterlegt bekommen, da der Player sonst einfach hässlich grau bleibt. Bei kombinierten Videos (Fallbacks) klappt’s. Startscreens werden überblendet, sobald das Video selbst einen Startscreen hergibt (z. B. in Firefox).

Wen es noch genauer interessiert:

Chrome (30) auf OSX: WebM (V8) startet automatisch; OGG (Theora) sowie MP4 starten mit oben genannten Einstellungen nicht automatisch und zeigen Startscreens ohne Poster-File an (alle drei). In Kombination wird kein Poster angezeigt und nichts vorgeladen (getestete Variationen: MP4+WebM+OGG; MP4+OGG+WebM; WebM+OGG+MP4; OGG+Web+MP4).

Firefox (24) auf OSX: WebM und OGG laden vor und zeigen Poster an, MP4 zeigt kein Poster an, lädt aber nicht vor. In Kombinationen zeigen alle Poster an und laden vor (WebM bevorzugt). Befindet sich ein WebM/OGG alleine in einem Post, wird dieses Video automatisch abgespielt, egal was die Settings sagen oder wie die Kombination ist. Sprich, ein Post mit einem Video, in dem eine Kombination aus WebM, OGG und MP4; WebM und MP4; OGG und MP4 eingebunden sind, werden automatisch abgespielt. MP4 alleine wird in Firefox-Version vor V.21 sowie bei Opera zu Problmen führen.

Safari (6) auf OSX: WebM und OGG lassen sich weder anzeigen, noch abspielen. MP4 mit Metadaten am Anfang lädt vor und spielt automatisch ab. MP4 mit Metadaten am Ende lädt vor, spielt aber nicht automatisch ab. In Kombination werden Poster angezeigt, jedoch nicht automatisch abgespielt (MP4 mit Metadaten am Ende eingebunden).

Meine empfohlene Kombination: Poster + OGG + MP4.

WebM nur verwenden wenn man lange und dementsprechend große Videos einbindet, da hier die hervorragende Komprimierung dem automatischen Vorladen wieder entgegen kommen kann – ansonsten vorerst auf WebM verzichten, da OGG bzw. OGV bereits deutlich bessere Dateigrößen hervorbringt. In meinem Test vom Original in 720p30 mit 75,7 MB als MP4 auf 21,7 MB mit einem besser komprimierten MP4; 25,2 MB als OGG und nur 3,5 MB als WebM – alles noch in 720p, wobei das WebM deutlich in der Bildqualität verlor. OGG wird übrigens noch besser unterstützt als WebM, was man hier nachsehen kann: http://en.wikipedia.org/wiki/HTML5_video#Browser_support

Ein Fazit? Ja, einen Video-Player wie z. B. Video.js verwenden. MediaElement bringt es für meinen Geschmack in der WordPress-Out-of-the-Box-Version leider nicht richtig. Eine wunderbare Übersicht der Videoplayer gibt’s hier zu bestaunen: http://praegnanz.de/html5video/. Mein Tipp wäre der Projekktor, den es aktuell aber nicht als fertiges WordPress-PlugIn gibt.

  • Rechtsanwalt Strafrecht Berlin

    Danke für den Tip :)
    Auch Top, das du den Quellcode gleich mit hergibst. Konnte es ganz easy für mich übernehmen.
    Großartig auch die beschreibungen für die einzelnen Browser!
    Ich eigne mir zur Zeit HMTL5 kenntnisse an und muss sagen es lohnt sich total, es ist auch viel einfacher als der Vorgänger!

    Grüße Richard
    Rechtsanwalt Berlin

  • Manuel

    Was sagst du den zu den ganzen Video Playern unter WordPress?
    Gibt echt viele aber weiß nicht welche gut sind.