How to setup saving MP4 movies from HAniS -- the HTML5 AnimationS webapp

Page updated: September, 2021


When you want to allow users to save an "MP4" movie file of the current HAniS animation, you should do the following:

  1. In the current (version 4.43 and later) HAniS code ZIP file, you will find another JavaScript file, h264-mp4-encoder.web.js, which you must also put into the same directory as the HAniS JavaScript code is located.

  2. Add <script src="h264-mp4-encoder.web.js"> </script> to your HTML along with the hanis.js or hanis_min.js

  3. In your "configuration", add mp4 to the list of "controls" (or "bottom_controls")

  4. If you want to provide for a filename to save the MP4 to, include the "parameter", mp4_filename= (The default is "hanimate.mp4".)

  5. If you want the user to be prompted for a different filename, include the "parameter", mp4_prompt=

  6. If you want to change the default quality of the saved mp4 file, include the "parameter" mp4_quantization= . The value may range from 10 (high quality, large file!) to 51 (low quality, small file). The default for this is 27.

    In one test case (with more than 330 frames!), the MP4 file produced by using 27 was 61Mb, while a value of 33 led to 34Mb. However, a value of 19 resulted in a 121Mb file.

When the user clicks the "Make MP4" button (or whatever you relabeled it as), the label will change to say "Working". At this point, the animation will run through once from the beginning. After this, if you have not set a "mp4_prompt", the file will be save; if you have set a "mp4_prompt", then the user will be prompted to enter a filename.

The frame rate of the MP4 will be approximately the same as the frame rate in HAniS (as calculated from the "dwell" value). Also, the size of the images will be the size of the images displayed in HAniS.


Back to the HAniS homepage