Thanawat Wongchai

Posted on Apr 17 • Originally published at apidog.com

วิธีตัดต่อวิดีโอด้วย AI ขั้นเทพ HyperFrames

#agents #ai #javascript #opensource

TL;DR

เอเจนต์ AI สามารถเขียนโค้ด เรียกใช้ API และรันเวิร์กโฟลว์แบบหลายขั้นตอนได้ แต่การตัดต่อวิดีโอยังเป็นข้อจำกัด เครื่องมืออย่าง After Effects และ DaVinci Resolve ใช้ไทม์ไลน์แบบเลเยอร์และ JSON scene graph ที่ LLM ไม่ถนัด โปรเจกต์โอเพนซอร์สใหม่จาก HeyGen ชื่อ HyperFrames แก้ปัญหานี้โดยปล่อยให้เอเจนต์สร้างวิดีโอด้วย HTML, CSS, JavaScript แล้วเรนเดอร์เป็น MP4, MOV หรือ WebM ติดตั้งง่ายด้วยคำสั่งเดียวใน Claude Code skill เอเจนต์ของคุณก็จะตัดต่อวิดีโอได้ทันที

ทดลองใช้ Apidog วันนี้

บทนำ

วิดีโอเป็นรูปแบบการสื่อสารที่มีอิทธิพลสูงสุดบนเว็บ ในขณะที่สื่ออื่นๆ อย่างข้อความ, โค้ด, รูปภาพ, แผนภูมิ เอเจนต์ AI สามารถสร้างได้ง่าย แต่วิดีโอยังไม่มีเครื่องมือที่ตอบโจทย์

แม้จะมีโมเดลอย่าง Sora, Veo หรือ Runway ที่สร้างคลิปจากพรอมต์ได้ แต่วิธีนี้มีข้อจำกัด: คุณได้วิดีโอโมโนลิธิกเพียงชิ้นเดียว ไม่สามารถควบคุมองค์ประกอบ, ทำซ้ำกราฟิกเคลื่อนไหว หรือแก้ไขเฉพาะฉากได้

HeyGen เปิดตัว HyperFrames เมื่อ 17 เมษายน 2026 โดยให้เอเจนต์สร้างวิดีโอผ่าน HTML แทนที่จะฝึกโมเดลให้ใช้ซอฟต์แวร์ตัดต่อวิดีโอแบบเดิม บทความนี้จะอธิบายหลักการทำงาน, เหตุผล และวิธีตั้งค่าให้เอเจนต์ของคุณสามารถตัดต่อวิดีโอได้ด้วยตัวเอง

หากคุณทำเวิร์กโฟลว์ที่สร้างวิดีโอผ่าน API อยู่แล้ว คุณจะต้องทดสอบเลเยอร์ orchestration ด้วย เราจะพูดถึงบทบาทของ Apidog ตอนท้าย

ทำไมเอเจนต์ AI จึงไม่สามารถตัดต่อวิดีโอได้ก่อนหน้านี้

UI แบบไทม์ไลน์ไม่แมปกับโค้ด

ซอฟต์แวร์ตัดต่อแบบ After Effects, Premiere, DaVinci Resolve ใช้ไฟล์โปรเจกต์ไบนารีหรือ JSON scene graph ที่ซับซ้อน LLM ไม่ได้ถูกฝึกกับฟอร์แมตนี้
กราฟิกเคลื่อนไหวต้องคิดเชิงภาพ

แอนิเมชัน, keyframing, การปรับเส้นโค้ง และการจัดชั้นเลเยอร์ มักต้องทำด้วยสายตา เอเจนต์ไม่มีหน้าต่างพรีวิว ต้องการนามธรรมที่เป็นข้อความก่อน
เครื่องมือเหล่านี้ออกแบบมาสำหรับมนุษย์

การเรนเดอร์, ปลั๊กอิน, การเลือก codec อยู่หลังเมนู UI สคริปต์อัตโนมัติทำได้จำกัด API เปราะบาง

ผลลัพธ์คือ เอเจนต์ทำได้แค่เขียนสคริปต์ ffmpeg เชื่อมคลิปหรือซ้อนข้อความขั้นพื้นฐาน อะไรที่ซับซ้อนกว่านั้นต้องใช้มนุษย์

แนวคิด HTML สำหรับวิดีโอ

ทีม HeyGen สังเกตว่า LLM ถูกฝึกด้วย HTML, CSS, JavaScript มหาศาล เห็นแอนิเมชัน GSAP, SVG, Canvas, Lottie นับไม่ถ้วน เว็บคือสื่อสร้างสรรค์ที่ใหญ่ที่สุดใน training data

โมเดลสามารถสร้างแอนิเมชัน HTML ได้ดี เช่น

