Videos in Shopware einbinden: ein Beispiel aus der Praxis

Videos werden immer beliebter – und zwar nicht nur irgendwo im Internet, sondern ganz konkret auch in Onlineshops. Wie könnte man die Qualität eines Produkts auch besser veranschaulichen?

Ähnliches dachte sich auch einer unserer Kunden und war auf der Suche nach der optimalen Lösung, Videos in die Shopware-Erlebniswelt einzubinden.

Damit du auch deine Schlüsse daraus ziehen kannst, haben wir dir Problem, Vorgehen und Learning mal hier zusammengefasst:

Das Problem: Videos leiten Besucher aus dem Onlineshop

Als unser Kunde auf uns zugekommen ist, hat er in seinem Shopware-Shop Videos angeboten, die im Vollbildmodus angeschaut werden konnten. Allerdings wurden die Besuchenden dafür auf YouTube weiter- und damit von der Shop-Seite weggeleitet. Das hat üblicherweise zur Folge, dass viele Personen, die eine Website verlassen, nicht wiederkommen.

Um das Verlieren potenzieller Kundschaft zu verhindern und Interessierte im Onlineshop zu behalten, musste also eine alternative Lösung her.

Videos in Shopware einbinden: Welche Möglichkeiten gibt es?

Grundsätzlich gibt es zwei häufig genutzte Möglichkeiten, Videos in Shopware einzubinden:

1. Standardmäßig enthalten: Video per YouTube oder Vimeo einbetten

Vorteile:

• Kein Speicherplatz auf dem eigenen Server benötigt.
• Das Video wird automatisch in mehreren Qualitäten bereitgestellt.
• Hoher Traffic ist aus Sicht der Performance kein Problem, da Nutzende auf YouTube oder Vimeo weitergeleitet werden.

Nachteile:

• Nutzer werden aus dem Onlineshop geleitet und gehen häufig als potenzielle Kundschaft verloren.
• Hoher Traffic liegt auf einer anderen Plattform als der Eigenen (aus SEO-Sicht weniger gut).

2. Per Plugin: direkte Integration in die Erlebniswelten

Vorteile:

• Nutzer sehen das Video innerhalb des Onlineshops.
• Keine durch z. B. YouTube geschaltete Werbung.

Nachteile:

• Speicherplatz des eigenen Servers wird belastet.
• Bei hohem Traffic könnte es zu Performance-Problemen kommen.
• Mehrere Qualitäten einzubinden nicht möglich.

3. Über ein angepasstes/individuelles Plugin

Vorteile:

• Nutzer sehen das Video innerhalb des Onlineshops.
• Das Video kann in mehreren Qualitäten bereitgestellt werden.
• Die Performance kann verbessert werden im Gegensatz zum Standard-Plugin.
• Das Videoformat kann gezielt je nach Browser ausgespielt werden.
• Keine durch z. B. YouTube geschaltete Werbung.

Nachteile:

• Einmaliger Programmieraufwand
• Keine Reichweite über zweiten Kanal (YouTube).

Die Alternative zur Situation unseres Kunden war also ein Plugin, in diesem Fall dieses hier: HTML5 Video für Erlebniswelten.

Falls das auch für dich in Frage kommt, helfen die nächsten Abschnitte dabei, das Video entsprechend vorzubereiten und einzupflegen.

Video-Vorbereitung vor dem Hochladen

Um das Beste aus deinem Video rauszuholen, ohne die Performance zu beeinträchtigen, solltest du ein paar Vorkehrungen treffen.

Dateigröße anpassen

