Videos mit Flowplayer integrieren

Um die Produktpräsentation in Onlineshops besser zu gestalten sind Videos ein sehr gutes Instrument und Produktvideos können zu mehr Umsatz führen.

Laut Goldmedia, einem Berliner Medienberatungs- und Forschungsunternehmen, könnte sich der Umsatz bei deutschen Onlineshops bis zum Jahre 2012 um fast die Hälfte steigern, wenn mehr Produktvideos eingesetzt würden.

Ich möchte Ihnen nun zeigen wie Sie Ihre Videos, ohne Zusatzattribute in der Datenbank, einbinden können. Einzige Voraussetzung: Sie müssen die SKU als Dateinamen (SKU.flv) verwenden.

Zur Umsetzung

1. Installation von jQuery-Tools
Um den Flowplayer installieren zu können, habe wir die Erweiterung Mxperts: jQuery-Tools entwickelt. Bitte installieren Sie diese über Ihren Magento-Connect-Manager und den Extensions Key magento-community/Mxperts_Jquery_Tools.

2. Verzeichnis erstellen
Die Videos sollen zentral auf dem Webserver liegen. Dafür erstellen wir das Verzeichnis media/catalog/video. Hier kopieren Sie Ihre Viedeos als SKU.flv per FTP hinein.

3. Flash-Files kopieren
Auf der Website von Flowplayer unter http://www.flowplayer.org/download/index.html können Sie sich den Flowplayer downloaden. Wenn Sie sich für die Open Source license entscheiden, dann kopieren die Dateien flowplayer.controls-3.1.2 und flowplayer-3.1.2.swf nach media/swf auf Ihrem Webserver.
Wenn Sie eine kommerzielle Lizenz erworben haben finden Sie die Datei flowplayer.commercial-3.1.1.swf. Zur Integration müssen Sie den Lizenzschlüssel im Code hinterlegen. Ein Anleitung dafür finden Sie unter http://www.flowplayer.org/demos/commercial/index.html.

4. Template anpassen
Zuletzt müssen wir nun die Datei app/design/frontend/default/default/template/catalog/product/view.phtml anpassen.

Als erstes überprüfen wir, ob die Datei zur aktuellen SKU überhaupt existiert.

    $_sku = $_product->getSku();
    $_video_filename = $_SERVER['DOCUMENT_ROOT'] . '/media/catalog/video/' . str_replace(" ", "_", $_sku) . '.flv';

    if ( file_exists($_video_filename) ) {
      $_video_filename = '/media/catalog/video/' . str_replace(" ", "_", $_sku) . '.flv';
    } else {
      $_video_filename = '';
    }

Wie Sie im Quellcode sehen, werden Leerzeichen mit einem Unterstrich ersetzt. Also Leerzeichen in der SKU schreiben Sie beim Dateinamen als Unterstrich.
Beispiel: 100 SK 345 wird zu 100_SK_345.flv

Nun folgt noch die Integration des Flowplayer:

        <?php if ($_video_filename != ''):?>
            <div class="collateral-box">
              <a 	href="<?php echo $_video_filename ?>"	style="display:block;width:640px;height:390px;"	id="player"></a>
              <script language="JavaScript">
	              flowplayer("player", "/media/swf/flowplayer-3.1.1.swf");
              </script>
            </div>
        <?php endif;?>

Haben Sie es sich so leicht vorgestellt? Hier nun zwei Links wie das fertige Ergebnis aussieht.
- http://www.demo-store.de/htc-touch-diamond.html
- http://www.demo-store.de/acer-ferrari-3200-notebook-computer-pc.html

Alle Files inklusive kompletter view.phtml aus dem default template von Magento finden Sie im Download-File zu diesem Tutorial.

14 Kommentare to “Videos mit Flowplayer integrieren”

1. diver66 sagt:

   26. August 2009 um 09:54

   Hi,
   ich habe jeden Morgen ein festes Programm : Im Firefox zwei Tabs aufmachen und dann http://www.magentocommerce.com/magento-connect und http://www.mxperts.de laden. Dann kann der Tag beginnen.

   Vielen Dank für Eure Mühe, wiedermal ein tolles Tut

   gruss aus Spanien

   Joe

   Zum Antworten anmelden
   • Johannes Teitge sagt:

     26. August 2009 um 10:09

     Danke für den lieben Gruß aus Spanien.

     Viele Grüße
     Johannes Teitge

     Zum Antworten anmelden
