Liquid, JavaScript, Themes
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
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
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>
@subtone Hatte ich auch schon versucht aber auf dem Handy funktioniert es leider immer noch nicht ..
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:
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.
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>
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
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
@Gabe @Kannst du mal bitte schauen, ob ich es richtig eingefügt hab? Es funktioniert leider immer noch nicht
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
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024