2

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

4

1 回答 1

0

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

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

于 2012-12-03T08:43:03.673 回答