Hacer una cadena de imágenes como un video en javascript

Intento sintetizar un video usando una secuencia de imágenes en JavaScript. El problema es que el "video" es desigual, lo cual se solucionó usando una especie de búfer. Sin embargo, ahora el problema es que las imágenes se descargan mucho más rápido de lo que se generan.

Si tiene una fuente de imágenes que cambia, como una camera IP, puede probar el ejemplo a continuación. Lo que he notado es que, el "video" aún se actualiza bastante despacio, sin embargo, mientras miro un detector de packages, puedo ver que la image en realidad se está recuperando completamente mucho más rápido de lo que se está procesando.

Aquí está el ejemplo:

<HTML> <HEAD> <SCRIPT SRC="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </SCRIPT> <SCRIPT> function startVideo() { //when the buffer image is loaded, put it in the display $('#image-buffer').load(function() { var loadedImage = $(this).attr('src'); $('#image-displayed').attr('src', loadedImage); $(this).attr('src', 'http://img.javascriptes.com/javascript/image.jpg?nocache=' + Math.random()); }); $('#image-buffer').attr('src', 'http://img.javascriptes.com/javascript/image.jpg?nocache=' + Math.random()); } function stopVideo() { $('#image-buffer').unbind('load'); $('#image-buffer').attr('src', ''); $('#image-displayed').attr('src', ''); } </SCRIPT> </HEAD> <BODY> <BUTTON ONCLICK="startVideo();">Start Video</BUTTON><BR/> <BUTTON ONCLICK="stopVideo();">Stop Video</BUTTON><BR/> <IMG ID="image-displayed"/> <IMG ID="image-buffer" STYLE="visibility: hidden;"/> </BODY> </HTML> 

4 Solutions collect form web for “Hacer una cadena de imágenes como un video en javascript”

Buscando una solución yo mismo. Aquí hay un pequeño y agradable artículo sobre cómo hacer algo increíblemente conveniente para la carcasa de la camera IP.

http://techslides.com/convert-images-to-video-with-javascript

También intente cargar todas las imágenes en una tira de image (CSS stuf) (suponiendo que no haya una gran cantidad de imágenes) y ocultar todas las demás, excepto el desbordamiento: oculto. A continuación, cambie la position de la tira de image por el ancho de la image con setInterval (básicamente un control deslizante muy rápido sin animaciones de transición). En ese caso, todas las imágenes ya estarían cargadas Y renderizadas, y usted puede controlar el time entre cada "cuadro".

Es casi seguro que tu video sea desigual, a less que se garantice que el tamaño de las imágenes sea consistente de alguna manera. E incluso entonces, la carga de las imágenes dependerá de las condiciones de la networking. Sobre su problema de que el script cargue imágenes más rápido de lo que se muestran, no hay forma de determinar el origen de eso, a less que tengamos acceso real a su fuente.

Reescribiendo el código usando Stack Exchange API como fuente de la image y monitoreando la actividad usando Firebug, podemos ver que la actividad de la networking coincide aproximadamente con lo que vemos en la pantalla.

texto alternativo

El código usado es:

 $('#buffer').load(function(){ $('#video').attr('src', this.src); this.src = sites[Math.floor(Math.random() * sites.length)].logo_url + '?cache=' + new Date().getTime(); }).trigger('load'); 

Vea este código trabajando en vivo aquí: http://www.jsfiddle.net/yijiang/r957s/

Tuve un problema similar (en Firefox, no es un problema en otros browseres). Al final, literalmente descargué mi película como una tira de película, la coloqué en un desbordamiento de div oculto y compensé la image por la altura de un marco. ¡Guarda algunas k en el tamaño total del file para arrancar! Hice mi tira de película con gdlib

En lugar de cargar imágenes tan a menudo como sea posible, puede usar el método window.setInterval para hacer que una function se ejecute en un intervalo establecido, por ejemplo, diez veces por segundo.

Puede comenzar a cargar la siguiente image tan pronto como haya mostrado una image, pero en lugar de mostrar el evento de carga, puede dejar que la function que se está ejecutando en un intervalo lo haga.

  • Cómo determinar la tasa de fotogtwigs deseada en un elemento de video html
  • Seguimiento de estado de visibilidad de subtítulos ocultos de video HTML5
  • Video de YouTube incorporado con velocidad personalizada (p. Ej., 3)
  • El elemento <video> con bucle no reproduce videos a la perfección en Chrome o Firefox
  • Javascript Event Listener se cierra (?) De escuchar ... API de Youtube - Sin error de console
  • HTML5 y Javascript para reproducir videos solo cuando sea visible
  • Grabe video y audio, y cárguelo en el server
  • Seleccione la camera mientras usa navigate.getUserMedia ()
  • Transmitir un file de video a un reproductor de video html5 con Node.js para que los controles de video sigan funcionando.
  • html5 video volver a mostrar la image del póster onMouseOut
  • ¿Cómo puedo agregar una image / DIV al reproducir video HTML 5 (como el anuncio de Youtube)?
  • JWPlayer no puede reproducir video
  • Sin connection (CD, Thumb Drive, etc.) ¿Instalar HTML + Video sin installation?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.