2. ds_1984 sagt:

   26. August 2009 um 10:03

   Dann hast du den gleichen Tagesablauf wie ich

   Nein moment, ich mache noch einen Rundgang durch die 2 Forenplattformen.

   LG - Daniel

   Zum Antworten anmelden
3. diver66 sagt:

   26. August 2009 um 15:37

   Ach schon wieder du Daniel, dich trifft man auch überall ;-))

   Zum Antworten anmelden
4. Xeon2901 sagt:

   18. September 2009 um 20:27

   Hallo,

   ich habe es leider bisher nicht hinbekommen.
   Von mir wird das Modern Theme benutzt,
   Sollte es damit auch funktionieren ?
   Falls ja, wie genau ?

   Folgendes habe ich bisher getan:
   Unter default/default die view.phtml Datei ausgetauscht.
   Ich bin den Anweisungen diese Seite gefolgt, aber es erscheint kein Video.

   Als zweiten Versuch habe ich dann die Datei
   default/modern/view.phtml modifiziert. Mit dem Code von dieser Seite. Nun wird ein Video angezeigt, allerdings ist das ganze Layout nach rechts gerutscht. Das Video kleiner zu machen brachte auch keine Veränderung.

   Ich bin für jeden Tipp dankbar. Schraube da nun schon 5 Stunden daran herum, aber kriege es nicht hin. Arrgghhh ..

   Zum Antworten anmelden
5. Xeon2901 sagt:

   18. September 2009 um 20:28

   Ach ja, fast vergessen:
   Die Bilder von dem Problem und den Code finden sich hier:

   http://www.magentocommerce.com/boards/viewthread/55544/

   Zum Antworten anmelden
6. Xeon2901 sagt:

   20. September 2009 um 12:48

   Ich konnte mein Problem lösen.
   Der Code für das Modern Theme findet sich hier, ganz unten:

   http://www.magentocommerce.com/boards/viewthread/55544/

   Zum Antworten anmelden
7. nikl sagt:

   19. Oktober 2009 um 17:13

   Musste den Code minimal anpassen um es zu realisieren (liegt wohl am Document Root…), aber jetzt,klappt es. Super Tutorial wie immer, danke!
   Angepasster Code: http://dotnet-snippets.de/dns/flowplayer-fuer-magento-produktansicht-SID1237.aspx

   Zum Antworten anmelden
8. Johannes Teitge sagt:

   19. Oktober 2009 um 17:19

   Danke für Eure Rückmeldungen und Beiträge.

   Viele Grüße
   Johannes Teitge

   Zum Antworten anmelden
9. dr770 sagt:

   24. November 2009 um 01:23

   ich nutze dieses plugin, und bin damit sehr zufrieden.
   jetzt will kunde aber gleich mehrere videos für eine product page einbinden.

   ich dachte, es wird genügen ein textarea-attribut zu erstellen und dort den code pasten, was plagin generiert, und nur der filename vom video ändern.

   und das klappt tatsächlich!

   nur, ein kleines “aber” - das video vom plagin selbst wird nicht mehr angezeigt.

   FRAGE: was muss man also am “manuellen” code ändern, um mehrere videos auf eine seite zu zeigen?

   Zum Antworten anmelden
   • Johannes Teitge sagt:

     24. November 2009 um 08:34

     Hallo,
     schau Dir mal die Codebeispiele auf http://flowplayer.org/demos/installation/multiple-players.html an.

     Viele Grüße
     Johannes Teitge

     Zum Antworten anmelden
10. nikl sagt:

    30. November 2009 um 19:28

    Mit welcher Magento Version hast du dieses Tutorial beschrieben, Johannes?

    Habe gerade bemerkt, dass das Video bei mir in der Customer Review Ansicht schwarz angezeigt wird.

    Danke!

    Zum Antworten anmelden
11. onesh0t sagt:

    30. Januar 2010 um 14:34

    Danke Johannes für das hilfreiche Tutorial
    Der Clip klappt super in meinem Mshop!
    Gruß

    Zum Antworten anmelden
12. kacu sagt:

    12. März 2010 um 11:56

    Hallo,

    ich habe ein kleines Problem mit Video wiedergabe. Player bleibt schwarz und ist ständig am Suchen.
    Es kommt am Anfang folgende Meldung:
    200, Stream not found, NetStream. Play.

    Weißt jemand wo ich den Fehler zu suchen habe?
    Bleibe dankbar für jeden Hinweiss.

    Gruß
    kacu

    Zum Antworten anmelden