2

最初に、preziスライドショーやimpress.jsのようなものから優れたHDビデオを作成できるかどうか疑問に思いました。

ブラウザページからスクリーンキャストを作成しようとしている人を見たことがありますが、品質が最適ではないことがよくあります。（動きはしばしば流暢ではありません）

それで、-より一般的に言えば-アニメーション付きの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 に答える