Remotion – สร้างวิดีโอด้วยโค้ด React แบบ Programmatic

Remotion คืออะไร

Remotion เป็น library React ที่ให้คุณสร้างวิดีโอด้วยโค้ดแทนการใช้โปรแกรมตัดต่อแบบเดิม คุณควบคุมทุกอย่างผ่าน component, CSS และ JavaScript ทำให้สร้างวิดีโอแบบ programmatic ได้

ตัวอย่างโค้ด React component ใน Remotion:

copyimport {useCurrentFrame} from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 30);
  
  return (
    <div style={{flex: 1, backgroundColor: 'white'}}>
      <h1 style={{opacity, fontSize: 100}}>Hello World</h1>
    </div>
  );
};

ทำไมถึงมีประโยชน์

ฟีเจอร์หลัก

• Batch Rendering: ใช้ template เดียว render ได้นับล้านคลิปตามข้อมูลที่ต่างกัน — เหมาะสำหรับสร้างวิดีโอส่วนบุคคล (personalized video emails) หรือคลิปโซเชียลมีเดียอัตโนมัติ (auto-generate social media clips)
• ทำงานกับ AI Agent: Remotion รองรับ Agent Skills (ฟังก์ชันที่ agent เรียกใช้สร้างวิดีโอ), Plugins (ส่วนขยายสำหรับ AI agents) และ WebMCP integration ทำให้ agent สามารถรับคำสั่งหรือข้อมูลจากผู้ใช้แล้วสร้างวิดีโอได้อัตโนมัติ — เช่น agent รับคำว่า "สร้างวิดีโอแนะนำผลิตภัณฑ์" แล้วดึงข้อมูล render และส่งกลับเป็นไฟล์วิดีโอ
• เป็นเจ้าของวิดีโอในรูปโค้ด: แก้ไข version control และทำงานร่วมกันได้เหมือนโค้ดทั่วไป
• Render ได้หลายที่: Server-side, Client-side หรือ Remotion Lambda

ฟีเจอร์เสริม

• Remotion Studio: แอปสำหรับ preview, แก้ไข และ render วิดีโอ — ใช้งานได้ที่ remotion.new โดยไม่ต้องติดตั้ง
• Parameterization: เชื่อมข้อมูลเข้ากับ template วิดีโอ
• Player: ฝังวิดีโอ Remotion แบบ live ในแอปของคุณ
• Captions, Effects, Transitions: มี Effects มากกว่า 80 presets, Transitions มากกว่า 20 presets, การตัด background แบบ local ด้วย WebGPU และ Color Correction
• ฟรีสำหรับคนเดี่ยวและทีมเล็ก: ไม่มีค่าใช้จ่ายถ้าทีมไม่เกิน 3 คน

เมื่อไหร่ควรเลือก Remotion

เลือก Remotion เมื่อ:

• ต้อง render วิดีโอจำนวนมากจาก template เดียว (เช่น รายงานประจำวัน, คลิปส่วนบุคคล)
• ต้องการควบคุม animation ด้วยโค้ดและ version control
• ต้องการให้ AI agent สร้างวิดีโออัตโนมัติ
• ต้องการสร้างแอปตัดต่อวิดีโอแบบกำหนดเอง

พิจารณาทางเลือกอื่น:

• After Effects scripting — เหมาะสำหรับโปรเจกต์ที่ต้องการฟีเจอร์ตัดต่อขั้นสูงและมีทีม motion designer ที่คุ้นเคยกับ After Effects อยู่แล้ว
• FFmpeg — เหมาะสำหรับงานที่เน้น transcode, ตัดต่อเบื้องต้น หรือประมวลผลวิดีโอโดยไม่ต้อง UI แต่มี learning curve สูงและไม่เหมาะกับการสร้าง motion graphics ซับซ้อน
• Video API อื่นๆ (เช่น Cloudflare Stream, Mux Video API) — เหมาะเมื่อต้องการโซลูชันที่จัดการ video hosting, streaming และ transcoding แต่ไม่ต้อง render เนื้อหาแบบ programmatic

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

• Learning Curve: ต้องมีความรู้ React และเข้าใจแนวคิด component-based rendering — อาจใช้เวลาสำหรับผู้ที่ไม่คุ้นกับ React
• Performance: การ render วิดีโอซับซ้อนต้องใช้ทรัพยากร CPU/GPU สูง โดยเฉพาะเมื่อใช้ Effects หรือ 3D — ควรมี infrastructure ที่เหมาะสม (หรือใช้ Remotion Lambda)
• รองรับฟอร์แมต: รองรับฟอร์แมตวิดีโอหลัก (MP4, WebM, H.264, VP8) แต่ฟอร์แมตเฉพาะบางตัวอาจต้อง configure เพิ่มเติม

เริ่มใช้งาน

copy$ npx create-video

คำสั่งนี้สร้างโปรเจกต์ Remotion ใหม่ จากนั้นเขียน React component ที่ใช้ Remotion API ควบคุม animation และ timing

ราคา

Free License (บุคคลและบริษัทไม่เกิน 3 คน)

• ใช้ได้ทุกฟีเจอร์
• ใช้เชิงพาณิชย์ไม่จำกัด

Company License ($100+/เดือน)

• Remotion for Automators: $0.01/render (ขั้นต่ำ $100/เดือน) สำหรับ batch rendering และแอปที่สร้างวิดีอัตโนมัติ (เช่น video editor apps, prompt-to-video apps, การใช้งาน Player) — 1 render = การ render วิดีโอ 1 ไฟล์ออกมา ไม่จำกัดความยาว — ตัวอย่าง 10,000 renders = $100/เดือน (นักพัฒนาที่ทำโปรเจกต์ automation ไม่ต้องซื้อ Remotion for Creators)
• Remotion for Creators: $25/เดือน/ที่นั่ง สำหรับผู้สร้างวิดีโอด้วยตนเองปริมาณน้อย, ใช้ Studio, หรือสร้าง motion design systems ใน local environment (รวมใช้ AI agents และ Studio) — ตัวอย่าง 3 ที่นั่ง = $75/เดือน

Enterprise License (เริ่ม $500/เดือน)

• รวมฟีเจอร์ทั้งหมดจาก Company License
• Private Slack/Discord/Teams support
• Monthly consulting session
• ปรับเงื่อนไข billing และราคาได้
• Compliance forms และจัดลำดับ feature requests ได้
• รวม Editor Starter

ทรัพยากร:

• Docs: remotion.dev
• GitHub: 72k+ ดาว
• remotion.new – ทดลอง Studio โดยไม่ต้องติดตั้ง
• remotion.dev/convert – แปลงวิดีโอฟรีแบบออฟไลน์
• remotion.media – ไฟล์สื่อฟรีสำหรับทดสอบ