3222-Notes on making animations that are HTML5-video-friendly.sagews

Notes on making animations that are HTML5-video-friendly

First, the state of things (in September 2011, at any rate) is such that you need two formats to please everyone: WebM and H.264. So we'll need to make two files. See this page for tons of details on HTML5 video and browser support and this sage-devel thread on creating 3D animations.

You'll need Sage 4.7.1, ffmpeg, and probably ImageMagick / GraphicsMagick.

a = animate([plot(sin(x+t), (x,0, 2*pi)) for t in [0,.1..2]])

WebM video (Firefox, Chrome, Opera) is easy:

a.ffmpeg(savefile='sines.webm', delay=3)

Adjust options as you like. I use the default and it looks fine.

Now for H.264 (".mp4") for IE, Apple products, and Android. (Android 2.3+ has software support for WebM, but as I understand, there's no hardware support -- so WebM video will trash your battery life).  I ran into a problem here, since ffmpeg demanded that it get image files that have even dimensions, but the images were all 507 by 316! Maybe your images will all be good enough; in that case, this should work:

a.ffmpeg(savefile='sines.mp4', delay=3, ffmpeg_options="-vcodec libx264 -vpre hq")

ffmpeg demanded the "-vpre" option, which specifies a preset. There are lots; the "hq" one made a nice enough video.

If you need to fiddle with the images, you'll get a traceback that looks like:

CalledProcessError: Command 'cd "/home/drake/.sage/temp/foo/4039/dir_1"; sage-native-execute ffmpeg -y -f image2  -r 33 -g 3  -i /home/drake/.sage/temp/foo/4039/dir_1/%08d.png -vcodec libx264 -vpre hq outputfile.mp4' returned non-zero exit status 1

It would be nice if Sage would save the images to a specified resolution, but that seems impossible or very difficult. And perhaps there's a different problem with ffmpeg that you need to diagnose.

Go into the directory specified and you'll see all the image files. Try running the ffmpeg command to see what it went wrong; if you get the same error I did ("[libx264 @ 0x11a8010]width or height not divisible by 2 (507x316)" in bright red), you can fix the images with ImageMagick. We'll crop 1 pixel off the side of the image with a command like:

for f in 0*png ; do convert $f -crop 506x316 x$f ; done

You'll need to look at the images (you should be able to use "file xxx.png" or "identify xxxx.png") to get the resolution. The above command will create two new files for each existing PNG: 00123.png will become x00123-0.png and x00123-1.png. One of those files contains the main image, and the other contains the cropped bit -- a very thin image. Check to see which is which, then re-run the ffmpeg command, changing the file specification appropriately:

ffmpeg -y -f image2 -r 33 -g 3  -i /home/drake/.sage/temp/foo/4039/dir_1/x%08d-0.png -vcodec libx264 -vpre hq outputfile.mp4

That gave me a working .mp4 file that IE9 was happy enough with -- it wouldn't display the video in the browser, but popped up a Windows Media Player window. Which is good enough for me. Now you have a .webm and .mp4 file, and you can put them on a webpage inside a <video> tag or simply tell people to get the WebM file if using Firefox or Chrome and the MP4 file if using IE or an Apple product.

 

--Dan Drake