Video langsamer abspielen

[Leilany]

Hallo,

kann man den Default Wert von der Abspielgeschwindigkeit des Videos einstellen?
Ich möchte das Video mit Abspielgeschwindigkeit 0.75 abspielen lassen:

https://www.leilany.de/pages/ladengeschaft

VG

[Gabe]

Hey @Leilany 

Danke für den Link, und das ist in der Tat ein sehr schneller Video - da wird einem ja fast schwindelig! 😉

Ich habe den Video Code jetzt auf der Seite in der Chrome Developer Console unter die 🔎 genommen. Das kannst du auch gerne machen wie ich hier jetzt demonstriere (klicke in den .gif um ihn zu vergrößern - kann aber etwas dauern bis er lädt):

Wenn du es selber auf deiner Seite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Um die Abspielgeschwindigkeit eines Videos in deinem Shopify-Theme zu ändern, kannst du folgende Schritte befolgen:

1. Video-Element aktualisieren: Füge deinem <video>-Element eine eindeutige ID hinzu, wie ich weiter unten erkläre. Zum Beispiel:

<video id="myVideo" playsinline="playsinline" ... >

2. JavaScript zum Theme hinzufügen:

• Gehe zu deinem Shopify-Adminbereich.
• Klicke auf "Online-Store" und dann auf "Themes" -> "Actions" -> "Duplizieren" -> "Edit Code".
• Im linken Bereich siehst du eine Dateiliste. Suche und öffne die Datei theme.liquid oder theme.js. Wenn du theme.js (oder eine ähnliche JavaScript-Datei) hast, wäre das der ideale Ort für den Code. Falls nicht, kannst du ihn am Ende von theme.liquid einfügen.
• Füge den folgenden JavaScript-Code hinzu:

document.addEventListener("DOMContentLoaded", function() {
    var videoElement = document.getElementById("myVideo");
    if (videoElement) {
        videoElement.playbackRate = 0.75;
    }
});

Wenn du den Code in theme.liquid einfügst, stelle sicher, dass er innerhalb eines <script>-Tags steht:

<script>
document.addEventListener("DOMContentLoaded", function() {
    var videoElement = document.getElementById("myVideo");
    if (videoElement) {
        videoElement.playbackRate = 0.75;
    }
});
</script>

Speichere alle Änderungen und besuche deine Website, um zu überprüfen, ob das Video mit der gewünschten Geschwindigkeit abgespielt wird.

Du kannst auch die Abspielgeschwindigkeit eines Videos mit dem playbackRate-Attribut des <video>-Elements steuern. Allerdings erlaubt das HTML-Attribut dies nicht direkt. Du musst JavaScript verwenden, um dies zu erreichen. Hier, wie du es machen kannst:

• Gib deinem Video-Element eine eindeutige ID, damit du es leicht mit JavaScript auswählen kannst:

<video id="myVideo" playsinline="playsinline" autoplay="autoplay" loop="loop" controls="controls" preload="metadata" aria-label="Leilany-Blumen am Markt" poster="//www.leilany.de/cdn/shop/files/preview_images/2c86ae627fc948daa31416cc03f3ef71.thumbnail.0000000000_1100x.jpg?v=1685012956">
    <source src="https://cdn.shopify.com/videos/c/vp/2c86ae627fc948daa31416cc03f3ef71/2c86ae627fc948daa31416cc03f3ef71.HD-1080p-7.2Mbps-14928578.mp4" type="video/mp4">
    <img alt="Leilany-Blumen am Markt" src="//www.leilany.de/cdn/shop/files/preview_images/2c86ae627fc948daa31416cc03f3ef71.thumbnail.0000000000_1100x.jpg?v=1685012956">
</video>

Füge am Ende deines HTML-Dokuments (oder in einem separaten JavaScript-Datei) den folgenden JavaScript-Code hinzu:

document.addEventListener("DOMContentLoaded", function() {
    var videoElement = document.getElementById("myVideo");
    videoElement.playbackRate = 0.75;
});

Dieser Code stellt sicher, dass das Skript ausgeführt wird, sobald der gesamte Inhalt der Seite geladen ist. Anschließend wird die Abspielgeschwindigkeit des Videos auf 0,75 eingestellt.

Bitte beachte, dass nicht alle Browser das playbackRate-Attribut unterstützen. In den meisten modernen Browsern sollte dies jedoch problemlos funktionieren.