จัดตำแหน่งด้วย CSS
แอนิเมชันด้วย GSAP หรือ CSS keyframes
เรนเดอร์ SVG paths
จัดเลเยอร์ด้วย z-index, opacity
tween ระหว่างสถานะต่างๆ

เบราว์เซอร์มีความสามารถพื้นฐานสำหรับวิดีโอแล้ว ปัญหาคือ "เรนเดอร์ HTML เป็นวิดีโอ" — นี่คือสิ่งที่ HyperFrames ทำ

HyperFrames ทำงานอย่างไร

HyperFrames เพิ่มแอตทริบิวต์ data- ให้ HTML เพื่อกำหนดไทม์ไลน์วิดีโอ ที่เหลือคือโค้ดเว็บปกติ

แอตทริบิวต์	วัตถุประสงค์
`data-composition-id`	ID เฉพาะสำหรับองค์ประกอบวิดีโอ
`data-width` / `data-height`	กำหนดความละเอียดเอาต์พุต (px)
`data-start`	เวลาเริ่มต้นฉาก (วินาที)
`data-duration`	ความยาวฉาก (วินาที)
`data-track-index`	ลำดับเลเยอร์สำหรับฉากที่ซ้อนกัน

เอเจนต์เขียน HTML HyperFrames อ่านแอตทริบิวต์เหล่านี้, รันหน้าเว็บใน headless browser, จับเฟรมตามอัตราเฟรม, เข้ารหัสด้วย FFmpeg

ไม่มี DSL, ไม่มี scene graph, ไม่มี editor keyframe — ใช้แอนิเมชันที่โมเดลเขียนได้อยู่แล้วเช่น GSAP หรือ CSS

ตัวอย่างที่เรียบง่ายที่สุด

