Video verwenden

Ausgewählte Links

1. Company XYZ-Dokumentation zu Videoeinstellungen
2. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
3. Shopify-Dokumentation zum Hochladen und Verwalten von Dateien
4. Shopify-Dokumentation zum Hinzufügen von Produktmedien
5. Shopify-Dokumentation zur Barrierefreiheit von Themes

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Align unterstützt Videos in eigenständigen Medienbereichen, Abschnitts- und Bannerhintergründen, Produktgalerien, Diashows, Navigationswerbung und Layouts mit gemischten Inhalten. Die meisten Platzierungen verwenden dieselben Grundeinstellungen für Videoquelle, Bildausschnitt, Wiedergabe, Poster und Overlays, auch wenn die Bezeichnungen der Einstellungen je nach Kontext variieren können.

Verwenden Sie diese Anleitung, um Videos vorzubereiten und praktische Einstellungen in Ihrem Shopify-Shop auszuwählen. Details zu bestimmten Einstellungen finden Sie unter Videoeinstellungen und Abschnittshintergrund-Einstellungen.

Videoquelle auswählen

Die meisten Align-Videobereiche unterstützen einen von drei Quellentypen.

1. Von Shopify gehostetes Video
   1. Laden Sie eine Datei in die Dateien Ihres Shopify-Shops hoch oder wählen Sie dort eine Datei aus.
   2. Verwenden Sie diese Option, wenn Sie Kontrolle über Codierung, Schleifenwiedergabe, Dateigröße oder die Wiedergabe im Hintergrundstil benötigen.
   3. Für Hintergrundvideos in Abschnitten, Bannern und Hero-Bereichen ist ein gehostetes Video erforderlich.
2. YouTube
   1. Fügen Sie die URL der Videoseite ein, nicht den Einbettungscode.
   2. Verwenden Sie YouTube, wenn das Video bereits dort liegt und das Hosting durch den Anbieter Ihren Anforderungen entspricht.
3. Vimeo
   1. Fügen Sie die URL der Videoseite ein, nicht den Einbettungscode.
   2. Verwenden Sie Vimeo, wenn das Video bereits dort liegt und das Hosting durch den Anbieter Ihren Anforderungen entspricht.

Schritte zum Hochladen von Dateien finden Sie unter Shopify-Dokumentation zum Hochladen und Verwalten von Dateien

Verwenden Sie für jeden Videobereich eine vorgesehene Quelle. Wenn sowohl eine gehostete Datei als auch eine Service-URL verfügbar sind, hat die gehostete Datei Vorrang. Entfernen Sie die nicht verwendete Quelle, um Unklarheiten zu vermeiden. Änderungen an externen Videos müssen möglicherweise gespeichert werden, bevor die Vorschau im Shopify Theme-Editor dem Storefront entspricht.

Tipp

Externe Videos laden zuerst das Poster. Der vollständige Player wird erst nach einer Interaktion oder sichtbar werdendem automatisch abgespieltem Video geladen.

Gehostete Videodateien vorbereiten

Die Dateigröße wirkt sich direkt auf die Ladezeit aus, insbesondere auf Mobilgeräten. Shopify stellt gehostete Videos mit adaptivem Streaming (HLS) bereit, doch eine Codierung mit niedrigerer Bitrate kann PageSpeed und die wahrgenommene Performance weiter verbessern. Kleinere Quelldateien bleiben auch bei verfügbarem Streaming wichtig.

Bitrate verstehen

Die Bitrate ist die Menge der pro Sekunde codierten Videodaten.

1. Eine höhere Bitrate sorgt für schärfere Bewegungen und Details, erzeugt jedoch größere Dateien und eine höhere Seitenlast.
2. Eine niedrigere Bitrate erzeugt kleinere Dateien, die schneller starten, kann jedoch Details in schnellen oder dunklen Szenen verringern.

Die meisten Encoder zeigen die Bitrate in kbps oder Mbps an. Betrachten Sie sie als Ausgleich zwischen visueller Qualität und Performance und nicht als einzelne Einstellung für die maximale Qualität.

Mit diesen Codierungszielen beginnen

