Tutorial: Video als sprechendes Blogger-Foto

Viele Blogs zeigen mit einem Foto, wer hier schreibt. Das schafft Vertrauen. Doch wie wäre es, wenn das Foto lebendig wäre und dem Besucher gleich erzählt, um was es im Blog geht? Also ein Video im Foto-Format, das brav darauf wartet, durch einen Klick zum Leben erweckt zu werden. Im “Blog ohne Diät” habe ich genau das gemacht. Wie man dabei vorgeht, will ich kurz erzählen.

Schritt 1: Das Video

Zuerst benötigt man ein Video. Wie man das macht, bleibt eigentlich jedem selbst überlassen. Theoretisch könnte man einfach sein Video-Handy nehmen und loslegen. Da dieses Video aber das Aushängeschild für das Blog werden soll, empfehle ich mehr Aufwand. Also ein Stativ für die Kamera sollte schon sein und auch was im Hintergrund zu sehen ist, spielt eine Rolle. Dieser sollte zum Design des Blogs passen. Aber man kann mit Videobearbeitungs-Software auch hinterher noch einiges rausholen.

081212-blogvideo-original.jpg
Der Rohfilm mit blauer Tischdecke als Hintergrund. Diese kann im Videoschnittprogramm per Bluebox ausgeblendet werden.

Schritt 2: Konvertieren

Videos im Internet sind meist Flash-Videos. Diese haben das Format FLV. Es gibt von Adobe im Flash-Paket ein kleines Hilfsprogramm zum Konvertieren von Mediendateien. Alternativen dazu sind im Netz reichlich zu finden. Der Original-Konverter kann nebenbei noch den Bildausschnitt verändern. Das ist praktisch, weil die Aufnahme meist im Querformat vorliegt, aber ein Hochkant-Foto sich besser macht. Überflüssiges wird also einfach links und rechts abgeschnitten. Generell wird man ein eher kleines Format wählen. Ich habe das Video aus dem Schnittprogramm mit 196×144 Pixeln ausgegeben. Dieses wurde dann beim Konvertieren links und rechts beschnitten. Das Resultat ist ein 140×144 Pixel Filmchen. Speichern wir das Ergebnis doch als blog-video.flv.

081212-blogvideo-kodierung.jpg
Die Konvertierung mit dem Macromedia Flash-Video-Konverter und Einstellungen zum Bildausschnitt.

Schritt 3: Player

Um einen solch speziellen Film einzubinden, eignen sich die bekannten Video-Portale nur bedingt. Ein eigener Player, den man konfigurieren kann, ist besser. Nach kurzer Suche fiel die Wahl auf den Flowplayer. Dieser steht unter GPL, ist aber nur in der kleinsten Version kostenlos. Diese reicht aber völlig für unsere Bedürfnisse. Laut Spezifikation funktioniert er mit allen aktuellen Browsern.

Das Schöne ist die Übersichtlichkeit mit der dieser Player glänzt. Nach dem Entpacken des Download-Archivs finden sich neben den wichtigen Dateien gleich ein Minimal-Beispiel. Für unsere Zwecke kopieren wir die beiden SWF-Dateien und die JS-Datei aus dem Beispiel-Verzeichnis (example) auf den Webserver. Das blog-video.flv nehmen wir gleich noch dazu. Dann haben wir alle vier Dateien in einem Verzeichnis, das beispielsweise blog-video heißt.

081212-blogvideo-verzeichn.jpg
Verzeichnis nach dem Hochladen auf den Server.

Schritt 4: Einbinden

Um das Video nun im Blog anzuzeigen, brauchen wir noch den richtigen HTML-Code. Dieser konfiguriert den Player so, dass in der Kontrollleiste nur ein Play-Button und die Zeitleiste angezeigt werden. Für mehr wäre nämlich kein Platz. Allerdings benötigt die Leiste selbst 24 Pixel, weswegen der Film etwas höher wird. Im Prinzip besteht der Player aus einem Link auf das Video, wobei ein Script dieses Konstrukt dann in den Player umwandelt. Der Code sieht so aus (die Adressen (www.blog_url.de) müssen natürlich angepasst werden):

<script type="text/javascript" xsrc="https://www.blog_url.de/blog-video/flowplayer-3.0.0.min.js" mce_src="https://www.blog_url.de/blog-video/flowplayer-3.0.0.min.js"></script>
<a xhref="http://www.blog_url.de/blog-video/blog-video.flv" mce_href="http://www.blog_url.de/blog-video/blog-video.flv" style="display:block;width:140px;height:168px" id="player"><img xsrc="https://www.blog_url.de/blog-video/blog-video.jpg" mce_src="https://www.blog_url.de/blog-video/blog-video.jpg" border="0"></a>
<script>
flowplayer("player", "http://www.blog_url.de/blog-video/flowplayer-3.0.0.swf", {
plugins: {
controls: {
all:false,
play:true,
scrubber:true
}
},
clip: {
url: 'http://www.blog_url.de/blog-video/blog-video.flv',
autoPlay: true
}
});
</script>

Der Player ist so konfiguriert, dass er erst nach dem Klick das Video lädt, dann aber gleich abspielt. Davor wird ein Bild angezeigt.

Welches Bild?

Das ist noch zu erstellen. Am einfachsten ist es, das Video einfach abspielen zu lassen und mittendrin einen Screenshot zu nehmen. Diesen beschneidet man auf das eigentliche Video und speichert ihn als blog-video.jpg wieder im gleichen Verzeichnis auf dem Webserver, wo die anderen Dateien auch schon liegen. Wer vor dem Screenshot den Film pausiert, hat gleich einen optischen Play-Button im Bild. Der Anwender sieht also gleich, dass er ein Video abspielen kann. Das ist durchaus sinnvoll. Allerdings wird der Button vermutlich mitten über dem Gesicht liegen, was nicht wirklich gewollt ist. Ein wenig Nachbearbeitung des Bildes schadet deswegen nicht.

081212-blogvideo-video.jpg
Das statische Bild, das zum Anklicken verführen soll.

Das war es dann aber auch schon. Der Blog-Besucher sieht das statische Bild und erkennt, dass es per Klick abgespielt werden kann. Dann lädt sich das Video und erzählt, um was es im Blog geht. Ein super Service für neue Besucher. Zumindest wenn man sich ein wenig Mühe gibt, sonst schreckt es vielleicht eher ab. 8-)

Jetzt neu: „Kanban – Die schnelle Einführung“

Kanban – Die schnelle Einführung
(Coverfoto: © fizkes, depositphotos.com)

Mehr über die Inhalte erfahren ...

 

Ein Gedanke zu „Tutorial: Video als sprechendes Blogger-Foto

  1. Super Sache! Find ich für den Leser als Einstieg in den Blog und für die perönliche Bindung sehr ansprechend. Problem könnte höchstens sein, dass über Bewegtbilder sehr viele Emotionen transportiert werden, und bei persönlichem Missfallen ev. auch ein Blog mit guten Inhalten plötzlich durchfällt. Man sollte also möglichst videogen sein bzw. zielgruppengerecht rüberkommen, um nix zu verspielen…

Kommentare sind geschlossen.