--- title: play motion-JPEG video using javascript (in browser, no plugins, minimal JS) author: tracey pooh date: 2013-11-15 type: post featured: traceymonet.jpg categories: - coding - video tags: - coding - geek - javascript - motion-JPEG - video aliases: - /2013/11/14/play-motion-jpeg-video-using-javascript-in-browser-no-plugins-minimal-js/ - /mj/ - /mj - /2013/11/15/play-motion-jpeg-video-using-javascript-in-browser-no-plugins-minimal-js/ - /2013/11/play-motion-jpeg-video-using-javascript-in-browser-no-plugins-minimal-js/ comment: --- # Motion JPEG test
click a button above to try
Huh?

This extracts the JPEG frames, _found within an `.avi` file bytestream_, likely without the huffman compression tables (though chrome dont care 8-). Then it base64 encodes each frame, inserting each frame into a dynamic <img> tag to "play the .avi file".

Add in a short display timeout and keep overlaying images, and you have your "video", using <img> tags, like a flip book.

Works

Nope

(probably not happy w/ missing huffman compression tables in img headers)
Originally created 2006 by Tracey Jaquith. minor updates to jQuery and simplifying 2013

Source (or "View Source"):