Can I render a webkit page to HD video?

Question

First I was wondering if it would be possible to make a good HD video from a prezi slideshow or something like impress.js.

I've seen people trying to make screencasts from their browser page, but the quality is often sub optimal. (motion often not fluent)

So, is it possible to render a - speaking more generally - html page with animations to a video? (Perhaps using the webkit engine?)

• without interaction, just playing the normal jquery animations (perhaps slowing down the webkit engine to be able to render the pages to some video file)
• with interaction recording all animations on the page

Update: Using Jan Dvorak's tip I tried this:

<a href="javascript:(function(){
   var factor = 10; 
   function slower(x){
      return function(){
        return x.apply(this,arguments)/factor;
      }
    }
function longer(x){
      return function(f, time){
        time = time * factor;
        return x.apply(this,arguments);
    }
  }
  Date.prototype.getTime = slower(Date.prototype.getTime);
  Date.now = slower(Date.now);
  setTimeout = longer(setTimeout);
  setInterval = longer(setInterval);
  alert('Warning, jQuery slowed down'); 
 })();">Test bookmarklet!</a>

But this not seem to have any effect on a this page for example: http://bartaz.github.com/impress.js/#/bored

Answer 1

Once you slow the time for the page, you can use any recording tool that captures at full resolution, then speed up the capture by the same factor.

jQuery uses Date#getTime to time its animations. The page script itself might use other methods for timing. Try adding this script to the page you're capturing (tested in Chrome):

(function(){
  var factor = 10; //or choose your own. Higher slowdown = smoother capture.

  function slower(x){
    return function(){
      return x.apply(this,arguments) / factor;
    }
  }

  function longer(x){
    return function(f, time){
      time = time * factor;
      return x.apply(this,arguments);
    }
  }

  Date.prototype.getTime = slower(Date.prototype.getTime);
  Date.now = slower(Date.now);
  setTimeout = longer(setTimeout);
  setInterval = longer(setInterval);
})()

demo: http://jsfiddle.net/DPhSv/2/

Note that this assumes the page uses Javascript for animations, and does not slow down CSS3 animations.