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 puedo fusionar el blob de audio y video en JavaScript / jQuery?
  • Video HTML5 cómo reproducir dos videos en un elemento de video
  • La interfaz MediaRecorder de Firefox solo proporciona nuevos datos de video cada dos segundos
  • ¿Por qué no fluyen los events de audio y video?
  • ¿Detecta en Javascript cuando se reinicia el bucle de <video> HTML5?
  • ¿Cómo puedo crear controles de video HTML5 personalizados?
  • Video de YouTube incorporado con velocidad personalizada (p. Ej., 3)
  • ¿Por qué el evento html5-video timeupdate se dispara dos veces en el browser Chrome?
  • ¿Cómo puedo agregar una image / DIV al reproducir video HTML 5 (como el anuncio de Youtube)?
  • Video HTML5: Modificar encabezados de request de range http
  • MediaElement.js - Flash Video no se reproducirá hasta que esté completamente cargado
  • Color dominante en video para cada cuadro
  • Grabe video y audio, y cárguelo en el server
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.