1. Allgemeine Verwendung — Verwenden Sie für eigenständige Videos, Hero-Clips, Produktmedien und ganzflächige Abschnittshintergründe etwa 2500 kbps.
2. Kleine oder kompakte Platzierungen — Verwenden Sie für Navigationswerbung, Suchbanner, Footer-Medien, Collage-Kacheln und andere schmale Rahmen etwa 1000–1500 kbps.
3. Hintergrund- und Ambient-Clips — Halten Sie Dateien kurz, schleifenfreundlich und visuell einfach. Diese Videos werden normalerweise stumm automatisch abgespielt und sollten leichtgewichtig statt kinoreif wirken.

Passen Sie die Auflösung an die Größe an, in der das Video angezeigt wird. Ein 1080p- oder 4K-Master, der in einem kleinen Banner angezeigt wird, verbraucht zusätzliche Bandbreite, ohne das sichtbare Ergebnis zu verbessern.

Automatisch abgespielte Bereiche, einschließlich Hintergründen, Diashow-Videos und hervorgehobener Hero-Clips, reagieren besonders empfindlich auf Performance-Probleme. Verwenden Sie kurze Clips, stumme Wiedergabe und moderate Bitraten.

Video in verschiedenen Platzierungen verwenden

Dieselben Videokonzepte gelten für viele Bereiche des Align-Editors. Diese Gruppen beschreiben häufige Rollen und nicht jeden einzelnen Abschnitt.

1. Eigenständige Videobereiche
   1. Dazu gehören spezielle Videoabschnitte und Videoblöcke in Layouts mit gemischten Inhalten.
   2. Unterstützt gehostete Quellen sowie YouTube- und Vimeo-Quellen.
   3. Eignet sich gut für Demos, Markengeschichten, Erklärvideos und redaktionelle Medien mit optionalen Beschriftungen und Schaltflächen.
2. Abschnitts- und Bannerhintergründe
   1. Fügt dekorative Bewegung hinter Überschriften, Bannern, Hero-Bereichen und Werbeinhalten hinzu.
   2. Verwendet ausschließlich gehostete Dateien.
   3. Wird normalerweise stumm automatisch abgespielt, wiederholt und ohne Steuerelemente angezeigt.
   4. Unterstützt möglicherweise separate Desktop- und Mobil-Hintergrunddateien, wenn unterschiedliche Bildschirmgrößen einen anderen Bildausschnitt erfordern.
3. Produktbilder
   1. Dazu gehören Videos in der Produktgalerie auf Produktseiten und in Bereichen für hervorgehobene Produkte.
   2. Kann optionales Hover-Video auf Produktkarten enthalten, wenn Hover-Medien aktiviert sind.
   3. Posterbilder und Wiedergabesteuerungen sind hier besonders nützlich, da Käufer eine gezielte Wiedergabe erwarten.
4. Diashow- und Karussellmedien
   1. Videos können Bildmaterial eines Slides ersetzen oder überschreiben.
   2. Clips werden normalerweise automatisch abgespielt, sobald ihr Slide aktiv wird. Halten Sie sie daher kurz genug, damit sie sich sinnvoll in die Abfolge einfügen.
5. Kompakte Werbebereiche
   1. Dazu gehören kleine bannerähnliche Platzierungen in Navigation, Suche und anderen Bereichen mit hoher Informationsdichte.
   2. Diese Platzierungen reagieren am empfindlichsten auf hohe Bitraten und große Dateien.

Schritte zum Hochladen von Produktgaleriemedien und unterstützte Medientypen finden Sie unter Shopify-Dokumentation zum Hinzufügen von Produktmedien

Wenn sich ein Video schwerfällig anfühlt, prüfen Sie zuerst seine Platzierung. Eine Datei, die in einem ganzflächigen Hero-Bereich gut funktioniert, kann für ein Navigationsbanner oder einen Rahmen in Kartengröße dennoch zu groß sein.

Wiedergabe konfigurieren

Diese Steuerelemente erscheinen in Videoabschnitten, Videoblöcken und anderen mediengesteuerten Align-Bereichen.

1. Autoplay
   1. Startet die Wiedergabe, sobald das Video im sichtbaren Bereich erscheint, und pausiert es, nachdem es diesen Bereich verlassen hat.
   2. Am besten für kurze Ambient-Clips geeignet, die angrenzende Inhalte unterstützen.
   3. Erfordert bei der normalen Verwendung im Storefront eine stumme Wiedergabe.
