FROM CACHE - de_header
Gelöst

benutzerdefinierter Code (video)

Yalcin7
Besucher
2 0 0

Guten Abend,

ich habe einen benutzerdefinierten Code beigefügt. Für einen Slideshow Video der die gesamte Bandbreite auf Dauerschleife spielt. Jedoch bei öffnen meiner Seite spielt es nicht sofort ab sondern erst nach 2-4 Sekunden später. Sprich es lädt zu langsam. Es sind mp4 Dateien die ich jedoch sehr stark komprimiert habe .
Beim aktualisieren des noch "inaktiven" Shop steht immer in dem Bereich "kein Images" danach kommt mein 

Video.

 

Was kann ich hier tun?
Kann mir hier bitte jemand helfen?

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
16717 2639 3917

Erfolg.

Hey @Yalcin7 

 

Ok danke, und wir sehen, dass du den Shopify CDN Videolink verwendest was korrekt ist, und diesen in einer neuen Liquid Section Datei eingebaut hast. Der Video lädt jedoch eine Sekunde verzögert, wie du sagst. Dies hängt wahrscheinlich von der Video Datei selber ab. Du möchtest ja einen Kompromiss erreichen, zwischen Video Qualität/Auflösung und dass dabei auch eine schnelle Ladezeit im Kundenbrowser auf Desktop und auf Mobile gewährleistet wird. Nicht vergessen, bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller auf unserer Seite zu analysieren.

 

Ein paar generelle Tipps dazu

Um die Ladezeit des Videos in deinem HTML-Code zu verbessern, gibt es verschiedene Ansätze, die du ausprobieren kannst. Diese Optimierungen beziehen sich sowohl auf die Art und Weise, wie das Video eingebettet ist, als auch auf die Eigenschaften des Videos selbst.

1. Verwendung von preload="metadata" anstelle von preload="none"

Wenn du beispielsweise ein Attribut wie preload="none" verwendest, und durch preload="metadata" ersetzt, lädt der Browser die Metadaten des Videos (wie Dauer, Größe usw.) beim Laden der Seite, aber nicht das Video selbst. Dies kann die wahrgenommene Ladezeit der Seite verbessern, da das Video erst abgespielt wird, wenn der Benutzer interagiert. Hier ein Beispielcode:

 

<video class="video-js" loop autoplay muted playsinline poster="URL_TO_YOUR_POSTER" preload="metadata">

 

2. Video Dateigröße optimieren

Stelle sicher, dass das Video so komprimiert ist, dass es eine akzeptable Balance zwischen Dateigröße und Qualität bietet. Tools wie HandBrake oder Online-Dienste können dabei helfen, die Dateigröße zu reduzieren, ohne die Qualität merklich zu beeinträchtigen.

3. Video-Hosting-Dienste nutzen

Anstelle des direkten Hostings des Videos auf Shopify könntest du in Erwägung ziehen, das Video auf einem Video-Hosting-Dienst wie YouTube oder Vimeo zu hosten und es dann in deine Seite einzubetten. Diese Plattformen bieten optimierte Video-Streaming-Technologien, die die Ladezeit verbessern können.

4. Lazy Loading implementieren

Lazy Loading verzögert das Laden von Ressourcen (wie Videos) bis diese fast in den sichtbaren Bereich der Webseite scrollen. Für Videos kannst du dies durch JavaScript realisieren oder indem du nach einer Bibliothek suchst, die Lazy Loading für Videos unterstützt.

5. Alternative Formate anbieten

Stelle sicher, dass du Videoformate anbietest, die von allen modernen Browsern unterstützt werden. Die Bereitstellung mehrerer Quellen im <video>-Tag kann die Kompatibilität und Performance verbessern:

 

<video class="video-js" loop autoplay muted playsinline preload="metadata">
  <source src="URL_TO_YOUR_MP4.mp4" type="video/mp4">
  <source src="URL_TO_YOUR_WEBM.webm" type="video/webm">
</video>

 

CSS-Optimierungen

Stelle sicher, dass dein CSS gut strukturiert ist, um das Video responsiv zu machen. Stelle sicher, dass die restliche Seite ebenfalls optimiert ist und dass keine unnötigen Ressourcen das Laden verlangsamen.

Überprüfung des Netzwerks und der Ressourcengröße

Verwende Tools wie die Developer Console, um zu überprüfen, wie schnell deine Seite lädt und um spezifische Empfehlungen zur Verbesserung der Ladezeit zu erhalten. Manchmal kann das Problem außerhalb des Videos liegen, z.B. bei zu großen Bildern oder zu vielen Skripten, die gleichzeitig geladen werden.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

3 ANTWORTEN 3

Ben310
Seefahrer
419 56 114

Wo hast du den benutzerdefinierten Code beigefügt (ich kann ihn hier nicht sehen und brauche ihn um es zu analysieren)?

 

Auch wenn das Video bereits komprimiert ist, könnte es immer noch zu einer verzögerten Ladung kommen. Tools wie HandBrake oder Online-Komprimierungsdienste können hierbei helfen. Oder verwende das Shopify CDN im Admin Dateien Bereich.

 

