Tengo un video MP4 de un producto que muestra un 360 del producto (por lo que parece que está girando). Lo tengo en reproducción automática en la página y se ve muy bien.
Quiero que el usuario pueda hacer clic y arrastrar el video para básicamente rebobinar o adelantar el video, para que puedan desplazarse hacia adelante y hacia atrás y girar el producto como deseen.
Usamos la biblioteca js-cloudimage-360-view y usamos imágenes, pero como queríamos que esto fuera lo más suave posible, cada color tenía imágenes 360 y los tiempos de carga no eran buenos, tenemos MP4 que son pequeños en tamaño y se cargan rápido pero es solo el lavado que no puedo hacer bien.
También había echado un vistazo a este https://codepen.io/webandapp/pen/xEjjOJ , pero está muy nervioso, esencialmente queremos que si el usuario arrastra hacia la derecha, avance rápidamente mientras arrastra, cuando se detenga, debería reproducirse. desde ese punto (y rebobina si se arrastra hacia la izquierda); esto debería ser lo más fluido posible.
El video es solo un elemento de video HTML como este:
<video id="three-sixty-video" preload="auto" controls loop playsinline autoplay muted> <source src="/video/video-1.mp4" type="video/mp4;"> </video>La limpieza de un video transmitido está limitada por la velocidad a la que se puede descargar, decodificar y mostrar el video.
Para un video grande en la mayoría de los dispositivos y conexiones, no es práctico/posible hacer todo esto tan rápido como un usuario puede desplazarse por la línea de tiempo del video.
Esta es la razón por la cual los contenedores de video (mp4, etc.) a menudo incluyen una pista de imágenes en miniatura que se muestran cuando el usuario se desplaza por la línea.
En otras palabras, en realidad no es el video que ves en la imagen pequeña en la línea de tiempo, sino la miniatura apropiada para ese momento en el video.
Cuando el usuario deja de buscar, el reproductor solicita esa sección del video, la decodifica y la muestra. Esto (generalmente) no es inmediato.
Si su video es lo suficientemente pequeño y se descarga por completo, es posible que descubra que puede borrar tan rápido como desee, pero incluso entonces puede depender del dispositivo/cliente: una prueba local rápida con una cantidad de videos parece sugerir que debería borrarse bien. cuando esté disponible localmente:
Como nota al margen, si decide que la solución es descargar el video por completo antes de reproducirlo, también es un desafío interesante. La mayor parte del esfuerzo generalmente se enfoca en lo contrario, permitiendo que un video comience a reproducirse antes de que se descargue por completo. Puede encontrar que, siempre que el video no sea demasiado grande, tener la información del encabezado al final (el átomo de MooV para mp4) forzará al navegador a descargarlo por completo. Esto es lo opuesto al inicio rápido de mp4 que verá discutido en algunos lugares. No estoy seguro de cuán confiable será esto, ya que creo que algún navegador puede ser lo suficientemente inteligente como para 'buscar' en el video al realizar diferentes solicitudes de bytes al principio y al final para encontrar los metadatos.