如何将网页渲染视频保存到mp4 - Diaporama

时间:2015-11-13 04:17:54

标签: javascript video

我有一组图像,我正在创建一个Diaporama视频,因此我可以使用Ken Burns效果和glsl过渡。该视频运行json文件,该文件定义图像的时间线,它们的持续时间以及到下一图像的转换。然后在浏览器中呈现视频。我正在寻找一种方法将这个渲染的幻灯片式视频保存为实际的mp4文件。非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

我明白了。我正在运行一个phantomjs runner.js脚本,它打开网页并每秒渲染25个图像,然后使用ffmpeg从这些图像中构建mp4。

Phantomjs runner.js

var page = require('webpage').create();
page.viewportSize = { width: 640, height: 480 };

page.open('http://www.goodboydigital.com/pixijs/examples/12-2/', function () {
  setTimeout(function() {
    // Initial frame
    var frame = 0;
    // Add an interval every 25th second
    setInterval(function() {
      // Render an image with the frame name
      console.log("Image: " + frame);
      page.render('frames/image-'+(frame++)+'.png', { format: "png" });
      // Exit after 50 images
      if(frame > 50) {
        phantom.exit();
      }
    }, 25);
  }, 666);
});

要运行的命令:

phantomjs runner.js && ffmpeg -y -start_number 0 -i frames/image-%d.png -c:v libx264 -r 25 -pix_fmt yuv420p output.mp4