web-dev-qa-db-ja.com

HTML5アニメーションからビデオを作成する最良の方法

ビデオポッドキャストの短いイントロを作りたかった。オタクなWeb開発者であり、アニメーションツールへのアクセスや知識がまだないので、さまざまなhtml5テクニックを使用してイントロを行うことを試してみようと思いました。問題は、それをiMovieに簡単にドロップできるビデオクリップに変換する方法です。

必要に応じて、getImageDataを使用してフレームごとにpngをエクスポートすることでキャンバスのみを使用する場合、これは達成できると思います。唯一の欠点は、キャンバスだけに制限されていることです。私は新しいhtml5/css3/svgテクニックの全範囲を使用したいと思っていました。私はこの機能を一般的なWebで使用するために必要ではなく、自分自身のために、それを機能させるためにインストールなどが必要なものなら何でも喜んでいます。

必要に応じて、おそらくビデオスクリーンキャプチャツールを使用できると思いますが、完全なオープンソースチェーンを望んでいました。

最後に、私は一連のpngを作成し、ffmpegを使用してそれらを組み立てることを期待しています。自動化されたオープンソースの方法でこれを行う優れた方法を見つけたかっただけです。

更新基本的に私がやろうとしていることは、フラッシュなどの代わりにHTML5を使用することを明確にしたかったのですが、サービスを提供しようとはしていませんそれをインターネット上の他の人々に、私はそれをビデオに変換したいと思います、そしてそれは私のコンピューターを離れる必要は決してありません。それは実際にはLinuxサーバーではなくMacです。フラッシュがそれを行うことができるなら、なぜhtmlではないでしょう？それは人々が主張しようとしていることのようです。問題は、SWFを取得して標準のビデオに変換できることですが、JavaScriptまたはCSS3アニメーションでそれをどのように行うのですか？明らかに、スクリーンキャプチャツールは一種の仕事をすることができますが、それらは通常低いフレームレートであり、私の知る限り、プログラムで実行することはできません。

私が考えることができる最も近い種類のものはスクリーンショットツールではなく、webkit2pngのようなものです。単一のpngの代わりに、毎秒60 pngかかります。ある時点で、私は実際にそれを正確に実装しようとするかもしれませんが、他の誰かが何か良いことをしたかどうかを見たかったです。

例したがって、私は実際には組み込みのiMovieタイトルカードを使用してイントロを行いました。 これは良い例です 大体私がやりたいことの一種です。実際、CSS3アニメーションを少し使用すれば、かなり簡単なはずです。私が持っているものは悪くありませんが、より良いフォント/レイアウト制御を備えたカスタムグラフィックスを使用したいと思います。

htmlanimationwebkitscreenshot
32
Russell Leggett

これまでのところ、cコードの記述を必要としない最高の発見は、デスクトップにTitaniumを使用することです。 JavaScriptコードから利用できるtakeScreenshot関数を備えています。 takeScreenshot関数はデスクトップ全体のスクリーンショットを取得しますが、その切り取りを自動化するのは簡単です。たくさんのJavaScriptアニメーションライブラリがあれば、リアルタイムで実行できない場合でも、フレームごとにスクリーンショットを取得する方法でハッキングできるはずです。

CSSアニメーションを使用することはできませんが、JavaScriptで実行できるCSSアニメーションで実行できることは何であれ、フレームレートなどをより詳細に制御できることを考えると、これはおそらく最も柔軟なソリューションです。

さらに、これにより、ブラウザーで可能なすべてのものを使用できるようになり、html/css/js/svg/canvasを組み合わせます。

1
Russell Leggett

JavaScriptとPHP to create your video from your canvas animation） の両方を使用するコードのチュートリアルがあります。プログラムは、次のようにキャンバスアニメーションのフレームごとにフレームを保存します。映画、そしてあなたはあなたが選んだコーデックでこのフレームのスタックを特定のビデオフォーマットに変換できます。

リンクされたページからのコード。

