FROM CACHE - de_header

Video autoplay

Gamze1
Entdecker
45 0 2

Auf der mobilen Ansicht und auf dem iPad spielt das Banner Video leider nicht automatisch ab. Ich möchte gerne, dass das Video automatisch abgespielt wird und der Play Button nicht auftaucht. Habe es schon mit playinline versucht, leider ohne Erfolg.

 

url: luumpi.de

8 ANTWORTEN 8

Kai
Shopify Staff
2355 543 363

Hi @Gamze1,

vielen Dank fur deinen Post. 

 

Das automatische Abspielen von Videos auf Apple Geräten ist ein viel besprochenes Thema, da dies von Apple und Browsern häufig unterbunden wird, für Leute, die keine unbegrenztes Datenvolumen haben dieses nicht verfügen und für andere die Autoplay nervig finden.

 

Wie ist das Video im Moment in deinem Shopify Shop eingebettet? 

Falls es bei YouTube ist, hilft es das Video in deinem Admin hochzuladen.

 

Dies tust du wie folgt:

Stelle sicher, dass es ei MP4-Videoformat ist, da dies das derzeit am häufigsten unterstützte Videoformat ist.

 

Die Videodatei kann nicht größer als 20 MB sein.

 

Schritt 1: Lade das Video auf die Seite „Dateien“ hoch:

Gehe in deinem Shopify-Adminbereich zu Inhalt > Dateien.
Klicke auf Dateien hochladen.
Wähle das Video zum Hochladen aus. Klicke auf Öffnen.
Kopiere die URL des Videos und speicher sie irgendwo, da sie wiederverwendet wird.
 

Wie diese im Theme verwendet wird hängt von dem von dir momentan verwendetem Theme ab.

 

Welches ist das? Wer dein Theme entwickelt hat und unterstützt siehst du so nach.

Kai | 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

subtone
Shopify Partner
16 2 3

Hallo @Gamze1 

 

Versuch mal das Attribut playinline in deinem <video> Element auf playsinline zu ändern. Ich denke da fehlt bei dir ein "s" 😉

 

<video autoplay muted loop playsinline id="myVideo">
        <source src="https://cdn.shopify.com/videos/c/o/v/09c85019c8054438ac1bd57545a45d65.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
 </video>

 

Quelle: https://stackoverflow.com/a/45402661

Gamze1
Entdecker
45 0 2

@subtone  Hatte ich auch schon versucht aber auf dem Handy funktioniert es leider immer noch nicht ..

Gabe
Shopify Staff
17878 2832 4165

Hey @Gamze1 

 

Die Autoplay-Funktion für Videos auf mobilen Geräten wird von vielen mobilen Browsern, einschließlich Safari auf iOS, beschränkt oder deaktiviert. Es gibt mehrere Gründe für diese Beschränkungen, einschließlich der Vermeidung von Datenüberlastung für Benutzer mit begrenzten Datenplänen und der Verbesserung der Benutzererfahrung, indem unerwünschtes automatisches Abspielen von Medien verhindert wird.

 

Einige Dinge, die du versuchen könntest, um dieses Problem zu beheben, sind:

  1. Stelle sicher, dass dein Video stummgeschaltet ist. iOS erlaubt Autoplay nur, wenn das Video stummgeschaltet ist. Du hast bereits den muted-Attribut im video-Tag, was gut ist.

  2. Versuche, das Video vorab zu laden. iOS kann auch das automatische Abspielen von Videos verhindern, wenn sie nicht vollständig geladen sind. Du kannst das preload-Attribut in deinem video-Tag verwenden, um das Video beim Laden der Seite vorab zu laden:

 

<video autoplay muted loop playsinline preload="auto" id="myVideo">
    <source src="https://cdn.shopify.com/videos/c/o/v/09c85019c8054438ac1bd57545a45d65.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

 

  1. Versuche, das Video per JavaScript automatisch abzuspielen. Du könntest versuchen, das Video per JavaScript automatisch abzuspielen, sobald die Seite geladen ist. Hier ein Code Beispiel dafür:

 

window.addEventListener('load', function() {
    var video = document.getElementById('myVideo');
    video.play();
});

 

Beachte jedoch, dass selbst diese Methoden nicht immer funktionieren, da die endgültige Kontrolle über das automatische Abspielen von Medien beim Browser und beim Gerät liegt. 

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

Gamze1
Entdecker
45 0 2

@Gabe wo muss ich den Code in Schritt 3 einfügen?

Gabe
Shopify Staff
17878 2832 4165

Hey @Gamze1 

 

Ich nehme an du testest das zuerst in einer Theme Kopie Testumgebung. 

Einfach den JavaScript-Code in einem <script>-Tag einfügen entweder im Kopfteil (<head>) des theme.liquid oder kurz vor dem schließenden </body>-Tag.

 

Das kann wie folgt aussehen:

 

<!DOCTYPE html>
<html>
<head>
  <!-- Andere Kopfzeilen-Elemente hier -->
</head>
<body>
  <!-- Dein Inhalt hier -->

  <video autoplay muted loop playsinline id="myVideo">
    <source src="https://cdn.shopify.com/videos/c/o/v/09c85019c8054438ac1bd57545a45d65.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>

  <!-- JavaScript am Ende des Körpers -->
  <script>
    window.addEventListener('load', function() {
      var video = document.getElementById('myVideo');
      video.play();
    });
  </script>
</body>
</html>

 

Siehe mehr dazu hier.

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

Gamze1
Entdecker
45 0 2

@Gabe @Kannst du mal bitte schauen, ob ich es richtig eingefügt hab? Es funktioniert leider immer noch nicht

Gabe
Shopify Staff
17878 2832 4165

Hey @Gamze1 

 

Da ich hier nur der Community Moderator bin, kann und darf ich keine Shops überprüfen oder bearbeiten. Ich empfehle aber dich mit einem unserer Experten dich in Verbindung zu setzen denn du versuchts ja eine Reihe Anpassungen in deinen Theme einzubauen und dazu rate ich das mit einem Programmierer zu machen denn so einfach ist das nicht.

 

Hast du schon mit einem oder einer gesprochen? Viele findest du in unserer privaten FB Gruppe hier.

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