Question

首先，我想知道是否可以通过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

Answer 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动画的速度。

我可以将webkit页面呈现为高清视频吗？

1 个答案: