it-swarm.com.de

die beste Möglichkeit, ein Video aus einer HTML5-Animation zu erstellen

Ich wollte ein kurzes Intro für einen Video-Podcast machen. Als geeky Web-Entwickler, der noch nicht über Animationswerkzeuge oder über Kenntnisse von Animationswerkzeugen verfügte, dachte ich, ich könnte mich beim Intro mit verschiedenen HTML5-Techniken versuchen. Das Problem ist, wie kann ich daraus einen Videoclip machen, den ich leicht in iMovie ablegen kann?

Wenn ich muss, denke ich, kann dies erreicht werden, wenn ich nur Canvas verwende, indem ich mit getImageData einen Frame jedes Bildes exportiere. Der einzige Nachteil ist, dass ich nur auf Leinwand beschränkt bin. Ich hatte gehofft, die gesamte Palette der neuen HTML5/Css3/SVG-Techniken zu verwenden. Ich brauche diese Funktion nicht für den allgemeinen Webgebrauch, nur für mich selbst. Daher bin ich für alles, was Installation usw. erfordert, glücklich, damit es funktioniert.

Wenn ich muss, kann ich wahrscheinlich ein Video-Screen-Capture-Tool verwenden, aber ich hoffte auf eine vollständige Open-Source-Kette.

Am Ende erwarte ich, dass ich eine Reihe von PNGs erstellen und sie mithilfe von ffmpeg zusammenstellen werde. Ich habe nur gehofft, einen großartigen Weg zu finden, dies automatisiert und auf Open Source-Basis durchzuführen.

Update Ich wollte nur klarstellen, dass im Grunde HTML5 anstelle von Flash verwendet wird, aber ich versuche nicht, es anderen Personen im Internet zur Verfügung zu stellen. Ich möchte es konvertieren Es ist ein Video, und es muss niemals meinen Computer verlassen, der eigentlich ein Mac und kein Linux-Server ist. Wenn Flash es kann, warum nicht HTML, richtig? Das scheint das zu sein, was die Leute behaupten wollen. Das Problem ist, ich kann eine SWF-Datei in ein Standard-Video umwandeln, aber wie machen Sie das mit Javascript- oder CSS3-Animationen? Offensichtlich kann ein Screen-Capture-Tool die Arbeit erledigen, aber diese sind normalerweise niedrig und können meines Wissens nicht programmgesteuert ausgeführt werden.

Ich kann mir nicht vorstellen, dass es sich bei Screenshots um ein Tool wie webkit2png handelt. Nur statt eines einzelnen Png würden 60 Png pro Sekunde benötigt. Irgendwann würde ich vielleicht versuchen, genau das zu implementieren, aber ich wollte sehen, ob jemand anderes etwas Gutes hatte.

Example Also habe ich eigentlich nur ein Intro mit den eingebauten iMovie-Titelkarten gemacht. Dies ist ein gutes Beispiel ungefähr das, was ich gerne machen würde. Sollte mit ein wenig CSS3-Animationsarbeit eigentlich recht einfach sein. Was ich habe, ist nicht schlecht, aber ich würde gerne benutzerdefinierte Grafiken mit besserer Schrift/Layout-Kontrolle verwenden.

31
Russell Leggett

Das Beste, was ich bisher gefunden habe und bei dem ich keinen Code schreiben muss, ist Titanium for Desktop. Es verfügt über eine takeScreenshot-Funktion, die im Javascript-Code verfügbar ist. Die takeScreenshot-Funktion zeigt einen Screenshot des gesamten Desktops, es sollte jedoch leicht sein, das Herunterzuschneiden zu automatisieren. Mit einer Fülle von Javascript-Animationsbibliotheken sollte ich in der Lage sein, bei jedem Frame einen Screenshot zu erstellen, auch wenn dies in Echtzeit nicht möglich ist.

Obwohl ich keine CSS-Animationen verwenden kann, ist dies wahrscheinlich die flexibelste Lösung, da ich alles, was ich mit CSS-Animationen machen kann, mit Javascript machen kann, und ich mehr Kontrolle über die Bildrate usw. habe.

Außerdem sollte es mir möglich sein, alle Funktionen des Browsers zu nutzen, indem er html/css/js/svg/canvas kombiniert.

1
Russell Leggett

