Add support for different image types by specifying MIME type

Author: Hector Martin

Diff for: README

@@ -1,8 +1,10 @@
 == Introduction ==
 
 zip_player is a JavaScript library to load and play back animated images
-packaged as an uncompressed ZIP archive containing individual PNG frames.
-Frames are drawn onto a Canvas element.
+packaged as an uncompressed ZIP archive containing individual frames.
+Frames are drawn onto a Canvas element and may be any image MIME type
+supported by the browser (e.g. JPEG, PNG, GIF - though animated GIFs are not
+supported for obvious reasons).
 
 It also supports an unpacked mode where the images are directly referenced as
 individual URLs (e.g. data: URLs for client-side preview purposes).
@@ -49,6 +51,6 @@ See the LICENSE file for full license text.
 Note: The license does not apply to third-party JavaScript and test images in 
 the test/ directory. Those belong to their respective owners:
   - hon.zip and hon/ are public domain
-  - big_buck_bunny.zip is licensed under CC-BY 3.0:
+  - big_buck_bunny[_jpg].zip is licensed under CC-BY 3.0:
      (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org
 

Diff for: test/big_buck_bunny_jpg.zip

@@ -5,6 +5,7 @@
     <script src="jquery-2.1.1.js"></script>
     <script src="../zip_player.js"></script>
     <script src="meta.js"></script>
+    <script src="jpeg-meta.js"></script>
     <script src="hon-meta.js"></script>
     <style>
     #progress {
@@ -69,6 +70,18 @@
         $("#rewind").on("click", function() { p.rewind(); });
         $("#stop").on("click", function() { p.stop(); });
 
+        var options = {
+            // no source: unzipped animation
+            canvas: document.getElementById("canvasj"), // <canvas>
+            source: "big_buck_bunny_jpg.zip",
+            metadata: jpeg_meta, // TBD: json metadata format
+            chunkSize: 300000,
+            loop: true,
+            autoStart: true,
+            debug: true,
+        }
+        var pj = new ZipImagePlayer(options);
+
         var options = {
             // no source: unzipped animation
             canvas: document.getElementById("canvas2"), // <canvas>
@@ -100,7 +113,12 @@
     <div id="load"></div>
     <div id="curframe"></div>
     <canvas id="canvas" width=320 height=180></canvas>
+    (PNG)
+    <br>
+    <canvas id="canvasj" width=480 height=270></canvas>
+    (JPEG)
     <br>
     <canvas id="canvas2" width=100 height=100></canvas>
+    (PNG unpacked)
 </body>
 </html>