Using Javascript / jquery to access image frame for frame in video

Question

Question

I want to write efficient code for playing / managing images in a web browser using JavaScript. I think using a video file can reduce HTTP requests. How can I access the version of png / jpg / bytecode of one frame from a video?

Background

Currently, I have a sequence of 1000 images that change anyway, which should be quickly available on my page. images are downloaded by HTTP requests forever (obviously), and as my application grows, it is likely that this number will increase from 1000 to 5000 to 10000 ...

Ajax requests for individual images will not work, b / c I need the image to load immediately (and you don’t have time to wait for a new HTTP request).

My idea was to pre-process the video file on the server, which shows the progression of the image - one image per frame - to speed up loading and browser performance. I feel that this video can be quickly downloaded to the client depending on the speed of watching the video on the Internet. I went in cycles on how to receive the image for a frame from video.

HTML5?

Notice, I haven't looked at HTML5 yet, but would be willing to consider if this might help.

Answer 1

You can draw video frames on html5 canvas.

I created this script by combining this and this .

The key point is getting the current frame of the video and drawing it into the canvas element.

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); } 

After hitting the canvas, you can do almost anything with the image.

Answer 2

Instead of using a video file, you can use image sprites - basically combine several images into one large image, of which you always show only the corresponding region (assuming all the images are the same size, that would be easy) - this will greatly reduce the number necessary HTTP requests and speed up the download process in turn.