無法播放媒體（媒體播放錯誤）

無法以 src 播放影片/音訊

在開發或渲染期間，你的 Remotion 專案中可能會出現以下錯誤：

Error: Could not play video with src [source] [object MediaError]

或

Error: Could not play audio with src [source] [object MediaError]

當你嘗試在 Remotion 專案中嵌入 <Html5Video/> 或 <Html5Audio/> 標籤，但瀏覽器無法載入和播放媒體時，就會發生此錯誤。雖然瀏覽器不會回報確切的錯誤，但此錯誤有兩個常見原因。

Chrome 不支援的編解碼器

Chrome 不支援所有編解碼器的播放。例如：Linux 上的 HEVC、.avi、.flv 等。請將影片轉換為 Chrome 支援的格式。

資源找不到（404）

如果資源返回 404 狀態碼，表示檔案可能無法正確提供。如果檔案在你的 public/ 資料夾中，你必須使用 staticFile() 來引用它。像 "/my-video.mp4" 這樣的純路徑不會有效，因為 Remotion 在特殊前綴下提供靜態檔案。

錯誤做法——使用純路徑

import { Html5Video } from 'remotion';
 
<Html5Video src="/my-video.mp4" />;

正確做法——使用 staticFile()

import { Html5Video, staticFile } from 'remotion';
 
<Html5Video src={staticFile('my-video.mp4')} />;

同時確認檔案確實存在於你的 public/ 資料夾中，且拼寫正確。

無效來源

確保你嘗試載入的影片在本地可用或在網際網路上公開可存取。開啟 DevTools，前往「Network」標籤，追蹤正在載入的資源，並在新分頁中開啟它。它真的開始播放了嗎？

錯誤的標頭或狀態碼

為了讓瀏覽器能夠播放媒體，應該以以下條件載入：

200 狀態碼
適當的 Content-Type 標頭
Content-Range 標頭以支援尋找

開啟 DevTools 並前往 network 標籤以驗證是否如此。

Internet Download Manager

Internet Download Manager 已知會操縱網路流量，導致瀏覽器載入媒體時出現問題。如果你已安裝，請停用它。

其他不支援的編解碼器

你可能正在匯入與 Chrome 完全不相容的影片，例如 FLV。

太多影片標籤

如果錯誤訊息包含 error creating media player，可能是因為建立了太多的影片標籤。首先檢查你是否意外建立了無限渲染迴圈。

例如，頻繁更改 key 會在每一幀重新建立影片標籤：

import { Html5Video } from 'remotion';
 
export default function SBSVideo() {
  return (
    <>
      {[
        'https://remotion.media/BigBuckBunny.mp4',
        'https://remotion.media/BigBuckBunny.mp4',
      ].map((video, i) => {
        return <Html5Video key={uuidv4()} src={video} />;
      })}
    </>
  );
}

如果你排除了這種可能性，請改用 <OffthreadVideo>，因為它不依賴 <video> 標籤。

從此錯誤中恢復 v3.3.89

你可以透過將 onError() prop 傳遞給 <Html5Video> 或 <OffthreadVideo> 元件來處理此錯誤並用不同的影片替換它。

import { Html5Video, staticFile } from 'remotion';
 
export const MyVideo = () => {
  return (
    <Html5Video
      src={staticFile('video.mp4')}
      onError={(e) => {
        console.error('影片載入失敗：', e);
        // 在此處理錯誤，例如顯示備用內容
      }}
    />
  );
};

另請參閱

編解碼器支援