以下是建立新的 Remotion 專案與組合的說明。 如果這不是下一項任務,請參閱 Remotion 最佳實踐
建立專案
如果專案已存在,請跳過此步驟。 請確認 Node.js 和 Git 已安裝,且當前資料夾適合用於建立新專案。
在選擇建立位置之前,請檢查當前資料夾內容(包含隱藏檔案)。
空資料夾
如果資料夾為空,或只包含可拋棄的作業系統元資料(例如 .DS_Store),請直接在當前資料夾中建立專案。
請先移除這些可拋棄的元資料檔案,因為 create-video 會拒絕非空資料夾。
請勿將所有隱藏檔案視為可拋棄的內容:諸如 .env 檔案和 .git 目錄都是有意義的內容。
在現有資料夾中建立:
npx create-video@latest --yes --blank --no-tailwind .
npm i
非空資料夾
如果當前資料夾包含有意義的內容,且尚未存在專案,請在新的子資料夾中建立。
將 my-video 替換為合適的專案名稱。
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i
在建立影片前先開啟預覽
一旦專案可以執行,請在撰寫或修改組合之前,先在瀏覽器中開啟 Remotion Studio。對於新專案,請在建立並安裝依賴項後立即執行此操作。對於現有專案,請在編輯影片之前執行此操作。在工作期間讓 Studio 保持執行,以便使用者可以即時看到變更結果並引導最終成果。
設計影片
保留建立的專案結構,並加入 React Markup。 請遵循 Remotion React Markup 最佳實踐和 影片佈局規則 以取得影片優先佈局和文字尺寸指導。
在編寫註冊 <Composition> 或 <Still> 元素的根目錄之前,
請遵循組合與靜態畫面。
這是時間軸中的片段嗎?
如果影片在時間軸上排列多個影片或音訊片段,請在編寫時間軸前遵循影片編輯指導。讓每個應該獨立編輯的片段擁有自己的 JSX 節點。
這是一個多場景影片嗎?
如果這是包含多個連續場景的影片,請遵循多場景影片的指導說明。
互動性最佳實踐
透過遵循 Remotion 互動性最佳實踐來建構 React Markup,您可以讓使用者在 Studio 中進行編輯,並將變更寫回程式碼。
TailwindCSS
如果需要 Tailwind,請參閱 tailwind.md 以了解如何在 Remotion 中使用 TailwindCSS。
後續步驟
影片建立流程已完成。 對於後續的提示,請使用 Remotion 最佳實踐。