發布/操作示範影片
一個可重複的流程,用於將產品、功能或頁面轉換為附帶旁白的短動態影片,然後發佈到 YouTube、嵌入頁面並進行公告。之所以需要這個流程,是因為手動操作每次都要重新摸索許多不明顯的細節(OAuth 的古怪行為、配音同步計算、點擊播放的嵌入方式、響度標準)。
預設輸出:1080p / 30fps 的影片,長度約 45–60 秒,帶有情感情緒的配音,先以不公開方式上傳供使用者審核,然後再轉為公開。在未經使用者觀看/試聽前,絕不公開發佈影片——聲音和節奏是很主觀的。
為你的專案進行設定
首次使用前,請填寫 config.md(包含一些 ID 和路徑)。此技能會讀取這些值,而非使用硬編碼的數值,因此適用於任何產品。你需要準備的值如下:
- 你的 YouTube 頻道(OAuth 帳戶必須已選定此頻道)
- 你的 OAuth 用戶端密鑰路徑及 GCP 專案編號(已啟用 YouTube Data API v3)
- 完成影片的公告發布位置(Slack 頻道、Discord 等)
- 你的品牌顏色以及產品 URL 模式
使用時機
為某個頁面/功能/工具製作影片、加入配音,或將影片上傳到 YouTube。如果是較大規模的「為我們的最佳頁面加入影片」需求,可先從分析工具中拉出熱門頁面,然後為每個頁面執行此流程——先操作一個測試,待格式獲得核准後,再批次處理其餘頁面。
流程(7 個步驟)
請從上到下依序執行。每個步驟的詳細說明請參閱引用的檔案或腳本。
-
了解主題。 閱讀實作內容/文件,確保顯示的步驟與實際行為一致。若是工具操作示範,請使用 Playwright 實際操作該工具,觀察真實的輸入→輸出流程——這正是操作示範的核心。
-
擷取真實螢幕截圖。 使用 Playwright 針對生產環境進行,解析度為 1920×1080。請先隱藏任何促銷橫幅/Cookie 提示列。詳見
references/video-production.md→ 「擷取螢幕截圖」。 -
製作 Remotion 影片。 複製
remotion-scaffold/的結構。場景以 30fps 的幀數計數,設定在src/theme.ts中。根據旁白長度調整每個場景的大小(步驟 4)。完整的場景/動畫模式請參閱references/video-production.md。 -
生成配音。 使用
scripts/tts_voiceover.py——OpenAIgpt-4o-mini-tts,語音ash,加上含有情緒指示的instructions提示(少了這個提示,朗讀會平淡且機械化——這是配音中最重要的一環)。此腳本會生成每個場景的音檔,將其同步到各個場景的起始幀,並對混合音軌進行響度正規化。如果某個音檔超出其場景的長度,請在theme.ts中重新調整該場景的長度,然後重新渲染。 -
渲染 + 混流 + 編碼。 執行
npx remotion render,使用 ffmpeg 將配音音軌混入(-c:v copy),然後編碼成小於 10 MB 的上傳版本(libx264 -crf 25 -movflags +faststart)。指令詳見references/video-production.md→ 「渲染、混流、編碼」。 -
發佈到 YouTube。 使用
scripts/youtube.py(上傳部分包裝了youtubeuploader,其他操作則使用 Data API)。先以不公開方式上傳,待使用者確認後再設為公開。請先閱讀references/youtube-publishing.md——其中包含驗證設定、OAuth 重新導向的陷阱、API 未啟用的錯誤、配額限制以及中繼資料範本。 -
嵌入 + 公告。 在頁面中加入一個點擊播放的封面區塊(海報+播放按鈕;YouTube iframe 僅在點擊時才掛載——避免初次載入時影響效能)。然後將連結發佈到你的團隊頻道。這兩種模式請參閱
references/embed-and-announce.md。
防護措施
- 不公開 → 核准 → 公開,每次皆然。上傳到使用者自己的頻道需要他們的簽核。
- Google OAuth 同意必須由使用者自行授予——你無法代為點擊「允許」。如果驗證尚未設定,請引導他們完成設定(參閱
references/youtube-publishing.md),不要試圖繞過它。 - 保留主渲染版本;只有上傳版本才受大小限制。
- YouTube API 配額約為 6 次上傳/24 小時。超過此數量的批次必須分散到不同天執行——請提前說明,而非在執行中默默失敗。
- CLI 無法設定縮圖——請提醒使用者應在 Studio 中手動設定(或透過 API 另行設定)。