(function () {
    var canvas = document.getElementById('c'),
        c = canvas.getContext('2d'),
        w = canvas.width, h = canvas.height,
        p = [], clr, n = 200;

    clr = [ 'red', 'green', 'blue', 'yellow', 'purple' ];

    for (var i = 0; i < n; i++) {
        // generate particle with random initial velocity, radius, and color
        p.Push({
            x: w/2,
            y: h/2,
            vx: Math.random()*12-6,
            vy: Math.random()*12-6,
            r: Math.random()*4+3,
            clr: Math.floor(Math.random()*clr.length)
        });
    }

    function frame() {
        // cover the canvas with 50% opacity (creates fading trails)
        c.fillStyle = 'rgba(0,0,0,0.5)';
        c.fillRect(0, 0, w, h);

        for (var i = 0; i < n; i++) {
            // reduce velocity to 99%
            p[i].vx *= 0.99;
            p[i].vy *= 0.99;

            // adjust position by the current velocity
            p[i].x += p[i].vx;
            p[i].y += p[i].vy;

            // detect collisions with the edges
            if (p[i].x < p[i].r || p[i].x > w-p[i].r) {
                // reverse velocity (direction)
                p[i].vx = -p[i].vx;
                // adjust position again (in case it already passed the Edge)
                p[i].x += p[i].vx;
            }
            // see above
            if (p[i].y < p[i].r || p[i].y > h-p[i].r) {
                p[i].vy = -p[i].vy;
                p[i].y += p[i].vy;
            }

            // draw the circle at the new postion
            c.fillStyle = clr[p[i].clr]; // set color
            c.beginPath();
            c.arc(p[i].x, p[i].y, p[i].r, 0, Math.PI*2, false);
            c.fill();
        }
    }

    // execute frame() every 30 ms
    setInterval(frame, 30);
}());
6
karlcow

よくTechsmith SnagitがAVIでキャプチャするか、プレミアムアプリケーションcamtasia（FlashビデオとWebページランチャーを生成）が機能します。触れたい機能のPowerPointスライドを作成し、詳細に説明したい実際のデモのページのHTMLセットを使用しないのはなぜですか。これが私が取っているアプローチです。

2
Hans

私の意見では、キャンバスのデータから画像を作成し、モジュール（_fluent-ffmpeg_、たとえば、ノードjsパッケージ）を介してそれらのすべての画像をビデオにコンパイルするのが最善だと私は思っています。非常に簡単ですが、FPS（フレームレート）に注意してください。たとえば、再帰的にrequestAnimationFrame()を使用すると、ビデオのfpsを変更できる可能性がある速度で画像を作成する場合、60 fpsになります。 。そのため、html5ビデオを読み取る代わりに、1/30秒ごとに時間を設定し（たとえば、30fpsビデオが必要な場合）、currentTimeからビデオの最後までの画像を作成する必要があります。また、キャンバスが1つしかない場合、複数のキャンバスを介して動画にアニメーションを適用すると、新しい空のキャンバスを作成し、すべてのキャンバスのデータを描画して、キャンバスごとに1つの画像ではなく1つの画像のみを作成できます。

フランスからの乾杯

1
rhanb

Flashにはこれを行う機能があります。 HTML5アニメーションは、HTML、CSS、JavaScript、画像の組み合わせです。一般に、JavaScriptタイマーは個々のDIVや画像などをアニメーション化するために使用されます。html5入力を受け取り、ビデオを直接エクスポートできるツールはありません。最近、私はこのサイト https://html5animationtogif.com/ を使用して、html5をmp4およびwebmに変換しました。キャンバスベースのアニメーションの主な問題の1つは、ブラウザで60fpsで実行できないことです。 1回の設定タイムアウトには約20ミリ秒かかります。 60fpsの場合、タイマー関数は16ミリ秒以内にループする必要があります。また、アニメーション効果にも依存します。エフェクトがCPUを消費する場合、タイマー機能は20ミリ秒以内にループを完了しません。ループをスキップして、40または60ミリ秒以内に完了する場合があります。

お役に立てれば。

0
parth patel

私はあなたの要件に似た何かをするツールに取り組みました。基本的には、cutycapt（またはCSSを含むHTMLを画像に変換するその他のツール）を使用し、必要なフレームレートに応じて一連のスクリーンショットを撮ります。

これが機能するためには、アニメーションは純粋にCSSアニメーションである必要があり、ツールはCSSを解析して中間フレームのCSSプロパティを補間します。

https://github.com/bpsagar/css2video

ツールが完全かどうかはわかりません。興味があればお知らせください。

0
Sagar Chakravarthy

私は過去にオンラインサイトで行ったことがあります。私はサイトにhtml5アニメーション http://html5animationtogif.com をアップロードして、アニメーションGIFファイルを取得しました。その後、gifファイルを https://cloudconvert.com/gif-to-mp4 にアップロードし、MP4ファイルを取得しました。これは、html5アニメーションをMP4に変換するための私の方法でした。これが最善の方法であったかどうかはわかりません。しかし、それは私のために働いた。この回答がお役に立てば幸いです。

0
SanS