วิดีโอ 5 วินาที, สองฉาก: การ์ดชื่อเฟดเข้าและ crossfade ไปหน้าจอปิด ใช้ HTML + JS + GSAP ไม่เกิน 70 บรรทัด

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
  <style>
    body { margin:0; width:1920px; height:1080px; overflow:hidden; background:#0D1B2A; }
    .scene { position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden; background:#0D1B2A; }
    #scene2 { z-index:2; opacity:0; }
    .s1 { display:flex; flex-direction:column; justify-content:center; padding:120px 160px; gap:20px; }
    .s2 { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:100px 160px; gap:32px; }
  </style>
</head>
<body>
  <div id="root" data-composition-id="hyperframes-intro"
       data-width="1920" data-height="1080" data-start="0" data-duration="5">
    <div id="scene1" class="scene">
      <div class="s1">
        <div class="s1-title">HTML is Video</div>
        <div class="s1-sub">Compose. Animate. Render.</div>
      </div>
    </div>

    <div id="scene2" class="scene">
      <div class="s2-title">Start composing.</div>
    </div>
  </div>
  <script>
    window.__timelines = window.__timelines || {};
    const tl = gsap.timeline({ paused: true });

    // Scene 1: title entrance
    tl.from(".s1-title", { x:-40, opacity:0, duration:0.5, ease:"power3.out" }, 0.25);
    tl.from(".s1-sub", { y:15, opacity:0, duration:0.4, ease:"power2.out" }, 0.5);

    // Blur crossfade transition
    const T = 2.2;
    tl.to("#scene1", { filter:"blur(8px)", scale:1.03, opacity:0, duration:0.35, ease:"power2.inOut" }, T);
    tl.fromTo("#scene2",
      { filter:"blur(8px)", scale:0.97, opacity:0 },
      { filter:"blur(0px)", scale:1, opacity:1, duration:0.35, ease:"power2.inOut" }, T + 0.08);

    window.__timelines["hyperframes-intro"] = tl;
  </script>
</body>
</html>

จุดสังเกต:

แอนิเมชันใช้ GSAP ล้วนๆ โมเดลที่เคยเห็น GSAP สามารถสร้างไทม์ไลน์นี้ได้
HyperFrames ใช้แค่แอตทริบิวต์ data- ไม่กี่ตัวบน root

เรนเดอร์ไฟล์นี้จะได้ MP4 1920x1080 เปลี่ยนข้อความ, สี, ฟอนต์, โลโก้ ได้ทันที ไฟล์คือ HTML ล้วน

สิ่งที่เอเจนต์สามารถใช้ได้จริง

เพราะ HyperFrames รันในเบราว์เซอร์จริง เอเจนต์สามารถใช้:

CSS animations/transitions
GSAP timelines
SVG โลโก้/แอนิเมชัน
Canvas สำหรับ particle หรือพื้นหลัง generative
Three.js สำหรับ 3D
D3.js สำหรับ visualizations
Lottie (แอนิเมชันจาก After Effects)
Web fonts (Google Fonts หรือ custom)
วิดีโอ/รูปภาพพื้นหลัง (<video>, <img>)

ไม่ต้อง wrapper ไม่ต้องปลั๊กอิน ไม่ต้องเรียนเฟรมเวิร์กใหม่ — เอเจนต์ใช้ความรู้เดิม

วิธีให้เอเจนต์ของคุณตัดต่อวิดีโอด้วยคำสั่งเดียว

HyperFrames มี Claude Code skill ติดตั้งได้ด้วยคำสั่งเดียว:

npx skills add heygen-com/hyperframes

คำสั่งนี้ดึง skill จาก GitHub, ติดตั้ง toolchain, ลงทะเบียนกับ Claude Code

หลังติดตั้ง ให้พรอมต์เอเจนต์:

สร้างวิดีโออธิบายผลิตภัณฑ์ 10 วินาทีสำหรับ API ใหม่
เริ่มต้นด้วยพื้นหลังไล่ระดับสีเข้มๆ ทำให้ชื่อผลิตภัณฑ์เคลื่อนที่ขึ้นจากด้านล่างพร้อมกับเฟด
จากนั้นตัดไปยังจุดไข่ปลาสามจุดพร้อมไอคอน ปิดท้ายด้วยการ์ดกระตุ้นการตัดสินใจ

เอเจนต์จะเขียน HTML, รันพรีวิว, เรนเดอร์ MP4 ทุกอย่างรัน local ไม่ต้อง API key ไม่ต้องใช้บริการภายนอก

การตั้งค่าโดยไม่ใช้ Claude Code

HyperFrames ไม่ผูกกับเฟรมเวิร์กใดๆ เอเจนต์ที่รันเชลล์/อ่านไฟล์ได้ก็ใช้ได้

โคลน repo:

git clone https://github.com/heygen-com/hyperframes
cd hyperframes
npm install

เรนเดอร์วิดีโอ:

npx hyperframes render my-video.html --output my-video.mp4

พรีวิวในเครื่อง:
```
npx hyperframes preview my-video.html
```

คำสั่ง preview จะเปิดเบราว์เซอร์ให้ตรวจไทม์ไลน์/เฟรมก่อนเรนเดอร์จริง

สิ่งนี้ปลดล็อกอะไรให้กับนักพัฒนา

จุดที่ใช้ได้ทันที เช่น

การตลาดผลิตภัณฑ์อัตโนมัติ

เอเจนต์ดึง changelog, สร้าง HTML ทีละฉาก, ส่งวิดีโอขึ้น CDN ทุก release มีวิดีโอโดยไม่ต้องแตะไทม์ไลน์
วิดีโอส่วนบุคคลอัตโนมัติ

Webhook API กระตุ้นเอเจนต์เรนเดอร์คลิป personalized เช่น วิดีโอต้อนรับ, ใบเสร็จ, ฉลองความสำเร็จ
Data storytelling อัตโนมัติ

ป้อน metric, ให้เอเจนต์เขียน D3 + HyperFrames ได้วิดีโอแดชบอร์ดแบบอัตโนมัติ
B-roll อัตโนมัติสำหรับ podcast หรือ long-form

เอเจนต์อ่านสคริปต์, สร้างกราฟิกเคลื่อนไหวประกอบเสียง
วิดีโอเอกสาร API

แยก OpenAPI spec, สร้างวิดีโอ endpoint พร้อมไดอะแกรม, ส่งออกเป็นคลิปแชร์ได้

การทดสอบการจัดการเอเจนต์ด้วย Apidog

HyperFrames จัดการเรนเดอร์ แต่ upstream orchestration (เอเจนต์, การเรียกใช้เครื่องมือ, API LLM, logic) ต่างหากที่มักพังจริง

เช่น: payload ผิด format, API timeout, tool_use_id ผิด, schema ไม่ตรง — ทั้งหมดนี้ทำให้ pipeline วิดีโอหยุดก่อนเรนเดอร์

Apidog ช่วยทดสอบ orchestration เหล่านี้:

จำลองปลายทาง LLM

สร้าง endpoint Claude/OpenAI จำลองใน Apidog พร้อม schema ที่เอเจนต์คาดหวัง ทดสอบ pipeline กับ response ผิด format/ช้า โดยไม่เสียค่าใช้จ่ายจริง
ตรวจสอบ payload การใช้เครื่องมือ

ถ้าเอเจนต์เรียก API ภายนอก (เช่น ดึง asset, ค้นหาภาพ, ดึงแบรนด์) สร้าง endpoint เหล่านั้นใน Apidog แล้วเชื่อมกับ test scenario ยืนยัน payload ถูกต้องก่อนรันจริง
ติดตามการใช้โทเค็น

Claude Opus 4.7 ใช้ tokenizer ใหม่ โทเค็นเพิ่มขึ้น 35% เมื่อเทียบกับ Opus 4.6 วิดีโอที่มี CSS/JS เยอะๆ อาจกินโทเค็นสูง Apidog ช่วยประมาณขนาดพรอมต์ก่อน production
debug โฟลว์หลายขั้นตอน

การเรนเดอร์วิดีโอหนึ่งชิ้นต้อง LLM ตอบโต้ 5-10 รอบ Apidog เล่นบทสนทนาย้อนหลังเพื่อหาจุดที่เอเจนต์หลุด

ข้อโต้แย้งทางปรัชญา

HeyGen ไม่ได้แค่เสนอ "HTML เป็นรูปแบบวิดีโอที่สะดวก" แต่มองว่า HTML เหมาะสมสำหรับอนาคตของวิดีโอจริงๆ

เพราะวิดีโอเดิมถูกล็อคในฟอร์แมต proprietary (Adobe, Blackmagic, codec vendors) แต่ HTML เป็น open, มาตรฐาน, versioned, ค้นหาได้, แก้ไขได้ด้วย editor ใดๆ

วิดีโอที่เป็น HTML:

diff ใน Git ได้ — เห็นความเปลี่ยนแปลงชัดเจน
แยก component ได้ — เช่น การ์ดชื่อเรื่องเป็น React, กราฟิกเป็นโมดูลนำเข้า
responsive — เรนเดอร์ 1080p, 4K, แนวตั้ง 9:16 ได้ทันที
เข้าถึงได้ — screen reader อ่าน source, caption ฝังในโค้ด
searchable — ข้อความในวิดีโอคือ text จริง ไม่ใช่ pixel

ทั้งหมดนี้ทำได้แล้วในเบราว์เซอร์ HyperFrames คือสะพานจากเว็บสู่ production video

ข้อจำกัดที่ควรรู้

HyperFrames v1 ยังมีข้อจำกัด:

ความเร็วเรนเดอร์

ฉากที่ใช้ Three.js/Canvas/shaders ซับซ้อน เรนเดอร์ช้ากว่า GSAP ธรรมดา วางแผนให้เหมาะสม
อินพุตวิดีโอสดจำกัด

ฝัง <video> ได้ แต่สตรีมแบบ realtime ต้องเขียนโค้ดเพิ่ม
เสียงรองรับขั้นพื้นฐาน

เพิ่มแทร็กเสียงได้ แต่มิกซ์/เอฟเฟกต์เสียงขั้นสูงต้อง post-process ด้วย FFmpeg
คุณภาพ output ยังขึ้นกับโมเดล

Opus 4.6, Gemini 3 สร้างวิดีโอสวยได้จาก prompt ง่ายๆ แต่ Opus 4.7 คือ best model สำหรับ workflow นี้

ข้อจำกัดเหล่านี้ไม่ใช่อุปสรรคใหญ่ แต่ควรวางแผนถ้าจะใช้ production pipeline

รายการตรวจสอบสำหรับการเริ่มต้น

[ ] ติดตั้ง Claude Code (หรือเอเจนต์ที่คุณใช้)
[ ] รัน npx skills add heygen-com/hyperframes
[ ] ให้เอเจนต์สร้างวิดีโอ 5 วินาที
[ ] เรนเดอร์และตรวจสอบไฟล์ MP4
[ ] ปรับแต่ง style, เวลา, จำนวนฉากตามต้องการ
[ ] ถ้าทำ workflow driven by API ตั้งค่า LLM และ endpoints ใน Apidog
[ ] สร้างวิดีโอจริงหนึ่งชิ้น (teaser, data story, changelog recap)
[ ] ให้ดาว repo ที่ github.com/heygen-com/hyperframes

บทสรุป

เอเจนต์ AI เขียนโค้ดได้มาหลายปี แต่การตัดต่อวิดีโอเป็นโดเมนสร้างสรรค์สุดท้ายที่ยังต้องพึ่งมนุษย์ HyperFrames ตัดปัญหานี้ โดยให้เอเจนต์ใช้ HTML, CSS, JavaScript ที่คุ้นเคย

แนวทางนี้อธิบายได้ในประโยคเดียว และยืดหยุ่นพอสร้าง motion graphics คุณภาพ production ถ้าคุณต้องการผลลัพธ์เป็นวิดีโอ (marketing automation, personalized content, data storytelling, agent-driven docs) — HyperFrames ควรอยู่ใน toolset ของคุณ

สำหรับ API และ orchestration layer รอบๆ ทดสอบ agent conversation, tool call, LLM requests ด้วย Apidog ก่อน production เพราะ API ที่ล้มเหลว จะเรนเดอร์เป็น MP4 ไม่ได้!

DEV Community