by Rain Chu | 6 月 14, 2026 | AI, 影片製作
HyperFrames 是 HeyGen 推出的開源影片製作框架，核心概念是把影片當成網頁來寫，再渲染成 MP4 影片。
HyperFrames 改成用 HTML、CSS、JavaScript 來描述畫面與動畫。也就是說，標題、圖片、影片片段、字幕、轉場、背景音樂，都可以像寫網頁一樣被組合起來，再由系統渲染成正式影片。
它最大的特色，是專門為 AI coding agent 設計。使用者可以搭配 Claude Code、Cursor、Gemini CLI、Codex 等工具，只要用自然語言描述想要的影片，例如：「做一支 10 秒產品介紹影片，加入淡入標題、背景影片和音樂」，AI 就可以產生對應的 HyperFrames 專案、HTML 結構、動畫設定，並協助預覽與輸出。
HyperFrames 適合的應用包括產品介紹影片、社群短影音、簡報轉影片、PDF 轉說明影片、CSV 資料動畫、圖表競賽影片、字幕動畫、網站展示影片，以及自動化內容生產流程，對於想要建立大量短影音模板、AI 行銷內容流程，或把影片製作變成可重複執行 pipeline 的團隊來說，這是一個很值得關注的工具。
簡單來說，HyperFrames 不是一般的無程式碼剪輯工具，而是「影片即程式碼」的製作方式。它讓影片可以被版本控制、被 AI 修改、被自動化產生，也更容易整合到內容生產系統中。
安裝
安裝方式也很直接，要搭配 AI agent，可以使用：
npx skills add heygen-com/hyperframes
如果要手動建立影片專案，可以使用：
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render
參考資訊
by Rain Chu | 5 月 23, 2023 | web
如果要在 HTML 中播放影片，並且當作背景，一進來就自動播放，通常我們使用 video tag ，可以參考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video ，通常長得像是
<video autoplay poster="posterimage.jpg">
<source src="video.mp4" type="video/mp4">
</video>
其中如果你要正常在各個瀏覽器中正常的「自動播放」，要加入 muted ，因為現在的瀏覽器的安全規範，都是只能自動播放無音軌的影片
<video autoplay muted poster="posterimage.jpg">
<source src="video.mp4" type="video/mp4">
</video>
那很多人會發現，ios 上面的設備有問題，因為在 ios 上面還有自己的規範，https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari#3030250 ，主要就是講要加入 playsinline 屬性來定義影片的行為
<video autoplay muted playsinline poster="posterimage.jpg">
<source src="video.mp4" type="video/mp4">
</video>
到此為止就都可以正常在各個設備上使用
by Rain Chu | 4 月 13, 2023 | Javascript, 程式
常常有需求要事後調整前台的畫面，尤其現在前端 javascript 的框架一大堆，只能事後處理，把元素的位置變來變去，我這邊舉利用 div 來代表，如何把元素變換位置，讓排版更簡單且容易些。
先準備有原來的 div
<div id="source">
....
</div>
想要把原來的Div移動到目的地的div，id 訂為 dest
<div id="dest">
....
</div>
JQuery 程式碼 appendTo()，把 div 移動到目的地 div 的裡面
$("#source").appendTo("#dest");除了 appendTo() 最常用，還整理幾個常用的寫法，放在下面
$("#source").insertBefore("#dest");
$("#source").insertAfter("#dest");
$("#source").prependTo("#dest");
$("#source").appendTo("#dest");參考資料
https://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element
近期留言