/* CSS für das Video-Scrubbing */
#video-scrubber-container {
position: relative;
width: 100%; /* Passt sich der Containerbreite an */
max-width: 1200px; /* Optional: Maximale Breite des Videos festlegen */
margin: 0 auto 10px auto; /* Zentrieren und etwas Abstand nach unten */
overflow: hidden; /* Verhindert Scrollbalken innerhalb des Containers */
min-height: 10vh; /* Beispiel: Mindesthöhe des Containers */
}
#scrollVideo {
position: sticky; /* Hält das Video im Viewport, während gescrubbed wird */
top: 0; /* Klebt es am oberen Rand des Viewport fest */
width: 100%;
height: auto; /* Behält das Seitenverhältnis bei */
display: block; /* Entfernt zusätzlichen Leerraum unter dem Video */
pointer-events: none; /* Deaktiviert Mausinteraktionen auf dem Video */
z-index: 10; /* Sicherstellen, dass das Video vollständig sichtbar ist, wenn es sticky ist */
}
.scrubber-spacer {
/* DRASSTISCH REDUZIERTER WERT für ein 5-Sekunden-Video, um Platz zu minimieren:
’50vh‘ bedeutet, dass der Spacer die halbe Höhe des Browserfensters hat.
Der gesamte Scrubbing-Bereich ist jetzt video-hoehe + 50vh.
Das Video wird sehr schnell durchspulen.
Wenn es zu schnell ist: Erhöhen Sie den Wert (z.B. auf 70vh oder 100vh).
Wenn Sie noch weniger Platz wollen, versuchen Sie 30vh, aber das Video spult dann extrem schnell. */
height: 3vh; /* Stark reduzierter Wert für Desktop */
position: relative;
z-index: 1;
background: transparent; /* Der Spacer selbst ist unsichtbar */
}
/* Optional: Fügen Sie hier weitere responsive CSS-Regeln hinzu, wenn nötig */
@media (max-width: 768px) {
#video-scrubber-container {
margin-bottom: 30px;
}
.scrubber-spacer {
/* Noch geringerer Wert für Mobilgeräte */
height: 3vh; /* Beispiel für Mobilgeräte */
}
}
document.addEventListener(‚DOMContentLoaded‘, () => {
const video = document.getElementById(’scrollVideo‘);
const videoScrubberContainer = document.getElementById(‚video-scrubber-container‘);
const scrubberSpacer = videoScrubberContainer ? videoScrubberContainer.querySelector(‚.scrubber-spacer‘) : null;
if (!video || !videoScrubberContainer || !scrubberSpacer) {
console.warn(‚Video scrubbing elements not found on this page. Script stopped.‘);
return;
}
let videoDuration = 0;
let rafScheduled = false;
const updateVideoProgress = () => {
if (videoDuration === 0 || isNaN(videoDuration) || !isFinite(videoDuration)) {
rafScheduled = false;
return;
}
const containerRect = videoScrubberContainer.getBoundingClientRect(); // Position des Gesamtcontainers im Viewport
// Definieren des gesamten Scroll-Bereichs, über den das Video scrubben soll:
// Start: Wenn der untere Rand des Containers in den Viewport kommt (also der Container von unten sichtbar wird)
// Ende: Wenn der obere Rand des Containers den Viewport verlassen hat (der Container nach oben aus dem Bild ist)
// Die totale Höhe, die der Container auf dem Bildschirm „passieren“ muss.
// Dies ist die Höhe des Containers selbst + die Höhe des Spacers + die Höhe des Viewports.
// Dadurch beginnt das Scrubben, wenn der Container unten in den Viewport kommt,
// und endet, wenn er oben aus dem Viewport verschwunden ist.
const totalScrubbingScrollDistance = videoScrubberContainer.offsetHeight + window.innerHeight;
// Aktuelle Scroll-Position relativ zum Start des Scrubbing-Bereichs
// Der Fortschritt ist 0, wenn der untere Rand des Containers genau an window.innerHeight ist
// und 1, wenn der obere Rand des Containers genau bei 0 ist.
const currentScrollPositionInScrubbingZone = window.scrollY – (videoScrubberContainer.offsetTop – window.innerHeight);
let scrollProgress = currentScrollPositionInScrubbingZone / totalScrubbingScrollDistance;
const clampedProgress = Math.max(0, Math.min(1, scrollProgress));
video.currentTime = clampedProgress * videoDuration;
rafScheduled = false;
};
const onScroll = () => {
if (!rafScheduled) {
requestAnimationFrame(updateVideoProgress);
rafScheduled = true;
}
};
const onLoadedMetadata = () => {
videoDuration = video.duration;
console.log(‚Video duration:‘, videoDuration);
video.pause();
video.removeEventListener(‚loadedmetadata‘, onLoadedMetadata);
onScroll(); // Initial update, jetzt sicher nach Definition
};
video.addEventListener(‚loadedmetadata‘, onLoadedMetadata);
if (video.readyState >= 1) {
onLoadedMetadata();
} else {
video.load();
}
window.addEventListener(’scroll‘, onScroll);
});
Hersteller mit den wir Zusammenarbeiten
und weitere Hersteller