Oder Video auf YouTube hochladen und von dort einbetten. Dies verlagert die Last des Video-Hostings auf YouTube und wird die Ladezeiten verbessern. Setze in den Theme Einstellungen ein Vorschaubild ein, das erst nach Interaktion des Nutzers durch das Video ersetzt wird​​.

Yalcin7
Besucher
2 0 0

Danke für deine Nachricht.

Den benutzerdefinierten Code habe ich im Bereich Code bearbeiten unter "Abschnitte" als "neue Abschnitt hinzufügen" erstellt. Mein Video habe ich wie du erwähnt hast bereits über Shopify -> Datein -> CDN"LINK" den Code bei meinem benutzerdefinierten eingetragen. Es läuft auch problemlos jedoch beim Aktualisieren der Seite hängt es mittlerweile immer 1-2 Sekunden bis es läuft

Ich will ein Video einfügen indem es komplett auf Dauerschleife automatisch läuft und über Youtube müsste man immer ein "Play"-Taste drücken.

Gabe
Shopify Staff
16717 2639 3917

Erfolg.

Hey @Yalcin7 

 

Ok danke, und wir sehen, dass du den Shopify CDN Videolink verwendest was korrekt ist, und diesen in einer neuen Liquid Section Datei eingebaut hast. Der Video lädt jedoch eine Sekunde verzögert, wie du sagst. Dies hängt wahrscheinlich von der Video Datei selber ab. Du möchtest ja einen Kompromiss erreichen, zwischen Video Qualität/Auflösung und dass dabei auch eine schnelle Ladezeit im Kundenbrowser auf Desktop und auf Mobile gewährleistet wird. Nicht vergessen, bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller auf unserer Seite zu analysieren.

 

Ein paar generelle Tipps dazu

Um die Ladezeit des Videos in deinem HTML-Code zu verbessern, gibt es verschiedene Ansätze, die du ausprobieren kannst. Diese Optimierungen beziehen sich sowohl auf die Art und Weise, wie das Video eingebettet ist, als auch auf die Eigenschaften des Videos selbst.

1. Verwendung von preload="metadata" anstelle von preload="none"

Wenn du beispielsweise ein Attribut wie preload="none" verwendest, und durch preload="metadata" ersetzt, lädt der Browser die Metadaten des Videos (wie Dauer, Größe usw.) beim Laden der Seite, aber nicht das Video selbst. Dies kann die wahrgenommene Ladezeit der Seite verbessern, da das Video erst abgespielt wird, wenn der Benutzer interagiert. Hier ein Beispielcode:

 

<video class="video-js" loop autoplay muted playsinline poster="URL_TO_YOUR_POSTER" preload="metadata">

 

2. Video Dateigröße optimieren

Stelle sicher, dass das Video so komprimiert ist, dass es eine akzeptable Balance zwischen Dateigröße und Qualität bietet. Tools wie HandBrake oder Online-Dienste können dabei helfen, die Dateigröße zu reduzieren, ohne die Qualität merklich zu beeinträchtigen.

3. Video-Hosting-Dienste nutzen

Anstelle des direkten Hostings des Videos auf Shopify könntest du in Erwägung ziehen, das Video auf einem Video-Hosting-Dienst wie YouTube oder Vimeo zu hosten und es dann in deine Seite einzubetten. Diese Plattformen bieten optimierte Video-Streaming-Technologien, die die Ladezeit verbessern können.

4. Lazy Loading implementieren

Lazy Loading verzögert das Laden von Ressourcen (wie Videos) bis diese fast in den sichtbaren Bereich der Webseite scrollen. Für Videos kannst du dies durch JavaScript realisieren oder indem du nach einer Bibliothek suchst, die Lazy Loading für Videos unterstützt.

5. Alternative Formate anbieten

Stelle sicher, dass du Videoformate anbietest, die von allen modernen Browsern unterstützt werden. Die Bereitstellung mehrerer Quellen im <video>-Tag kann die Kompatibilität und Performance verbessern:

 

<video class="video-js" loop autoplay muted playsinline preload="metadata">
  <source src="URL_TO_YOUR_MP4.mp4" type="video/mp4">
  <source src="URL_TO_YOUR_WEBM.webm" type="video/webm">
</video>

 

CSS-Optimierungen

Stelle sicher, dass dein CSS gut strukturiert ist, um das Video responsiv zu machen. Stelle sicher, dass die restliche Seite ebenfalls optimiert ist und dass keine unnötigen Ressourcen das Laden verlangsamen.

Überprüfung des Netzwerks und der Ressourcengröße

Verwende Tools wie die Developer Console, um zu überprüfen, wie schnell deine Seite lädt und um spezifische Empfehlungen zur Verbesserung der Ladezeit zu erhalten. Manchmal kann das Problem außerhalb des Videos liegen, z.B. bei zu großen Bildern oder zu vielen Skripten, die gleichzeitig geladen werden.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog