從html5動畫製作視頻的最佳方式

Question

我想爲視頻播客製作一個簡短的介紹。作爲一個令人討厭的網頁開發人員，他沒有訪問過或沒有動畫工具的知識，所以我認爲我可能會採用各種html5技術進行介紹。問題是，如何將其轉換爲可輕鬆放入iMovie的視頻剪輯？

如果我必須，我認爲這可以通過使用getImageData每幀使用導出png使用畫布來實現。唯一的缺點是我僅限於畫布。我希望能夠使用全新的html5/css3/svg技術。我不需要這個功能來爲一般的網絡使用，只是爲了我自己，所以我很樂意爲了任何需要安裝的東西來使它工作。

如果必須，我想我可以使用視頻屏幕捕獲工具，但我希望有一個完整的開源鏈。最後，我希望我將創建一系列png並使用ffmpeg將它們放在一起，我只是希望找到一種以自動化，開源方式進行此操作的好方法。

更新我只是想澄清，我基本上試圖做的是使用HTML5而不是像Flash一樣的東西，但我不想把它服務於互聯網上的其他人，我想轉換它到視頻，它永遠不需要離開我的電腦，這實際上是一個mac，而不是一個Linux服務器。如果Flash可以做到這一點，爲什麼不HTML，對吧？這似乎是人們試圖宣稱的東西。問題是，我可以採用SWF並將其轉換爲標準視頻，但您如何使用JavaScript或CSS3動畫來做到這一點？顯然，屏幕捕捉工具可以完成這項工作，但這些工具通常幀速率較低，並且不能按照我的知識以編程方式運行。

我能想到的最接近的事情不是屏幕截圖工具，而是webkit2png，而不是一個PNG，它需要每秒60個PNG。在某些時候，我可能會嘗試實現這一點，但我想看看是否有其他人有好的東西。

例子所以我實際上只是使用內置的iMovie標題卡做了介紹。大約是我想要做的事情的This is a good example。實際上應該是相當簡單的一點CSS3動畫工作。我有什麼不錯，但我想使用自定義圖形，更好的字體/佈局控制。

Answer 1

到目前爲止，我發現迄今爲止最好的東西，不需要我編寫c代碼就是使用Titanium作爲桌面。它具有JavaScript代碼提供的takeScreenshot功能。 takeScreenshot函數獲取整個桌面的屏幕截圖，但它應該很容易自動剪裁。在那裏有大量的javascript動畫庫，我應該能夠以每幀獲得截圖的方式進行破解，即使它不能實時發生。

儘管我無法使用CSS動畫，但無論如何，這可能是最靈活的解決方案，因爲我可以對CSS動畫進行任何操作，而且我可以使用JavaScript進行操作，而且我可以更好地控制幀速率等等。

此外，這應該允許我使用瀏覽器能夠結合html/css/js/svg/canvas的所有功能。

Answer 2

如何用http://danicsoft.com/software/copernicus/之類的東西錄製屏幕？

Answer 3

嗯Techsmith Snagit捕獲AVI，或他們的高級應用程序camtasia（生成Flash視頻和網頁啓動器）將工作。爲什麼不簡單地創建您想要觸及的功能的Powerpoint幻燈片，並使用一組您想要深入說明的實際演示的HTML頁面。這是我正在採取的方法。

Answer 4

有一個代碼使用JavaScript和PHP的代碼到create a 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); 
}()); 

Answer 5

我認爲最好的方法是從畫布數據創建圖像，然後通過模塊將所有這些圖像編譯成視頻（例如，fluent-ffmpeg，這是一個節點js包）。這很簡單，但要小心FPS（幀速率），如果您創建這些圖像的速度儘可能快，您可以更改視頻的fps，例如，如果遞歸使用requestAnimationFrame()，則您將達到60fps。因此，不要閱讀html5視頻，您應該設置每個1/30s的時間（例如，如果您需要30fps視頻），並從currentTime創建圖像直到視頻結束。如果您不只有一個畫布，如果您通過多個畫布對視頻應用動畫，則可以創建一個新的空畫布並在其上繪製所有畫布的數據，以便爲每個畫布僅創建一個圖像，而不是一個圖像。來自法國

Answer 6

乾杯我曾在一個工具，做類似的東西的要求工作。它基本上使用cutycapt（或任何其他工具將HTML與CSS轉換爲圖像），並根據所需的幀率採取一系列截圖。

爲了達到這個目的，動畫應該純粹是CSS動畫，並且該工具通過解析CSS來插入中間幀的CSS屬性。

https://github.com/bpsagar/css2video

我不知道，如果該工具是完整的，讓我知道如果你有興趣。