2. Loop
   1. Wiederholt den Clip kontinuierlich.
   2. Eignet sich gut für Hintergründe und kurze Bewegungsakzente, kann jedoch von erzählten oder handlungsorientierten Videos ablenken.
3. Mute
   1. Lässt den Ton ausgeschaltet, bis der Käufer ihn über die Player-Steuerelemente aktiviert.
   2. Videos mit aktiviertem Autoplay werden standardmäßig stummgeschaltet.
4. Show video player controls
   1. Zeigt native Steuerelemente oder Steuerelemente des Anbieters für Wiedergabe, Pause, Suchlauf, Lautstärke und Vollbild an, sofern unterstützt.
   2. Lassen Sie die Steuerelemente für Erklärvideos, Demos und Videos sichtbar, die Käufer erneut abspielen oder genau untersuchen möchten.
   3. Sie können die Steuerelemente für dekorative Clips ausblenden. In vielen Bereichen funktionieren Klick- und Tastaturinteraktionen auch bei ausgeblendeten Steuerelementen weiterhin.

Hinweis

Wenn ein Video von gesprochenen Details abhängt, deaktivieren Sie Autoplay und lassen Sie die Steuerelemente sichtbar, damit Käufer selbst entscheiden können, wann sie zuhören.

Poster, Seitenverhältnis und Breite festlegen

1. Poster image
   1. Stellt ein optionales Vorschaubild bereit, bevor die Wiedergabe beginnt.
   2. Ist besonders für gehostete Videos und einen hochwertigen ersten Eindruck nützlich.
   3. Externe Videos verwenden Miniaturbilder des Anbieters, wenn kein eigenes Poster festgelegt ist.
2. Aspect ratio
   1. Steuert die Form des sichtbaren Rahmens auf Desktop-Geräten und, sofern verfügbar, auf Mobilgeräten.
   2. Verwenden Sie Default, wenn die Quelldimensionen bereits zum Layout passen.
   3. Legen Sie nur dann ein separates mobiles Seitenverhältnis fest, wenn Smartphones einen anderen Bildausschnitt benötigen.
3. Maximum width
   1. Verhindert, dass sich ein Video innerhalb eines Inhaltsbereichs weiter als vorgesehen ausdehnt.
   2. Der Wert 0 verwendet die gesamte verfügbare Breite.

Wählen Sie ein Poster, das möglichst genau zum Bildausschnitt des Videos passt. Dadurch entsteht beim Start der Wiedergabe ein fließenderer Übergang.

Overlays und Wiedergabe ohne Steuerelemente hinzufügen

Viele Videobereiche unterstützen ein Farb- oder Verlaufs-Overlay und eine Einstellung Overlay style.

1. Show when paused
   1. Zeigt das Overlay vor der Wiedergabe und nachdem ein Käufer das Video pausiert hat.
   2. Hält die Darstellung während der Wiedergabe visuell klar.
   3. Automatische Pausen im sichtbaren Bereich bei automatisch abgespielten Videos zählen nicht als Pausen durch den Käufer.
   4. Dies ist für viele Videobereiche die default-Einstellung.
2. Always show
   1. Lässt das Overlay sowohl über dem Poster als auch über dem abgespielten Video sichtbar.
   2. Verwenden Sie diese Option, wenn die Tönung Teil des Designs ist, etwa bei einer redaktionellen oder markenspezifischen Gestaltung.
   3. Diese Option deaktiviert die Steuerelemente unabhängig von Show video player controls.

Wenn die Steuerelemente ausgeblendet sind, können viele gehostete Videos und Vimeo-Videos weiterhin über das Poster gestartet und anschließend per Klick oder Tastaturinteraktion pausiert oder erneut abgespielt werden. YouTube behält seine eigene Wiedergabemöglichkeit des Anbieters bei, statt ein zweites Wiedergabesymbol des Themes hinzuzufügen.

Verwenden Sie Overlays mit starkem Textkontrast. Unter Abschnittshintergrund-Einstellungen finden Sie weitere Informationen, wenn ein Video hinter Überschriften, Schaltflächen oder Fließtext angezeigt wird. Allgemeinere Hinweise finden Sie unter Shopify-Dokumentation zur Barrierefreiheit von Themes

Integriertes Performance-Verhalten verstehen

Align trägt dazu bei, Videos ansprechend darzustellen, ohne jeden Player sofort zu laden.

