Der Scroll Progress war korrekt und die angeforderte Videozeit ebenfalls. Das Bild sprang bei jedem Seek trotzdem zu Frame null zurück. Weil das sichtbare Symptom dem Scroll folgte, wirkte der Animationscode schuldig. Der Fehler hatte aber in der Network Response begonnen.
Unser Scroll-Scrubbed Build wurde erst zuverlässig, als Delivery, Seeking, Codecwahl und Layoutmessung als ein System behandelt wurden. Scroll auf currentTime abzubilden war der kleinste Teil.
Den Clip vor dem Scrubbing fetchen
Plain src Playback hängt davon ab, dass der Video Host Byte Ranges korrekt liefert. Ohne brauchbaren Range Support können beliebige Seeks zu Frame null zurückfallen, weil der Browser das benötigte Media Segment nicht bekommt. Unterschiede zwischen CDN und Gerät lassen den Bug wie instabile Animation Logic wirken.
Wir luden den vollständigen Clip als Blob, erzeugten eine Object URL und wiesen sie dem Video zu. Der Decoder suchte danach in einer lokalen Ressource mit vorhersehbarem Zugriff. Die Object URL wird widerrufen, wenn die Component endgültig entsorgt wird, nicht solange das Media Element sie noch braucht.
Diese Entscheidung tauscht Startup Transfer und Memory gegen zuverlässiges lokales Seeking. Sie passt zu einem bewusst begrenzten Hero Clip, nicht ungeprüft zu einer Bibliothek langer Videos.
Seeks um den Decoder bündeln
Scroll kann neue Zeiten schneller verlangen, als der Decoder sie abschliesst. currentTime während eines laufenden Seek erneut zu setzen erzeugt keine verlässliche Queue. Requests können verschwinden, auf Phones kann der Decoder festhängen.
Wir hielten genau ein Pending Target. Kam während eines Seek ein neuer Wert, ersetzte er den wartenden Wert, ohne das Video sofort zu berühren. Bei seeked wendete der Controller das neueste Pending Target an. Zwischenpositionen verschwanden absichtlich. Einen alten Zwischenframe zu zeigen, nachdem Scroll weitergezogen war, hätte Latenz statt Fidelity erzeugt.
Targets näher als ein halber Frame am aktuellen Ziel wurden übersprungen. Sie können kein sinnvoll anderes Bild liefern, halten aber den Decoder beschäftigt. Scrubbing braucht Backpressure, nicht jeden Scroll Sample.
Der Decoder wählt den Codec
Wir stellten AV1, danach HEVC, danach H.264 bereit und fragten den Browser nach seiner Decoderunterstützung, statt Gerätetypen zu erraten. Die erste akzeptierte Quelle wurde zum Blob Kandidaten. Auf Desktop reduzierte AV1 den Clip von 11.4MB auf 3.5MB.
Codecwahl hilft nur, wenn jedes Asset für Seeking und nicht allein für kleinste Gesamtdatei encodiert ist. Keyframe Abstand bestimmt die Arbeit eines beliebigen Seek. Der echte Scrub Pfad muss im Zielbrowser laufen. Ein unterstützter Codec ist nicht automatisch ein responsiver Encode.
H.264 bleibt breiter Fallback und die Quellwahl wird in Diagnostics sichtbar. Sonst kommt ein gerätespezifischer Fehler ohne Information zum abgespielten Asset.
Phones erhalten eine andere Composition
Auf Phones scrubben wir das Video nicht. Die Section wird flach angeordnet und nutzt gewöhnliche visuelle Progression. Mobile Decoder, Memory Pressure, thermische Grenzen und Browser Lifecycle machen denselben Effekt teuer und fragil. Ein Scrub mit fehlenden Frames ist keine Premiumversion der Geschichte.
Das ist Product Scope, kein nachträglicher Media Query Patch. Das mobile Layout erhält Reihenfolge und Bedeutung ohne framegenaue Kontrolle. Reduced Motion bekommt denselben stabilen Pfad.
Auf grösseren Screens pausiert der Controller ausserhalb des nützlichen Viewports und gibt Ressourcen nach Ende der Experience frei.
Nach dem Laden der Fonts neu messen
Die gepinnte Section mass Start und Weg beim ersten Layout korrekt. Dann kam der Webfont, Text reflowte und die Offsets wurden alt. Beim ersten Besuch wirkte der Effekt kaputt. Spätere Besuche sahen wegen des gecachten Fonts korrekt aus.
Wir massen nach document.fonts.ready sowie bei relevanten Resize und Content Änderungen neu. Der Scroll Controller hielt eine Quelle für Geometrie, statt Pinning Layer und Video Mapping getrennte Ranges berechnen zu lassen.
Für diese Woche wird zuerst Range Verhalten geprüft, dann Blob Seeking isoliert. Ein Coalescing Controller unterdrückt Ziele innerhalb eines halben Frames. Ausgewählter Codec, Seek Dauer und verworfene Requests werden geloggt. Das Phone Layout wird vor Desktop Politur flach. Zuletzt läuft ein kalter Erstbesuch ohne Font Cache. Scroll-Scrubbed Video hält, wenn Decoder und Dokumentgeometrie das Tempo setzen, nicht das Scroll Event.