El video tiene un intervalo de fotogramas clave alto (establecido en 1), por lo que la búsqueda no es un problema. Se desplaza sin problemas en mi host local, sin embargo, está retrasado en la producción. Aquí hay una demostración . Cualquier ayuda sería muy apreciada ya que he estado atascado en esto por un tiempo.

Mi objetivo es hacer que el video se desplace sin problemas y sin demoras. Estoy usando una solicitud de búsqueda para poder descargar el video completo primero para ayudar con la fluidez, sin embargo, no parece funcionar. Aquí está mi código:

 $(document).ready(function () { var vid = $('#v0'); var url = "videos/video.mp4"; var intro = $("#intro"); var spinner = $(".spinner-border").closest("div"); var checkOnce = false; var videoLength = $('.heading').length * 2; vid.hide(); spinner.hide(); var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.responseType = "arraybuffer"; xhr.onload = function (oEvent) { var blob = new Blob([oEvent.target.response], { type: "video/mp4" }); vid.src = URL.createObjectURL(blob); vid[0].play(); // required to remove the fixed height intro.css('marginBottom', vid.height()); // refresh video frames on interval for smoother playback setInterval(function () { vid[0].pause(); vid[0].currentTime = (window.pageYOffset / (intro.height() / videoLength)); // change video position to fixed or relative when scrolling past container if ($(window).scrollTop() >= intro.offset().top + intro.outerHeight() - window.innerHeight + vid.height()) { if (checkOnce == false) { vid.css('position', 'relative'); intro.css('marginBottom', 0); checkOnce = true; } } else { if (checkOnce == true) { intro.css('marginBottom', vid.height()); vid.css('position', 'fixed'); checkOnce = false; } } }, 40); }; xhr.onprogress = function (oEvent) { if (oEvent.lengthComputable) { var progress = oEvent.loaded / oEvent.total; if (progress < 1) { spinner.show(); vid.fadeOut(); } else { spinner.hide(); vid.fadeIn(); } } } xhr.send(); });