Scroll progress doğruydu, istenen video zamanı da doğruydu. Görüntü her seek işleminde yine frame zero'ya dönüyordu. Görünür belirti scroll'u izlediği için animation kodu suçlu görünüyordu, fakat hata network response içinde başlamıştı.
Scroll-scrubbed build ancak delivery, seeking, codec seçimi ve layout ölçümünü tek sistem olarak ele aldığımızda güvenilir oldu. Scroll'u currentTime ile eşlemek işin en küçük parçasıydı.
Scrub öncesinde clip'i fetch edin
Düz src playback, video host'un byte range'i doğru sunmasına bağlıdır. Kullanılabilir range desteği yoksa browser gereken media segmentini alamaz ve rastgele seek frame zero'ya clamp edebilir. Davranış CDN ve cihaz arasında değişince bug, kararsız animation logic gibi görünür.
Clip'in tamamını Blob olarak fetch ettik, object URL oluşturduk ve videoya bu URL'yi verdik. Decoder artık öngörülebilir erişimi olan local resource üzerinde seek ediyordu. Component kalıcı olarak dispose edildiğinde object URL revoke edilmeli, media element hâlâ kullanırken edilmemelidir.
Bu tercih güvenilir local seek karşılığında startup transferi ve memory kullanır. Sınırı belli hero clip için uygundur, uzun video kütüphanesine düşünmeden uygulanmaz.
Seek isteklerini decoder çevresinde coalesce edin
Scroll, decoder'ın tamamlayabileceğinden daha hızlı yeni zaman isteyebilir. Element seeking durumundayken tekrar currentTime atamak güvenilir queue üretmez. İstekler düşebilir, telefonlarda decoder takılabilir.
Tek pending target tuttuk. Seek sürerken scroll yeni target ürettiğinde videoya hemen yazmak yerine pending değeri değiştirdi. seeked geldiğinde controller en son pending target'ı uyguladı. Ara konumlar bilinçli olarak kayboldu, çünkü scroll ilerledikten sonra eski ara frame'i göstermek fidelity değil latency ekler.
Current target'a yarım frame'den yakın hedefleri de atladık. Bunlar anlamlı biçimde farklı görüntü üretmez, fakat decoder'ı meşgul tutabilir. Scrubbing her scroll sample'ının akışını değil, backpressure ister.
Codec'i decoder seçsin
AV1, ardından HEVC, ardından H.264 hazırladık ve cihaz isminden tahmin etmek yerine browser'a neyi decode edebildiğini sorduk. İlk kabul edilen source Blob adayı oldu. AV1 bulunan desktop'ta clip 11.4MB'den 3.5MB'ye indi.
Codec seçimi, her asset yalnızca toplam dosya için değil seek için encode edildiyse işe yarar. Keyframe aralığı rastgele seek'in işini belirler. Gerçek scrub yolunu hedef browser'da test edin. Desteklenen codec otomatik olarak responsive encode demek değildir.
H.264 geniş fallback olarak kalsın ve seçilen source diagnostics içinde görünsün. Aksi halde cihaz özelindeki hata hangi asset'in oynadığı bilinmeden gelir.
Telefon farklı composition alır
Telefonlarda video scrub etmiyoruz. Section düz layout'a geçiyor ve normal görsel akış kullanıyor. Mobile decoder, memory pressure, thermal limit ve browser lifecycle aynı efekti pahalı ve kırılgan hale getiriyor. Frame kaçıran zayıf scrub, hikâyenin premium versiyonu değildir.
Bu performance bozulduktan sonra eklenen media query değil, ürün scope'udur. Mobile layout, frame-accurate kontrole bağlı olmadan içerik sırasını ve anlamını korur. Reduced-motion kullananlar da aynı stabil yolu almalıdır.
Büyük ekranda controller, section yararlı viewport dışında olduğunda işi durdurur ve deneyim bittiğinde kaynakları bırakır.
Font yüklendikten sonra yeniden ölçün
Pinned section ilk layout sırasında start ve travel distance değerini doğru ölçüyordu. Sonra web font geliyor, metin reflow oluyor ve offset eski kalıyordu. İlk ziyarette efekt bozuk, sonraki ziyaretlerde cache yüzünden doğru görünüyordu.
document.fonts.ready sonrasında, ilgili resize ve content değişiminde yeniden ölçtük. Scroll controller tek geometry kaynağı kullandı. Pinning layer ile video mapping ayrı range hesaplamadı.
Bu hafta uygulamak için önce range davranışını doğrulayın, sonra Blob seek'i yalnız test edin. Half-frame suppression taşıyan coalescing controller ekleyin. Seçilen codec'i, seek süresini ve düşen isteği loglayın. Desktop polish öncesinde phone layout'u düzleştirin. Son olarak font cache boşken ilk ziyareti deneyin. Scroll-scrubbed video, tempoyu scroll event değil decoder ve document geometry belirlediğinde ayakta kalır.