Espero que alguien pueda ayudar con una corrección aquí. Estoy creando un video que se reproduce a medida que se desplaza, el código funciona sin problemas, pero tengo un problema al usar cualquier otro video que no sea el de Apple que pude encontrar.

La izquierda en el codepen está extraída de Apple y la derecha es mi video redimensionado. Independientemente de la configuración que haya ingresado para el video (tipo/valor de tasa de bits, más un montón de cualquier cosa y todo), nunca coincidirá con el mismo flujo fluido. ¿Alguien sabría qué está haciendo Apple para optimizar su video para una reproducción tan fluida aquí?

Codepen: https://codepen.io/andrew-leto/pen/PoRPqWE

 <style> #video-player { background: unset; width: 600px; float: left; margin-right: 20px; } #video-player-2 { background: unset; width: 600px; float: left; margin-right: 20px; } .scroll-video {height: 500vh;} .content {height: 80vh; width: 100%; position: sticky; top:75px; display: flex; flex-direction: column; justify-content: center; align-items: center;} video {width: 100%;} </style> <div id="video-player" class="scroll-video"> <div class="content"> <video width="600" autobuffer preload muted loop src="https://www.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4"></video> </div> </div> <div id="video-player-2" class="scroll-video"> <div class="content"> <video width="600" autobuffer preload muted loop src="https://fiskeangling.com.au/test/macpro_main_desktop_2.mp4"></video> </div> </div> <script> const registerVideo = (bound, video) => { bound = document.querySelector(bound); video = document.querySelector(video); const scrollVideo = ()=>{ if(video.duration) { const distanceFromTop = window.scrollY + bound.getBoundingClientRect().top; const rawPercentScrolled = (window.scrollY - distanceFromTop) / (bound.scrollHeight - window.innerHeight); const percentScrolled = Math.min(Math.max(rawPercentScrolled, 0), 1); video.currentTime = video.duration * percentScrolled; } requestAnimationFrame(scrollVideo); } requestAnimationFrame(scrollVideo); } registerVideo("#video-player", "#video-player video"); registerVideo("#video-player-2", "#video-player-2 video"); </script>

¡Gracias a todos!