meilleur moyen de créer une vidéo à partir d'une animation html5
Je voulais faire une courte introduction pour un podcast vidéo. En tant que développeur web geek et n'ayant pas encore accès à des outils d'animation, je pensais pouvoir essayer l'intro à l'aide de diverses techniques html5. Le problème est de savoir comment transformer cela en un clip vidéo que je peux facilement transférer dans iMovie.
Si cela est nécessaire, je pense que cela peut être accompli si je n’utilise que canvas en exportant un png chaque image à l’aide de getImageData. Le seul inconvénient est que je suis limité à la toile. J'espérais utiliser toute la gamme des nouvelles techniques html5/css3/svg. Je n'ai pas besoin de cette fonctionnalité pour fonctionner pour un usage général du Web, juste pour moi, alors je serais heureux pour tout ce qui nécessite une installation, etc., pour que cela fonctionne.
Si je dois le faire, je suppose que je peux probablement utiliser un outil de capture d'écran vidéo, mais j'espérais une chaîne open source complète.
En fin de compte, je pense que je vais créer une série de pngs et utiliser ffmpeg pour les assembler. J'espérais juste trouver un excellent moyen de le faire de manière automatisée et à code source ouvert.
Mise à jour Je voulais juste préciser que ce que j'essaie de faire, c'est d'utiliser HTML5 au lieu de quelque chose comme Flash, mais je n'essaie pas de le diffuser à d'autres personnes sur Internet, je souhaite le convertir en. vidéo, et il ne faut jamais quitter mon ordinateur, qui est en fait un mac, pas un serveur Linux. Si le flash peut le faire, pourquoi pas le HTML, non? Cela semble être ce que les gens essaient de revendiquer. Le problème est que je peux convertir un fichier SWF en vidéo standard, mais comment procéder avec des animations javascript ou CSS3? De toute évidence, un outil de capture d'écran peut en quelque sorte faire le travail, mais ceux-ci ont généralement une fréquence d'images faible et ne peuvent pas être exécutés par programme à ma connaissance.
La chose la plus proche à laquelle je puisse penser qui ne soit pas un outil de capture d'écran serait quelque chose comme webkit2png, mais au lieu d'un seul png, cela prendrait 60 pngs par seconde. À un moment donné, j'essaierai peut-être d'appliquer exactement cela, mais je voulais voir si quelqu'un d'autre avait quelque chose de bon.
Exemple Je viens donc de faire une introduction en utilisant les cartes de titres intégrées à iMovie. Ceci est un bon exemple du genre de chose que j'aimerais faire. Devrait être assez simple avec un peu d’animation CSS3. Ce que j’ai n’est pas mauvais, mais j’aimerais utiliser des graphiques personnalisés, avec un meilleur contrôle des polices et de la présentation.
Jusqu'à présent, la meilleure chose que j'ai trouvée jusqu'à présent et qui ne nécessite pas que j'écrive du code c, est d'utiliser Titanium pour le bureau. Il comporte une fonction takeScreenshot disponible à partir de code javascript. La fonction takeScreenshot permet d’obtenir une capture d’écran de l’ensemble du bureau, mais il devrait être facile d’automatiser le rognage. Avec une pléthore de bibliothèques d'animations javascript, je devrais être capable de pirater une manière d'obtenir une capture d'écran à chaque image, même si cela ne peut pas se produire en temps réel.
Bien que je ne puisse pas utiliser les animations CSS, c'est probablement la solution la plus flexible, étant donné que tout ce que je peux faire avec les animations CSS, je peux le faire avec javascript, et j'aurai plus de contrôle sur la cadence, etc.
De plus, cela devrait me permettre d’utiliser tout ce dont le navigateur est capable, en combinant html/css/js/svg/canvas.
Il existe un tutoriel avec le code qui utilise à la fois javascript et PHP pour créer une vidéo à partir de votre animation de toile . Le programme enregistre image par image votre animation sur toile, comme dans un film. Vous pouvez ensuite convertir cette pile d'images en un format vidéo spécifique avec le codec de votre choix.
Code de la page liée.
(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);
}());
Well Techsmith Snagit enregistre dans AVI, ou leur application premium camtasia (génère une vidéo Flash et un lanceur de page Web) fonctionnerait. Pourquoi ne pas simplement créer une diapositive PowerPoint des fonctionnalités que vous souhaitez aborder et utiliser un ensemble HTML de pages de démos que vous souhaitez illustrer en profondeur. C'est l'approche que je suis en train de prendre.
Vous avez raison, à mon avis, la meilleure façon de le faire est de créer des images à partir des données du canevas, puis de les compiler en vidéo via un module (fluent-ffmpeg par exemple, qui est un package de nœud js). C'est assez facile, mais faites attention au FPS (cadence d'images) si vous créez ces images aussi rapidement que vous le pouvez, vous pouvez modifier les images par seconde de votre vidéo. Par exemple, si vous utilisez récursivement requestAnimationFrame(), vous serez à 60fps. Ainsi, au lieu de lire une vidéo html5, définissez l’heure tous les 1/30s (par exemple, si vous souhaitez une vidéo à 30 images par seconde) et créez une image à partir de l’heure courante jusqu’à la fin de la vidéo. Et si vous n’avez pas un seul canevas, si vous appliquez des animations à votre vidéo via plusieurs canevas, vous pouvez créer un nouveau canevas vide et dessiner toutes les données de ce dernier afin de créer une seule image au lieu d’une image par toile.
Vive la France
J'avais travaillé sur un outil qui répond à vos besoins. Il utilise essentiellement cutycapt (ou tout autre outil permettant de convertir du HTML avec CSS en image) et prend des séries de captures d'écran en fonction de la fréquence d'images requise.
Pour que cela fonctionne, les animations doivent être purement des animations CSS et l'outil interpole les propriétés CSS de l'image intermédiaire en analysant le CSS.
https://github.com/bpsagar/css2video
Je ne suis pas sûr que l'outil soit complet, laissez-moi savoir si cela vous intéresse.
Je l'ai fait dans le passé via le site en ligne. J'avais téléchargé l'animation html5 sur le site http://html5animationtogif.com et obtenu le fichier GIF animé . Après cela, j'ai téléchargé mon fichier gif sur https://cloudconvert.com/gif- to-mp4 et obtenu le fichier MP4 . C’est ainsi que j’ai converti l’animation HTML 5 en MP4. Pas sûr que ce soit un meilleur moyen. Mais cela a fonctionné pour moi. J'espère que cette réponse aide.