This page contains an example of using the HTML5 <video> tag to show an animation produced with Blender. It is a supplement to Section 14 of this set of notes.
The animation shows hierarchical rotational motion implemented in Blender. Two cubes spin at different speeds about their y-axis. The cubes are at the ends of a long bar that spins about its z-axis. The cubes are parented to the bar, so that they are carried along by its rotation. In order to get the continuous spinning at a constant speed, I used the techniques for rotational motion described in Section 14, in the subsection on "Animation and F-Curves". Here is the animation:
And here is the HTML tag that was used to embed the animation on the web page:
<video width="320" height="240" controls>
<source src="images/14/cube-spin.ogg" type="video/ogg">
<source src="images/14/cube-spin.mp4" type="video/mp4">
<b style="color:red">Sorry, but your browser does not support the video tag.</b>
</video>
Two <source> tags are required since there is no single format that will work on all major browsers. The first version, cube-spin.ogg, was created in Blender using the "Ogg Theora" format, a patent-free and open video format. It should work on Chrome, Firefox, and Opera. The second version, cube-spin.mp3, was saved in H.264 format, with MPEG-4 encoding. I should work on Internet Explorer and Safari, and it would also be accepted by Chrome. (This information comes from w3schools.com.)
The two animation files were each about one-half of a megabyte in size, for a 240-frame animation at 320-by-240 pixels.