使用 javascript 在客戶端或后端合並兩個視頻

Question

這個賞金已經結束了。 此問題的答案有資格獲得+500聲望賞金。 賞金寬限期在18 小時后結束。 Profer正在尋找可靠來源的答案。

我正在使用 React 和 Node。 我的項目需要合並視頻並在播放器上播放。 無論如何是可能的，我可以在我的 React 端使用一些畫布或在后端端使用 ffmpeg 以外的一些模塊來做到這一點？

只想顯示預覽沒有別的可能嗎？

任何幫助將不勝感激

現在我正在做的是在播放器上一個一個地播放視頻

{vidoes.map((url) => <ReactPlayer src={url}/>)}

現在我要做的是在畫布上繪制圖像。 因此，為此我一次播放所有 url，但我如何將它們播放成系列並保存下一個畫布圖像，直到前一個完成？

Answer 1

要實現在瀏覽器中連續播放多個輸入視頻文件，不需要服務器端處理。 為多個視頻文件服務的靜態文件（從現在開始我們稱它們為塊）就足夠了。

起初，用於視頻播放器播放緩沖區的 .appendBytes() 方法是在 Flash 中發明的，以允許切換視頻流（或不同質量的塊）。 它對於實時視頻也特別有用，因為在播放開始時下一個視頻文件不存在。 它還允許多個分辨率的視頻塊一個接一個地無縫播放，這在當時在任何其他播放器中都不起作用，包括 VLC（我認為 ffmpeg 也沒有）。

HTML5 瀏覽器添加了 .appendBuffer() 方法來將視頻塊添加到當前播放的視頻緩沖區。

它允許您動手預加載您需要的任何內容，並完全控制播放的內容和播放時間（您始終可以控制緩沖和接下來播放的內容）。

您可以隨時開始將視頻塊轉儲到播放緩沖區中。

在服務器端，ffmpeg 無法像瀏覽器那樣解決您的問題，因為您將不得不處理視頻分辨率、編解碼器、音頻通道等可能不同的非常困難的極端情況。 此外，僅瀏覽器解決方案遠遠優於在服務器上進行重新混合或視頻編碼。

MDN： https ://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer/appendBuffer

在互聯網上快速搜索一些示例使用（請自己檢查許可證）： https ://github.com/joshuatz/mediasource-append-examples/blob/main/multi-file/segments/index.js#L48

這將解決與多個源文件的視頻播放相關的所有問題。

Answer 2

如果您想在后端執行此操作，如評論中所述，您可能需要包含ffmpg 。 有一些庫雖然 make 更簡單，比如fluent-ffmpeg

假設你的節點服務器上已經有這些文件，你可以使用類似的東西：

const ffmpeg = require('fluent-ffmpeg');

ffmpeg('/path/to/input1.avi')
  .input('/path/to/input2.avi')
  .on('error', function(err) {
    console.log('An error occurred: ' + err.message);
  })
  .on('end', function() {
    console.log('Merging finished !');
  })
  .mergeToFile('/path/to/merged.avi', '/path/to/tempDir');

請注意，這是一個直接取自https://github.com/fluent-ffmpeg/node-fluent-ffmpeg#mergetofilefilename-tmpdir-concatenate-multiple-inputs的簡單示例。

請務必閱讀先決條件，因為它需要安裝和配置 ffmpeg。 您可能還需要考慮其他方面，例如不同的編解碼器和分辨率。 希望這能為您提供一個良好的起點。

Answer 3

可以肯定的是，大多數（如果不是所有的話）視頻處理庫都在底層使用 ffmpeg。

鑒於您是 React 開發人員，您可能會喜歡Remotion根據需要操作視頻。 它不在前端運行，但確實有一些有用的功能。