使用 Pexels 影片素材

什麼是 Pexels？

Pexels 是一個提供免費圖片和影片的素材平台。所有素材均在 Pexels License 下授權，允許免費用於個人和商業用途，且通常不需要署名。

可以在 Remotion 專案中使用 Pexels 影片嗎？

可以，但需要注意以下幾點：

授權確認：使用前請確認該素材的授權條款，Pexels License 一般允許商業使用，但部分素材可能有限制
技術整合：Remotion 可以使用遠端 URL 或下載後放入 public/ 目錄兩種方式使用 Pexels 影片
CORS 限制：直接使用 Pexels 的 CDN URL 可能遇到 CORS 問題

Pexels License 允許哪些用途？

根據 Pexels License，你通常可以：

在個人和商業專案中免費使用素材
修改和剪輯影片
不需要署名（雖然建議這樣做以支持創作者）

不允許的用途包括：

將素材重新販賣或作為素材庫再分發
在色情或誹謗性內容中使用
暗示 Pexels 或原創作者認可你的專案

使用前請務必閱讀最新的 Pexels License 條款。

如何在 Remotion 中使用 Pexels 影片？

方式一：下載並放入 public/ 目錄（推薦）

import { Video } from "remotion";
import { staticFile } from "remotion";
 
export const MyComposition = () => {
  return (
    <Video src={staticFile("pexels-background.mp4")} />
  );
};

方式二：直接使用 URL

import { OffthreadVideo } from "remotion";
 
export const MyComposition = () => {
  return (
    <OffthreadVideo
      src="https://player.vimeo.com/external/xxxxx.hd.mp4"
    />
  );
};

注意：直接使用外部 URL 時，請使用 <OffthreadVideo> 而非 <Video>，以避免渲染時的問題。

直接使用 Pexels URL 時有哪些注意事項？

URL 穩定性：Pexels 的直接下載 URL 可能會變更，不建議長期依賴
CORS：在本地開發時可能遇到 CORS 限制，考慮使用 Pexels API 或下載素材
渲染一致性：網路延遲可能影響渲染速度和穩定性
快取：Remotion 在渲染時會快取網路資源，但首次渲染仍需下載

如何使用 Pexels API 動態搜尋影片？

Pexels 提供免費 API，你可以在 calculateMetadata 或應用層面整合：

const PEXELS_API_KEY = process.env.PEXELS_API_KEY;
 
const searchPexelsVideos = async (query: string) => {
  const response = await fetch(
    `https://api.pexels.com/videos/search?query=${query}&per_page=1`,
    {
      headers: {
        Authorization: PEXELS_API_KEY,
      },
    }
  );
  const data = await response.json();
  return data.videos[0]?.video_files[0]?.link;
};

使用遠端影片時如何避免渲染問題？

使用遠端影片時，建議：

使用 <OffthreadVideo> 而不是 <Video>，前者在 Node.js 渲染環境中更穩定
在渲染前使用 prefetch() 確保影片已快取
設定適當的逾時（timeoutInMilliseconds）以允許影片下載

import { OffthreadVideo } from "remotion";
 
export const MyComposition = ({ videoUrl }: { videoUrl: string }) => {
  return (
    <OffthreadVideo
      src={videoUrl}
      style={{ width: "100%", height: "100%" }}
    />
  );
};

在 Lambda 渲染時使用 Pexels 影片有什麼特別注意事項？

Lambda 函式在每次渲染時都需要從網路下載影片，這會：

增加渲染時間（取決於影片大小和網路速度）
產生網路傳輸費用
在部分限制較嚴的網路環境中可能失敗

建議在生產環境中將常用的 Pexels 影片預先下載並存放在你自己的 S3 儲存桶中，以確保穩定性和速度。

如何確認 Pexels 影片可以在 Remotion 中正常播放？

在 Remotion Studio 中測試時，如果影片無法播放，可能是：

影片格式不相容（建議使用 H.264 MP4）
CORS 問題（嘗試下載後本地使用）
非可尋址媒體（請查看非可尋址媒體文件）