螢幕錄製與展示
腳本化錄製是可重複執行的。當使用者介面變更時，只需重新執行腳本，無需手動重新錄製。
選擇方法
| 情況 | 方法 |
|---|---|
| 可在瀏覽器中開啟的 Web 應用程式 | Playwright 腳本化錄製 |
| 桌面應用程式或全螢幕工作流程 | 作業系統錄製工具（OBS Studio、Windows Game Bar、macOS 螢幕截圖） |
| 應用程式原始碼可取得且要求無瑕疵的結果 | 在 Remotion 中重建為靜態元件（參閱 remotion-programmatic-video） |
| 命令列介面 | 終端機錄製工具（asciinema、VHS）或動畫終端機元件 |
Playwright 錄製（Python）
pip install playwright && playwright install chromium
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
ctx = browser.new_context(
viewport={"width": 1920, "height": 1080},
record_video_dir="recordings/",
record_video_size={"width": 1920, "height": 1080},
)
page = ctx.new_page()
page.goto("https://example.com")
page.wait_for_load_state("networkidle")
page.wait_for_timeout(800) # 讓觀看者閱讀
page.get_by_role("button", name="Sign in").click()
page.get_by_label("Email").type("[email protected]", delay=60) # 可視輸入
page.wait_for_timeout(1200)
ctx.close() # 影片在關閉時完成
browser.close()
輸出為 WebM 格式。轉換：
ffmpeg -i recordings/xyz.webm -c:v libx264 -crf 18 -pix_fmt yuv420p -r 30 out/demo.mp4
讓它看起來更專業
- 展示資料： 使用預設的展示帳戶，內含擬真且非敏感資料。切勿錄製真實客戶資料、權杖或電子郵件。
- 視窗： 固定 1920x1080 視窗，隱藏書籤列和通知，輕微縮放（110% 到 125%）以便在手機上文字清晰可讀。
- 節奏： 每個動作後暫停 0.5 到 1 秒。輸入時加入延遲。避免瞬間跳轉。
- 游標： Playwright 不會繪製游標。注入一個小型 DOM 游標，或在後製中（Remotion 或覆蓋層）添加。
- 確定性： 使用
expect(locator).to_be_visible()等待，而非固定休眠時間，然後為觀看者加入刻意的暫停。 - 機密資料： 在錄製前，於頁面腳本中（
page.add_style_tag）模糊或遮罩欄位。
後製
# 剪除空白時間：保留 12 秒到 41 秒
ffmpeg -ss 12 -i demo.mp4 -t 29 -c:v libx264 -crf 18 out/trimmed.mp4
# 加速無聊的等待（例如從 20 秒到 30 秒加速 4 倍）需要分割；最簡單的方法是剪輯、加速、重新合併
# 縮放至某區域：先裁切再縮放（原始像素中的 x:y:w:h）
ffmpeg -i demo.mp4 -vf "crop=960:540:480:270,scale=1920:1080" out/zoom.mp4
如需流暢的動畫縮放/平移跟隨游標，請使用 Remotion（對 scale 和 translate 使用 interpolate）。
與旁白同步
- 先撰寫腳本（
video-planning），錄製旁白（voiceover-tts）。 - 錄製螢幕，然後調整每個場景的速度，使每個動作對應到其句子。計算
speed = recorded_seconds / narration_seconds。 - 使用
ffmpeg-essentials的速度功能，或在合成內部重新計時。
檢查清單
- 沒有個人資料、API 金鑰或內部網址可見。
- 在縮放到手機螢幕的 1080p 解析度下，文字清晰可讀。
- 未保留超過 1 秒的載入旋轉圖示。
- 除非需要，否則靜音機器音訊。