動態生成多個縮略圖從視頻src與javascript

Question

在你說它不能完成之前，請看看我的思路和招待我。 我已經閱讀了stackoverflow，它無法完成，以及如何實現這個使用ffmpeg和其他的東西在服務器端，這是偉大的和足夠簡單，足以領悟..甚至使用擴展到Video.js我發現在github這使得這一步更容易。但不管怎麼樣，如果我沒有<video src=... >的副本，我真的不在意要拿到一個嗎？

我不想使用服務器來做到這一點好與出路，我理解來自Paul Irish得益於職位，視頻播放不是網絡套件端口共享方面（的代碼基本上爲每個瀏覽器供電...現在使用blink一個webkit叉減去鉻金絲雀）這有點合理，爲什麼某些瀏覽器只支持某些視頻容器。爲了簡單起見：我想讓這個功能只在Chrome和只有MPEG-4 AVC視頻容器上可用，爲什麼不能做到這一點，如果一些我可以實際查看視頻的每一幀，而同時它的回放？

額外注 所以視頻縮略圖的產生可能使用通過繪製幀發送到畫布上，這隻會是一個最終解決我的問題的一部分，我要做到這一點每一個每次視頻在用戶完成第一次播放後，不會在我的服務器上存儲圖像。我想最終解決的是生成縮略圖，因爲下載的視頻可以在用戶使用拖動滾動條將ff/rw拖到視頻中的某個點時查看。因此，這需要在視頻幀可用時完成，而不是由瀏覽器渲染以供用戶查看。

Answer 1

實際上可以將視頻饋送到畫布as seen here in HTML5Doctor。基本上，這樣做的線條是：

canvasContext.drawImage(videoElement,0,0,width,height); 

然後，您可以運行定時器，定期從畫布中檢索幀。有2個選項在這一個

1. get raw pixel data
2. get the base64編碼數據

至於保存，將數據發送到所述服務器使用該數據來重構圖像，並保存到磁盤。我還建議您將畫布和視頻的大小設置爲希望截圖的大小，因爲視頻畫布傳輸會自動管理縮放比例。當然，這是limited by the video formats that are supported by the browser。以及支持canvas和video。

---

在第一次渲染期間生成縮略圖嗎？你會遇到以下問題：

• 除非在視頻元素上呈現，否則無法生成所有幀。

• 假設您在第一次運行期間生成了縮略圖，並且希望將它們用於進一步運行。 Base64數據非常長，通常是圖像文件大小的3倍。原始像素數據陣列的長度爲width x height x 4。最可行的存儲候選者是localStorage，根據瀏覽器的不同，它只有5-10MB。

• 無法將生成的圖像緩存到瀏覽器緩存中（可能存在緩存破解，我不知道使用數據url）。

我建議你在服務器上代替它。在客戶方面做太多的負擔和麻煩。