Es gibt ein Tutorial mit dem Code, das sowohl Javascript als auch PHP verwendet, um ein Video aus Ihrer Leinwandanimation zu erstellen . Das Programm speichert Bild für Bild Ihre Leinwandanimation wie in einem Film. Anschließend können Sie diesen Bildstapel mit dem Codec Ihrer Wahl in ein bestimmtes Videoformat konvertieren.

Code von der verlinkten Seite.

(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

Nun, Techsmith Snagit fängt in AVI ein, oder ihre Premium-Anwendung camtasia (erzeugt ein Flash-Video und einen Webseiten-Launcher) würde funktionieren. Warum erstellen Sie nicht einfach eine PowerPoint-Folie mit den Funktionen, die Sie berühren möchten, und verwenden Sie einen HTML-Satz von Seiten mit tatsächlichen Demos, die Sie ausführlich darstellen möchten. Dies ist der Ansatz, den ich einnehme.

2
Hans

Meiner Meinung nach liegt der beste Weg darin, Bilder aus den Daten der Leinwand zu erstellen und dann alle diese Bilder über ein Modul in ein Video zu kompilieren (beispielsweise fluent-ffmpeg, das ein Knoten-js-Paket ist). Es ist ziemlich einfach, aber seien Sie vorsichtig bei der FPS (Bildrate), wenn Sie diese Bilder so schnell wie möglich erstellen, können Sie die FPS Ihres Videos ändern. Wenn Sie beispielsweise requestAnimationFrame() rekursiv verwenden, werden Sie 60 FPS haben. Anstatt ein html5-Video zu lesen, sollten Sie die Zeit alle 1/30s einstellen (z. B. wenn Sie ein 30fps-Video möchten) und ein Bild aus der aktuellen Zeit bis zum Ende des Videos erstellen. Wenn Sie nicht nur über eine Leinwand verfügen, können Sie, wenn Sie Animationen über mehrere Leinwand auf Ihr Video anwenden, eine neue leere Leinwand erstellen und alle Daten auf der Leinwand zeichnen, um nur ein Bild anstatt eines Bildes für jede Leinwand zu erstellen.

Prost aus Frankreich

1
rhanb

Flash kann dies. HTML5-Animation ist eine Kombination aus HTML, CSS, Javascript und Bildern. Im Allgemeinen wird ein JavaScript-Timer verwendet, um einzelne DIVs und Bilder usw. zu animieren. Es gibt kein Tool, das HTML5-Eingaben akzeptiert und Videos direkt exportiert. Vor kurzem habe ich diese Site https://html5animationtogif.com/ verwendet, um mein HTML5 in mp4 und webm umzuwandeln. Eines der Hauptprobleme bei Canvas-basierten Animationen ist, dass sie im Browser nicht mit 60 fps ausgeführt werden können. Eine einzelne Zeitüberschreitung dauert ungefähr 20 Millisekunden. Während für 60fps sollte die Timer-Funktion innerhalb von 16 Millisekunden loopen. Auch es kommt auf den Animationseffekt an. Wenn ein Effekt CPU verbraucht, wird die Timer-Funktion die Schleife nicht innerhalb von 20 Millisekunden abschließen. Gelegentlich kann die Schleife innerhalb von 40 oder 60 Millisekunden übersprungen und abgeschlossen werden.

Hoffe das hilft.

0
parth patel

Ich hatte an einem Werkzeug gearbeitet, das Ihren Anforderungen ähnelt. Es verwendet grundsätzlich cutycapt (oder ein beliebiges anderes Werkzeug zum Konvertieren von HTML mit CSS in ein Bild) und macht abhängig von der erforderlichen Bildrate eine Serie von Screenshots. 

Damit dies funktioniert, sollten die Animationen reine CSS-Animationen sein, und das Tool interpoliert die CSS-Eigenschaften des Zwischenrahmens, indem das CSS analysiert wird.

https://github.com/bpsagar/css2video

Ich bin mir nicht sicher, ob das Tool vollständig ist, lassen Sie es mich wissen, wenn Sie interessiert sind.

0

Ich habe es in der Vergangenheit durch Online-Site getan. Ich hatte eine html5-Animation auf die Website http://html5animationtogif.com hochgeladen und die animierte GIF-Datei erhalten. Danach habe ich meine Gif-Datei in https://cloudconvert.com/ hochgeladen gif-to-mp4 und erhielt die MP4-Datei. Dies war mein Weg, um HTML5-Animationen in MP4 zu konvertieren. Nicht sicher, ob dies der beste Weg war. Aber es hat für mich funktioniert. Hoffe, diese Antwort hilft.

0
SanS