html-video 匯出仍是模板文字?先比對預覽與渲染輸入
html-video 的預覽已經換成你的文案,匯出 MP4 卻回到模板內容,先比對「預覽使用的 HTML」與「匯出實際讀取的 HTML」。若從 CLI 設定變數,則多查一層:變數雖已存進專案,模板是否真的把它放到畫面上。
這兩條檢查路徑都有上游回報支持。本文整理公開 issue 與原碼,提供定位方法;沒有在本機重現,也不保證依照清單操作就會修好。
先記下版本、模板與匯出入口
留一份出問題的專案副本,記錄 html-video 的 commit、套件版本、模板 ID,以及這次使用 Studio 還是 CLI。若是 Studio,再記下專案是一個畫面,還是有多個分鏡。官方 README 說明單框影片走獨立快速路徑,因此不能把單框的故障直接套到多框匯出。官方流程說明
版本號也要和 commit 一起留。本文於 2026-10-11 查到的 main 為 c414ecc07f795add03807d5d9ce4baefd807cea2,該快照的 CLI 套件版本是 0.1.0;GitHub Releases 頁未列出發行版。這些資訊是本次原碼核對的定位點,不能推定讀者安裝的是同一份程式。原碼快照、CLI 套件資訊、Releases
Studio 預覽正確,先查匯出選了哪份 HTML
Issue #51 於 2026-06-15 回報,使用者在 Studio 對話生成自訂內容,iframe 預覽正確,匯出卻顯示模板預設內容。回報指出,單框匯出選了模板原始 HTML,沒有使用存放生成結果的 lastPreviewHtmlPath。
本次讀取的固定原碼快照仍可見這個差別。單框 exportMp4 傳入 templateRefFromMeta(tmpl);該函式依模板目錄與 source_entry 組出來源路徑。這支持「先查輸入檔」的方向,但尚未證明你的執行環境有相同故障。單框匯出原碼
請在副本中做以下檢查,不直接改唯一原稿。
| 要檢查的物件 | 記錄什麼 | 能縮小到哪個環節 |
|---|---|---|
| Studio 當下預覽 | 截圖、專案 ID,以及畫面上的測試文字 | 確認看的是這次專案,且生成內容曾出現在畫面 |
| 已保存的生成 HTML | 專案中的 lastPreviewHtmlPath 實際值、檔案是否存在、可見文字是否正確 |
區分畫面曾更新與內容已保存 |
| 匯出呼叫的來源 | 由日誌、除錯資料或對應版本原碼核對實際 sourcePath |
看它指向生成 HTML,還是模板 source_entry |
| 匯出的 MP4 | 完成時間、實際輸出位置、成片文字 | 排除開到另一輪輸出的檔案,保留前後對照 |
若無法取得匯出的實際來源路徑,就把這格記成「未取得」。只看預覽截圖與成片,還不足以斷言是哪一行程式出錯。lastPreviewHtmlPath 是原碼中的專案欄位,不代表 Studio 一定有同名設定選單。
CLI 變數已保存,再查模板如何使用它
Issue #73 於 2026-06-26 回報另一種情況。提報者以 project-set-var 設定變數,project-show 也能看到保存值,但 project-render 的成片仍顯示 frame-light-leak-cinema 的示範文字。回報環境為從原始碼取得的 html-video v0.1.0、Windows 11 與 Git Bash,不能把它當成所有版本、模板的共同結果。
在本文固定快照中,該模板的 manifest 宣告 title、subtitle 等輸入,HTML 內仍可看到固定示範文案。因此檢查時要同時讀 schema 與來源 HTML,不能只憑「欄位存在」判斷畫面會更新。模板欄位、模板 HTML
先用既有安裝的查詢功能核對同一個專案 ID。對採用官方原始碼建置入口、且已完成建置的環境,以下兩個查詢形式可在該快照的 CLI 原碼中核對;請將大寫示意值換成自己的 ID。
node packages/cli/dist/bin.js project-show PROJECT_ID
node packages/cli/dist/bin.js inspect-template TEMPLATE_ID
保存輸出後,檢查變數名稱與型別是否符合該模板,再沿著 source_entry 查模板如何把變數放進可見文字。若文字只出現在 JSON 或 script 裡,仍需確認它有被放進頁面顯示。CLI 查詢入口
此處有一個容易混淆的操作。project-preview 會生成預覽,並更新專案的 lastPreviewHtmlPath;請先保存原本 Studio 生成的 HTML,再決定是否在副本執行。它不能當作單純查看既有預覽的指令。預覽處理原碼
用一段獨特文字,比對三個位置
以下是作者建議的人工檢查方法,沒有附帶實際測試結果。在專案副本中選一個確定應顯示的文字欄位,放入簡短標記,例如 GW-EXPORT-CHECK-1011-A。維持其他設定不變,記錄同一次操作的結果。
- 預覽畫面是否完整顯示標記?先保存截圖與對應 HTML
- 匯出實際讀取的 HTML 是否包含該標記?若靠 script 組字,也要核對資料是否真的會進入可見元素
- 這次完成的 MP4 是否出現標記?完整播放,並記下預期出現的位置與時間
| 檢查結果 | 下一步 |
|---|---|
| 預覽有標記,匯出輸入沒有 | 優先核對來源選擇、專案 ID 與本輪生成檔是否保存 |
| 變數有標記,模板可見文字仍是示範內容 | 核對模板是否消費該欄位,以及匯出入口是否有相應處理 |
| 匯出輸入有標記,成片沒有 | 再查實際載入檔、腳本執行與文字出現時機;保留日誌,暫不歸因於 #51 或 #73 |
| 標記已出現在成片 | 只代表這個欄位、本輪輸出已對上,其他文字與分鏡仍須各自檢查 |
輸出請使用新的檔名,保留失敗版本。若匯出入口不能指定檔名,先複製舊成片,再執行下一次輸出,避免失去可比較的材料。
有修正提案,仍要核對是否進入你的版本
PR #55 提議讓 Studio 單框匯出優先使用已生成的預覽 HTML;PR #77 提議將部分模板參數化,並增加對應的替換處理。2026-10-11 核對時,兩個 PR 都是 Open、尚未合併。
這些提案能幫你指出要看的程式環節。目前沒有足夠證據把它們寫成「更新後就修好」,也不建議僅憑相同症狀降版或安裝 fork。即使之後 PR 合併,仍應核對自己的 commit、建置產物與實際執行入口,再用同一段測試文字確認結果。
回報時保留這份最小清單
把客戶文案換成測試文字,刪除憑證與私人路徑,再整理以下內容。公開 issue 不需要附上整個工作專案。
- 環境與版本:作業系統、Node.js 版本、html-video commit、CLI/adapter 版本及建置來源
- 專案入口:Studio 或 CLI、單框或多框、模板 ID、實際執行命令或按鈕操作順序
- 預期結果:哪個欄位應在哪個位置顯示哪段測試文字
- 保存狀態:去識別的
project-show輸出,保留變數名、型別與模板 ID - 輸入證據:原預覽 HTML 與匯出來源的差異;查不到實際來源時直接註明
- 輸出證據:本輪檔名、完成時間、預覽與成片截圖,以及相關錯誤日誌
- 已試步驟:每次只改了什麼、結果是否改變,以及是否能在副本重現
若回報能指出「標記在預覽中出現,到了哪份輸入後消失」,維護者就有明確的比較起點。本文的檢查清單到此為止;實際修正仍取決於你使用的版本與重現證據。