Hey @Cramer
Meinst du so wie in diesem Shop Beispiel? Es ist definitiv möglich, eine einfache HTML-Datei zu erstellen, die mehrere MP4-Videos automatisch hintereinander in einer Endlosschleife abspielt. Dazu benötigst du keine CSS-Styles oder JavaScript, es sei denn, du möchtest zusätzliche Funktionalitäten oder Styles hinzufügen. Hier ein Beispiel, wie der HTML-Code aussehen könnte:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Video Loop</title>
</head>
<body>
<video id="videoPlayer" width="320" height="240" controls>
<source src="meinErstesVideo.mp4" type="video/mp4">
Ihr Browser unterstützt das Video-Tag nicht.
</video>
<script>
// Liste deiner Videos
var videos = [
"meinErstesVideo.mp4",
"meinZweitesVideo.mp4",
"meinDrittesVideo.mp4"
// Füge hier weitere Videos hinzu
];
// Aktueller Index des Videos
var videoIndex = 0;
var player = document.getElementById('videoPlayer');
player.addEventListener('ended', function() {
videoIndex++; // Zum nächsten Video wechseln
if (videoIndex >= videos.length) {
videoIndex = 0; // Zurück zum ersten Video
}
player.src=videos[videoIndex]; // Videoquelle ändern
player.play(); // Video abspielen
}, false);
// Automatisches Abspielen des ersten Videos beim Laden der Seite
player.play();
</script>
</body>
</html>
- Der
<video>-Tag ist das HTML-Element, das zum Einbetten von Videodateien verwendet wird. Der controls-Attribut ist optional und fügt die Standardsteuerelemente für Wiedergabe, Pause usw. hinzu.
- Die
videos-Array enthält die Pfade zu deinen Videodateien. Diese Pfade müssen relativ zu der Position der HTML-Datei sein, wenn sie lokal abgespielt werden.
- Das
ended-Event des Video-Players wird ausgelöst, wenn ein Video zu Ende ist. Der Event-Listener, den wir hinzugefügt haben, wechselt dann zum nächsten Video in der Liste.
- Wenn das letzte Video in der Liste beendet ist, fängt die Wiedergabe wieder vom ersten Video an (
videoIndex = 0), was die Endlosschleife erstellt.
- Das Skript setzt das Video automatisch in Gang, sobald die Seite geladen wird.
Du musst nur die Pfade deiner Videos in das Array videos eintragen und sicherstellen, dass alle Videodateien im selben Verzeichnis wie deine HTML-Datei gespeichert sind. Dann kannst du diese HTML-Datei in jedem modernen Webbrowser wie Firefox öffnen, und die Videos sollten automatisch abgespielt 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
