clock.html

<style>
* {font-family: sans-serif;}
</style>
<progress id="progress" value="0" max="60" min="0" style="width: 300px"></progress>
<br>
<canvas id="canvas" width="150" height="150"></canvas>
<video id="awesome" width="150" height="150" controls autoplay loop></video>
<br>
Status: <span id="status">Idle</span>
<a style="display:none" id="download" download="clock.webm">Download WebM</a>

<script src="whammy.js"></script>
<script>
// use requestanimation frame, woo!
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

//stolen wholesale off mozilla's wiki
function clock(time){
	var now = new Date();
	now.setTime(time);
	var ctx = document.getElementById('canvas').getContext('2d');
	ctx.save();
	ctx.fillStyle = 'white'
	ctx.fillRect(0,0,150,150); // videos cant handle transprency
	ctx.translate(75,75);
	ctx.scale(0.4,0.4);
	ctx.rotate(-Math.PI/2);
	ctx.strokeStyle = "black";
	ctx.fillStyle = "white";
	ctx.lineWidth = 8;
	ctx.lineCap = "round";

	// Hour marks
	ctx.save();
	for (var i=0;i<12;i++){
		ctx.beginPath();
		ctx.rotate(Math.PI/6);
		ctx.moveTo(100,0);
		ctx.lineTo(120,0);
		ctx.stroke();
	}
	ctx.restore();

	// Minute marks
	ctx.save();
	ctx.lineWidth = 5;
	for (i=0;i<60;i++){
		if (i%5!=0) {
			ctx.beginPath();
			ctx.moveTo(117,0);
			ctx.lineTo(120,0);
			ctx.stroke();
		}
		ctx.rotate(Math.PI/30);
	}
	ctx.restore();

	var sec = now.getSeconds();
	var min = now.getMinutes();
	var hr  = now.getHours();
	hr = hr>=12 ? hr-12 : hr;

	ctx.fillStyle = "black";

	// write Hours
	ctx.save();
	ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
	ctx.lineWidth = 14;
	ctx.beginPath();
	ctx.moveTo(-20,0);
	ctx.lineTo(80,0);
	ctx.stroke();
	ctx.restore();

	// write Minutes
	ctx.save();
	ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
	ctx.lineWidth = 10;
	ctx.beginPath();
	ctx.moveTo(-28,0);
	ctx.lineTo(112,0);
	ctx.stroke();
	ctx.restore();

	// Write seconds
	ctx.save();
	ctx.rotate(sec * Math.PI/30);
	ctx.strokeStyle = "#D40000";
	ctx.fillStyle = "#D40000";
	ctx.lineWidth = 6;
	ctx.beginPath();
	ctx.moveTo(-30,0);
	ctx.lineTo(83,0);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(0,0,10,0,Math.PI*2,true);
	ctx.fill();
	ctx.beginPath();
	ctx.arc(95,0,10,0,Math.PI*2,true);
	ctx.stroke();
	ctx.fillStyle = "#555";
	ctx.arc(0,0,3,0,Math.PI*2,true);
	ctx.fill();
	ctx.restore();

	ctx.beginPath();
	ctx.lineWidth = 14;
	ctx.strokeStyle = '#325FA2';
	ctx.arc(0,0,142,0,Math.PI*2,true);
	ctx.stroke();

	ctx.restore();

	return ctx;
}

// the actual demo code, yaaay
var last_time = +new Date;
var video = new Whammy.Video(15);
var progress = document.getElementById('progress');

function nextFrame(){
	progress.value++;
	var context = clock(last_time += 1000);
	video.add(context);
	if(progress.value / progress.max < 1){
		requestAnimationFrame(nextFrame);
		document.getElementById('status').innerHTML = "Drawing Frames";
	}else{
		document.getElementById('status').innerHTML = "Compiling Video";
		requestAnimationFrame(finalizeVideo); // well, should probably use settimeout instead
	}
	
}

function finalizeVideo(){
	var start_time = +new Date;
	var output = video.compile();
	var end_time = +new Date;
	var url = webkitURL.createObjectURL(output);

	document.getElementById('awesome').src = url; //toString converts it to a URL via Object URLs, falling back to DataURL
	document.getElementById('download').style.display = '';
	document.getElementById('download').href = url;
	document.getElementById('status').innerHTML = "Compiled Video in " + (end_time - start_time) + "ms, file size: " + Math.ceil(output.size / 1024) + "KB";

}

nextFrame();
</script>