abgekliert

Blog Angekliert Über abgekliert Übersicht


<< Handy Gewinnspiel >> Probleme statt Lösungen



Autoren-Video statt Autoren-Foto im Blog


Ich habe im Blog ohne Diät ein Foto von mir, wie es viele Blogger haben. Der Besucher sieht sofort, mit wem er es zu tun hat. Eine prima Sache. Manche erklären mit einem Text auch kurz, um was es im Blog geht oder bieten einen Link auf diese Informationen an. Da dachte ich mir, warum kann man das nicht verbinden? Warum sollte man das Foto nicht einfach anklicken können und es zum Leben erwecken?

Genau das habe ich nun gemacht.

Hier kann man das leider nicht anklicken. Da haben die Sicherheitsrichtlinien von Javascript was dagegen. Wer es fertig sehen will, der sollte rechts oben im Blog ohne Diät gucken.

Hier eine Anleitung zum nachbauen.

Der Film:

Als erstes braucht man ein Video. Das ist gar nicht so ohne. Ich habe mir zwei Baustrahler mit je 500W angeschafft, die Videokamera aufs Stativ geschraubt und mir eine Stelle im Haus gesucht, die einen passenden Hintergrund hat. Das war dann doch nichts, also ein Laken aufgespannt. Dieses lies sich nicht so leicht wegblenden, weil es immer noch viel zu dunkel war. Schon der Wahnsinn, wie viel Watt man verbrät und trotzdem reicht es nicht. Jedenfalls sollte man zwingend vorher auf Öko-Strom umsteigen, sonst kann man das ja gar nicht rechtfertigen. 8-) Nach vielen Versuchen habe ich eine blaue Tischdecke hinter mir aufgehängt, die lies sich am besten im Videoschnittprogramm herausfiltern. Gut ging auch das nicht, aber das Endprodukt ist dann so klein, dass es nicht mehr auffällt. Den Hintergrund im Video habe ich durch eine Grafik ersetzt, die zur Website passt. Das Video soll sich ja möglichst gut in das Design einfügen. Den Text habe ich übrigens ausgedruckt und an der Kamera befestigt. Nach 5 Versuchen mit Verhasplern fand ich das dann einfacher.

Das Format habe ich bei 4:3 belassen und mit verschiedenen Größen als MPG2 exportiert. Zwischen 160x120 bis 200x150 habe ich immer wieder probiert und dann beim Konvertieren in das benötigte Flash-Video-Format FLV Links und Rechts etwas abgeschnitten, so dass die Breite 140 Pixel betrug. Dadurch ergibt sich dann das Hochkant-Format. Der Converter kann das in den Erweiterten Einstellungen. Ich habe glücklicherweise das Flash 8 Komplettpaket, wo der Converter dabei ist. Mit Super, eine sehr empfehlenswerte Video-Umwandlungs-Software, kann man auch in FLV konvertieren, das hat bei mir aber nicht funktioniert.

Der Player:

Nun brauchen wir einen Player. Ich habe mich für die kostenlose Variante des Flowplayer entschieden. Der scheint recht flexibel und ist umfangreich konfigurierbar. Die Bedienelemente dürfen nicht zu viel Platz einnehmen, wenn nur 140 Pixel Breite zur Verfügung stehen, das geht mit dem Flowplayer.  Der Download ist erfreulich übersichtlich und enthält gleich ein kleines Beispiel. Der eigentliche Player besteht aus 3 Dateien, 2 Flash-Filme (swf) und ein Javascript. Die werden am Webserver plaziert und mit ein wenig Code wird er dann integriert:
<script type="text/javascript" src="http://www.leben-ohne-diaet.de/files/flowplayer-300min.js"></script>

<a href="http://www.leben-ohne-diaet.de/files/blog-video.flv" style="display:block;width:140px;height:172px" id="player"><img src="http://www.leben-ohne-diaet.de/gfx/blog-video.jpg" border="0"></a>
   
<script>
flowplayer("player", "http://www.leben-ohne-diaet.de/files/flowplayer-300.swf", {
    plugins: {
        controls: {
            all:false,
            play:true,
            scrubber:true
      }
    },
    clip: {
        url: 'http://www.leben-ohne-diaet.de/files/blog-video.flv',
        autoPlay: true
    }
});   
</script>
Hinweis: Bei einigen Dateien ist hier der Name verändert. Statt flowplayer-300.swf ist die Datei im Orginal flowplayer-3.0.0.swf. Mein CMS ist aber sehr konservativ was die Namensvergabe angeht und entfernt überflüssige Punkte.

http://www.leben-ohne-diaet.de/files/blog-video.flv ist das Video als FLV
http://www.leben-ohne-diaet.de/gfx/blog-video.jpg ist das Vorschaubild

Der Player funktioniert so, dass erst ein Bild angezeigt wird. Wenn man auf dieses klickt, wird erst der Film geladen und abgespielt. Dieses Bild muss ebenfalls noch erstellt werden. Der erste Link (a href) enthält auch die Größe des Films. Dabei sind 24 Pixel in der Höhe zu addieren, die für die Kontrollleiste benötigt werden. Ich habe den Film einfach spielen lassen, bin auf Pause und habe einen Screenshot gemacht, was ich dann als Vorschaubild verwende. Weil dabei der Play-Button mitten in meinem Gesicht war, habe ich das noch angepasst.

Diese Anleitung erfordert schon einige Vorkenntnisse, wer noch Fragen hat, darf sich gerne in den Kommentaren melden. Viel mehr interessiert mich aber, was ihr den überhaupt davon haltet.




Artikel veröffentlicht von Horst am 01.12.2008 um 14:04 Uhr.

{Fehler für :execmacro{execmacro="comments" param="info=1.68"} Kommentare.

Permalink Trackback URI

Tags:
blog internet




Ähnliche Beiträge:

Bisher {Fehler für :execmacro{execmacro="comments" param="info=1.68"} Kommentare:
{Fehler für :execmacro{execmacro="comments"}