我可以将 webkit 页面渲染为高清视频吗？答案

【问题标题】：Can I render a webkit page to HD video?我可以将 webkit 页面渲染为高清视频吗？
【发布时间】：2012-12-03 07:43:38
【问题描述】：

首先，我想知道是否可以通过 prezi 幻灯片或类似 impress.js 的方式制作优质的高清视频。

我见过有人尝试从他们的浏览器页面制作截屏视频，但质量通常不是最佳的。（动作经常不流畅）

那么，是否可以将带有动画的 html 页面渲染到视频中？（也许使用 webkit 引擎？）

无需交互，仅播放正常的 jquery 动画（可能会减慢 webkit 引擎的速度，以便能够将页面呈现到某些视频文件）
通过交互记录页面上的所有动画

更新： 使用 Jan Dvorak 的提示，我尝试了这个：

<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>

但这似乎对此页面没有任何影响，例如：http://bartaz.github.com/impress.js/#/bored

【问题讨论】：

jQuery 使用系统时间来计时他们的动画，所以渲染器需要伪造页面的系统时间。
一旦你这样做了，任何捕获工具都应该这样做。
您链接的页面使用 CSS3 制作动画，而不是 jQuery。添加对 CSS3 动画的支持并不容易，但我会看看我能做什么。
请注意，原始问题专门说“jQuery 动画”。您链接的页面甚至不包含 jQuery。
IIUC，prezi 是基于 javascript 的，而不是基于 CSS3 的，所以你可以使用这种技术。

标签： video webkit impress.js prezi

【解决方案1】：

一旦你减慢了页面的时间，你可以使用任何以全分辨率捕获的记录工具，然后以相同的因素加快捕获速度。

jQuery 使用Date#getTime 来计时它的动画。页面脚本本身可能会使用其他方法进行计时。尝试将此脚本添加到您正在捕获的页面（在 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);
})()

演示：http://jsfiddle.net/DPhSv/2/

请注意，这假定页面使用 Javascript 制作动画，并且不会减慢 CSS3 动画的速度。

【讨论】：