Tratando de lograr un efecto de búsqueda a través de un video cuando se desplaza la página. Esto se logró exportando todos los fotogramas del video a imágenes JPEG, precargando las imágenes y renderizándolas en un canvas . Sin embargo, este enfoque utiliza mucho ancho de banda y tarda mucho en cargarse en redes lentas.
Intentar lograr el mismo efecto renderizando un video en un canvas no funciona tan bien como el enfoque basado en imágenes.
Aquí hay una demostración de trabajo con el enfoque basado en video:
https://codesandbox.io/s/infalible-chaum-grvi0r?file=/index.html
Dado que HTMLMediaElement.fastSeek() no tiene una amplia cobertura de navegador, ¿cómo se puede lograr una velocidad de reproducción en tiempo real de 30-60 FPS?
Aquí está el código relevante para el efecto (consulte el enlace CSB arriba para ver el código completo):
const video = document.querySelector("video"); const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); (function tick() { requestAnimationFrame(tick); const { scrollHeight, clientHeight, scrollTop } = document.body; const maxScroll = scrollHeight - clientHeight; const scrollProgress = scrollTop / maxScroll; canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; // This is the line that causes the issue video.currentTime = video.duration * scrollProgress; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); })();El problema se debe a detalles de drawImage() como se indica aquí , debe llamarse solo después de seeked evento buscado. El siguiente código resuelve el problema mediante el uso de un valor centinela ( seeked = false ) que bloqueará la ejecución de drawImage() hasta el próximo evento seeked :
const video = document.querySelector("video"); const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); let seeked; (function tick() { requestAnimationFrame(tick); if (seeked) { seeked = false; const { scrollHeight, clientHeight, scrollTop } = document.body; const maxScroll = scrollHeight - clientHeight; const scrollProgress = scrollTop / Math.max(maxScroll, 1); canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; // This is the line that causes the issue video.currentTime = video.duration * scrollProgress; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); } })(); video.addEventListener('seeked', () => { seeked = true; }); video.currentTime = .001;