title: Using Javascript/jquery to access picture content for a frame in a video
body: <p><strong>Question</strong></p>
  
  <p>I want to write efficient code for playing/manipulating images in a web browser using JavaScript. I think using a video file may cut down http requests. <em>How can I access a png/jpg/bytecode version of a single frame from a video?</em></p>
  
  <p><strong>Background</strong></p>
  
  <p>Currently, I have a sequence of ~1000 images, which vary ever-so-slightly, that need to be quickly accessible on my page. loading the images via HTTP requests is taking forever(obviously), and as my app grows, it is likely that this number will grow from 1000 to 5000 to 10,000 ... </p>
  
  <p>Ajax requests for individual images will not work, b/c I need the image to load immediately (and don't have time to wait for a new http request). </p>
  
  <p>My idea was to pre-process a video file on the server which shows the image progression- one image per frame-to speed up the rate of download and the browser's performance. I feel like this video could download to the client quickly based on the speed of watching videos online. I'm getting stuck on how to get picture content for a frame out of the video.</p>
  
  <p><strong>HTML5?</strong></p>
  
  <p>Note, I haven't looked into HTML5 yet, but would be willing to consider if it may help.</p>