Wenn man Videos in WordPress einbinden will, sollte man zuerst überlegen, welches Format die Videos haben sollen. Unsere Videos sollen so ziemlich auf jedem Gerät abspielbar sein, daher wählen wir den Codec H.264 und den Container mp4. Dieser wird von den meisten Browsern sowie von mobilen Endgeräten wie dem iPhone unterstützt. Falls unsere Ausgangsvideos nicht in dem gewünschten Format vorliegen, müssen wir diese erst noch konvertieren. Dieses erledigen wir mit einem Konvertierungstool, das unseren Ansprüchen genügt. Da ich pesönlich an einem Mac arbeite, empfehle ich hier das kostenlose Tool „Video Monkey„.
Nachdem wir unsere Videos nun bearbeitet und konvertiert haben, können wir uns darum kümmern WordPress so zu erweitern, dass unsere Videos in einem Player auf der Seite direkt abgespielt werden können. Denn WordPress bietet in der Standardausgabe nur den Download von Videos an. Nun wie wir wissen können wir WordPress mit Plugins erweitern. In diesem Fall laden und installieren wir uns das Plugin „Viper’s Video Quicktags“. Dieses Plugin hilft uns dabei die richtigen Tags im Artikel zu verwenden und gleichzeitig bringt es einen Videoplayer mit.
Zuerst müssen wir das Plugin konfigurieren, dazu gehen wir im Admin zu dem Menüpunkt „Plugins“ und „Plugins anzeigen“. Hier öffnen wir nun die „Settings“ für das Plugin „Viper’s Video Quicktags“.
Unter dem Punkt „General“ haken wir nun, die Media Types „Flash Video“ und „Generic Video File“ an. Für unsere Anforderungen reicht das, denn wir wollen nur Videos einbinden die auf unserem Server liegen. Wie man in der Ansicht sieht, ist es mit dem Plugin problemlos möglich auch Videos von Videoportalen wie Youtube einzubinden. Wie man sieht kann man noch einige weitere Einstellungen machen, auf die ich jetzt nicht eingehen werden, probiert es einfach selber aus. Wir gehen nun in unseren Artikel, indem wir unsere Videos platzieren wollen. Wie man nun sieht haben wir jetzt im Editor die Optionen „FLV“ und „Video File“ hinzubekommen. Mit einem klick auf einen der beiden, müssen wir nun die Adresse(Url) unseres Videos eingeben und man kann noch die Größe des Videos in Pixeln angeben. Wir müssen allerdings auch für die andere Optionen nochmal das gleiche machen, so dass wir das Video quasi zweimal einbetten.
FLV ist für alle Flashfähigen Endgeräte und Video File für alle nicht Flashfähigen Endgeräte wie zum Beispiel das iPhone. Über JavaScript finden wir nun heraus welches Endgerät auf unserer Seite unterwegs ist und laden in Abhängigkeit des Endgerätes die passende CSS- Datei. Das Script seht Ihr in der Abbildung. Der Code muss in die header.php des Themes, das benutzt wird, eingebaut werden.
Jetzt brauchen wir natürlich noch die CSS-Datei, die in den Ordner des aktuellen Themes abgelegt werden muss. Die Datei mobile.css hat folgenden Inhalt:
span.vvqflv {
display: none;
}
span.vvqvideo {
display: block;
}