Das Video unseres Kunden war 140 MB groß und ließ sich deshalb nicht hochladen. Wir haben die Rohdatei deshalb einmal in ein Tool geschmissen (Video verkleinern online https://video-verkleinern.online-umwandeln.de/), um es zu komprimieren. Das dann nur noch 7 MB große Video konnten wir ohne Probleme hochladen und das ohne sichtbaren Qualitätsverlust. Optimal ist das auch, um deinen Speicherplatz zu schonen.

Qualität

Über die Standardausführung des Plugins hast du leider keine Möglichkeit, mehrere Qualitäten hochladen. Damit das Video auch auf mobilen Endgeräten trotzdem flüssig läuft (und das sollte es auf jeden Fall!), sollte es daher mindestens eine Qualität von 720 p haben.

Um mehrere Qualitäten hochladen zu können, muss das bestehende Plugin erweitert oder ein komplett neues entwickelt werden. Bedenke, dass dann allerdings auch mehr Speicherplatz notwendig ist.

Traffic

Wenn du die Videos per YouTube oder Vimeo hochlädst, musst du dir über den Traffic und die Performance auf deiner Seite keine Gedanken machen. Anders sieht das aus, wenn du Videos per HTML5 in deinem Onlineshop einbindest. Frage dich also vorher, wie viel Traffic deine Shopseite verarbeiten kann. Denn je nachdem, wie viele Personen zeitgleich das Video ansehen, kann es zu erheblichen Performance-Problemen kommen.

Video in Shopware einbinden: Videocodierung

Nicht jeder Browser unterstützt jedes Videoformat. WebM-Dateien beispielsweise haben eine kleine Dateigröße, werden aber leider nicht von allen Webbrowsern (z. B. Safari) unterstützt. MP4 zeigt hier die beste Kompatibilität und ist daher in der Regel die beste Wahl.

Eine anschauliche Tabelle dazu findest du im Blogbeitrag von IONOS: Mit HTML ein Video einbinden – so wirds gemacht.

Individualprogrammierung: Einbindung von HTML5-Videos in Shopware optimal umsetzen

Um das Beste aus der Video-Implementierung rauszuholen, haben wir dem Kunden eine Individualprogrammierung vorgeschlagen. Wir erweitern das Plugin also so, dass …

• alternative Quellen bereitgestellt werden, die je nach Browser aufgerufen werden können.
• mehrere Videoqualitäten zur Verfügung gestellt werden können.

Ersteres funktioniert über das HTML5-Element:

<video width=320  height=240 controls poster="vorschaubild.jpg">
    <source src="beispiel.webm" type="video/webm">
        <source src="beispiel.ogg"  type="video/ogg">
            <source src="beispiel.mp4" type="video/mp4">
              </video>

Die Einstellungen zur Anzeige verschiedener Qualitäten ist allerdings noch nicht im <video>-Tag verfügbar. Das wird stattdessen über Javascript gesteuert, beispielsweise über eine Abfrage, wie groß gerade der Bildschirm ist, auf dem die Seite besucht wird. Dementsprechend wird dann ein Video der entsprechend hinterlegten Qualität angezeigt.

Content Delivery Network (CDN) für große Mediendateien 

Bei unserer Recherche für die beste Lösung für unseren Kunden, kam das Stichwort Content Delivery Network (CDN) zur Sprache. Das ist ein Netz, das aus regional verteilten und über das Internet verbundene Server besteht und über das vor allem große Mediendateien ausgeliefert werden.

Sinnvoll ist das, wenn man vorab weiß, dass gleichzeitig viele Besuchende auf der Internetseite aktiv sein und vielleicht sogar zeitgleich ein oder mehrere Videos ansehen könnten.

Ein CDN würde dann dafür sorgen, dass keine Performanceprobleme entstehen. 

Fazit: Mit dem richtigen Knowhow klappt (fast) alles

Wie du siehst, musst du einige Dinge beachten, wenn du ein Video vernünftig einbinden möchtest. Üblicherweise gibt es aber für (fast) alles eine Lösung und vielleicht hilft dir dieser Text hier ja schon weiter.

Falls nicht: Genau wie bei unserem anonymisierten Kunden helfen wir auch dir gern bei der Umsetzung.

Als zertifizierte Shopware-Agentur sind wir nicht nur bei Problemen mit HTML5-Videos die passenden Experten, sondern für alles rund um das Shopsystem.

Sprich uns einfach an und wir sehen, dass wir auch für dich die optimale Lösung finden. Schreib uns einfach über unser Kontaktformular.