1. Poster zuerst laden
   1. Externe Videos zeigen ein Poster, bevor der aktive Player erstellt wird.
   2. Videos ohne Autoplay warten auf eine Interaktion, bevor die vollständige Einbettung geladen wird.
2. Viewport-basiertes Autoplay
   1. Autoplay-Player werden, sofern möglich, erst erstellt, wenn das Video im sichtbaren Bereich erscheint.
   2. Autoplay wird pausiert, wenn das Video den sichtbaren Bereich verlässt.
3. Ressourcenschonende gehostete Standardeinstellungen
   1. Gehostete Videos ohne Autoplay vermeiden ein frühzeitiges Vorladen.
   2. Hintergrundvideos verzögern das Laden der Quelle, sofern angemessen, und verwenden verfügbare Vorschaubild-Poster.
4. Zuverlässige Aktualisierungen
   1. Das Videoverhalten wird nach der Aktualisierung von Rastern und dem Neuladen des Editors zurückgesetzt. Dadurch werden veraltete Player nach Aktualisierungen vermieden.
5. Koordination von Produktkarten
   1. Wenn eine Produktkarte sowohl ein primäres als auch ein Hover-Video enthält, wird immer nur ein Clip gleichzeitig abgespielt.

Diese Verhaltensweisen erfolgen automatisch. Ihre wichtigsten Performance-Steuerungsmöglichkeiten sind Dateigröße, Platzierung, Autoplay-Auswahl und Cliplänge.

Beispielszenarien

1. Hero-Hintergrundschleife
   1. Verwenden Sie einen gehosteten 6–10 Sekunden langen Ambient-Clip, der mit etwa 2500 kbps oder weniger codiert ist.
   2. Lassen Sie ihn stumm und in einer Schleife abspielen, verstärken Sie das Overlay für Text und fügen Sie nur dann eine eigene mobile Datei hinzu, wenn der Desktop-Bildausschnitt auf Smartphones nicht funktioniert.
2. Produktdemo-Video
   1. Verwenden Sie ein gehostetes Video oder eine Service-URL mit sichtbaren Steuerelementen, deaktiviertem Autoplay und einem eigenen Posterbild.
   2. Wählen Sie ein Breitbild- oder Standard-Seitenverhältnis, das zum Layout der Galerie passt.
3. Navigations-Werbebanner
   1. Verwenden Sie einen kompakten gehosteten Clip, der mit etwa 1000–1500 kbps codiert ist.
   2. Halten Sie die Bewegung einfach, vermeiden Sie Kommentare und überprüfen Sie die mobile Performance, da der sichtbare Rahmen klein ist.
4. Redaktionelles Video mit Tönung
   1. Verwenden Sie den Overlay-Stil Always show, wenn eine Farbtönung Teil des Designs ist.
   2. Halten Sie den Clip kurz und stellen Sie sicher, dass der Textkontrast während der Wiedergabe stark bleibt.
5. Externes Erklärvideo
   1. Verwenden Sie eine YouTube- oder Vimeo-Seiten-URL mit deaktiviertem Autoplay, aktivierten Steuerelementen und einem eigenen Poster, wenn der standardmäßige Miniaturbildausschnitt nicht geeignet ist.
   2. Lassen Sie das Laden des Posters zuerst die Performance unterstützen, während Käufer entscheiden, ob sie die Wiedergabe starten möchten.

Nutzungshinweise

1. Vor dem Hochladen codieren. Bitrate und Auflösung sind wichtiger, als sich allein auf Streaming zu verlassen.
2. Für Hintergründe gehostete Dateien verwenden. YouTube und Vimeo eignen sich für eigenständige und blockbasierte Medien, nicht jedoch für dekorative Hintergrunddarstellungen.
3. Bewegte Hintergründe kurz halten. Hintergrund- und Diashow-Videos sollten ohne Ton und ohne große Aufmerksamkeit zu verlangen eine klare Aussage vermitteln.
4. Mobilgeräte separat prüfen. Hintergrunddateien, Seitenverhältnisse und Overlays können sich auf kleineren Bildschirmen anders verhalten.
5. Nach dem Speichern eine Vorschau anzeigen. Änderungen an externen Videos werden im Editor möglicherweise erst vollständig angezeigt, nachdem Sie gespeichert und das Storefront aufgerufen haben.