utilizzando JavaScript/jQuery per accedere al contenuto immagine per un frame in un video

Question

Domanda

voglio scrivere codice efficiente per il gioco/manipolare le immagini in un browser Web utilizzando JavaScript. Penso che l'uso di un file video possa ridurre le richieste http. Come posso accedere a una versione png/jpg/bytecode di un singolo frame da un video?

Sfondo

Attualmente, ho una sequenza di ~ 1000 immagini, che variano sempre così un po ', che devono essere rapidamente accessibili sulla mia pagina. caricare le immagini tramite richieste HTTP richiede sempre (ovviamente) e man mano che la mia app cresce, è probabile che questo numero cresca da 1000 a 5000 a 10.000 ...

Le richieste Ajax per le singole immagini non funzioneranno, b/c Ho bisogno di caricare immediatamente l'immagine (e non ho il tempo di aspettare una nuova richiesta http).

La mia idea era di pre-elaborare un file video sul server che mostra l'avanzamento dell'immagine, un'immagine per fotogramma, per accelerare la velocità di download e le prestazioni del browser. Mi sento come se questo video potesse essere scaricato velocemente dal client in base alla velocità di visione dei video online. Mi sto bloccando su come ottenere il contenuto dell'immagine per una cornice fuori dal video.

HTML5?

Nota, non ho ancora esaminato l'HTML5, ma sarei disposto a considerare se può essere d'aiuto.

Answer 1

È possibile disegnare fotogrammi video su tela html5.

Ho creato this violino combinando this e this.

Il punto chiave è ottenere il fotogramma video corrente e disegnarlo nell'elemento canvas.

var delay=20; 
function draw(cvideo,ccanvas,canvas_width,canvas_height) { 
    if(cvideo.paused || cvideo.ended) return false; 
    ccanvas.drawImage(cvideo,0,0,canvas_width,canvas_height); 
    setTimeout(draw,delay,cvideo,ccanvas,canvas_width,canvas_height); 
} 

Dopo averlo inserito nella tela, è possibile fare quasi tutto con l'immagine.

Answer 2

Invece di utilizzare un file video è possibile utilizzare image sprites - in pratica combinare più immagini in un'unica grande immagine, di cui si mostra sempre solo la regione appropriata (supponendo che tutte le immagini abbiano le stesse dimensioni sarebbe facile) - questo sarebbe in gran parte ridurre il numero di richieste HTTP necessarie e accelerare il processo di caricamento a sua volta.