WordPress Videoplugin

Mein MarcTV Video Plugin für WordPress hat ein wichtiges Update mit der Nummer 2.6 erhalten. Neu sind die Integration von nachgelagertem Laden des Videoplayers nach Interaktion des Benutzers, Google Analytics Events, oEmbed Unterstützung und einer automatischen Anpassung des Players an das Elternelement im DOM. Letzteres ist besonders interessant für Webseiten mit Responsive Design.

Kein Flash, kein HTML5

Beim Einbetten wird ausschließlich das Vorschaubild von Vimeo und YouTube geladen. Da Videos in 16:9 abgespielt werden aber das Vorschaubild nur in 4:3 vorliegt, schneidet das Plugin das Bild entsprechend zu und setzt neben einem schicken Mouse-Over noch einen Play-Button drauf. Erst nach dem klicken wird der Player von Vimeo oder YouTube vom Server geladen. Das spart Bandbreite, geht schneller und in der Bildvorschau in der Googlesuche wird der Player angezeigt. Wohoo!

Google Analytics Events

Innerhalb der letzten Monate habe ich viel über die Funktionsweise von Google Analytics gelernt. Unter anderem auch über die Definition und Auswertung von sog. Events. Das Plugin sendet zwei dieser Events mit dem Titel des Videos als Label asynchron an Google: play und error. Das erste Event play sollte klar sein. Das Zweite namens error wird ausgelöst, wenn das Videos nicht abgespielt werden konnte. Der Grund des Fehler wird dabei zusätzlich zum Titel als Label übergeben. So kann man die Videos auf seiner Webseite nicht nur zählen sondern wird auch informiert, wenn ein Video mal wieder wegen der GEMA gesperrt wurde.Yeah!

Responsiveness

Bisher habe ich meine eingebetten Video-Player immer per CSS über Media-Queries in der Größe angepasst. Da hier aber das Bild vom YouTube bzw. Vimeo Server zugeschnitten wird und ich das ohnehin in Javascript mache, passt sich der Player einfach an das Elternelement im DOM an. Im Idealfall muss man so nichts mehr per Hand stylen. Yee-ha.

Einbetten mit oEmbed

oEmbed sind seit einiger Zeit in WordPress eingeführt worden. Das ist ein Standard, um verschiedene Inhalte wie Videos, Tweets usw. in in die Seite einzubetten aber im Artikel möglichst keine Embed-Codes unterzubringen. Videos, die mein Plugin später einbettet, konnten schon immer über simples HTML unaufdringlich und zukunftssicher im Artikel untergebracht werden:

<a href="http://www.youtube.com/watch?v=atVFr_RbQUI">Batman - Arkham City</a>

So hat man ohne Javascript zumindest einen Link zum Video im Artikel und keinen hässlichen Flash-Embedcode. Nun gibt es aber die neue Embedfunktion von WordPress, die einfach über die nackte URL funktioniert:

http://www.youtube.com/watch?v=atVFr_RbQUI

Wenn man aber den Titel mit einem Link zum Videos einbetten will, dann geht das mit oEmbed folgendermaßen:

http ://www.youtube.com/watch?v=vvNtvThPqKE

Ich persönlich finde zwar, dass die Lösung über HTML schöner und sicherer ist als diese Syntax mit den eckigen Klammern aber vielleicht hat jemand die oEmbed Codes schon ewig genutzt und will nun nicht mit Search & Replace in MySQL und einem RegEx seine Datenbank umwandeln. Boooh!

Demo

Das Plugin läuft natürlich hier im Blog in jedem Artikel in dem ein Video zu finden ist. Hier ist aber ein direktes Beispiel in Form eines besonders schönen Videos:

Video

Download

Das Plugin kann wie alle MarcTV WordPress Plugins auf WordPress.org im Repository runtergeladen werden. Für Anregungen und Wünsche bin ich wie immer sehr dankbar.

4 Antworten auf „WordPress Videoplugin“

  1. Hi Marc,

    das ist ja schon sehr geil mit automatischem Google Event Tracking!

    Als Anregung fände ich noch super:

    * Möglichkeit das »Ligth-Theme« auszuwählen
    * Möglichkeit den Link zurück zu YouTube (unter dem Video) zu entfernen

    Ansonsten, vielen Dank für das tolle Plugin.

    P.S. Funktioniert das auch mit Universal Analytics?

    1. Hi Marius,

      * Möglichkeit das »Ligth-Theme« auszuwählen
      * Möglichkeit den Link zurück zu YouTube (unter dem Video) zu entfernen

      Also nur theme=light nehme ich an. Ja, ich wollte das Plugin ohnehin mal überarbeiten.

      Den Link zum YT Video könntest du per CSS ausblenden. Also mit

      .jqvideo .wp-caption-text {
      display:none;
      } 
      

      Universal Analytics habe ich selber noch nicht aktiviert. Ich denke also nicht, dass es funktionieren wird, weil die Events anders sind. Ich gucke mir das auch mal an. Gerne auch das Modul forken! Dann hole ich mir den Code rein. Ärgerlich, dass WP nicht auf git läuft. =/

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.