สร้างวิดีโอจาก React Components ด้วย Remotion

ภาพรวม

ถ้าเราเขียน React แล้วมันกลายเป็นวิดีโอได้จริงไหม? คำตอบคือ ได้ และเครื่องมือที่ทำให้แนวคิดนี้เป็นระบบมาก ๆ คือ Remotion 🎬

Remotion คือ framework สำหรับสร้างวิดีโอด้วย React แทนที่เราจะเปิดโปรแกรมตัดต่อแล้วลาก timeline ด้วยมือ เราจะเขียน component, props, state, CSS, animation แล้วให้ระบบ render ออกมาเป็น MP4

ภาพจำง่าย ๆ คือ React component 1 ชุด ไม่ได้ถูกเอาไปแสดงบนเว็บอย่างเดียว แต่ถูกใช้เป็น “ฉากวิดีโอ” ที่เปลี่ยนไปตาม frame

วิดีโอปกติคือชุดของภาพนิ่งจำนวนมากเรียงต่อกัน เช่น 30 fps แปลว่า 1 วินาทีมี 30 เฟรม Remotion ให้เราเขียนว่า เฟรมที่ 0 หน้าตาเป็นอย่างไร เฟรมที่ 30 ข้อความขยับไปตรงไหน เฟรมที่ 90 กราฟควรโตขึ้นเท่าไร แล้วค่อย render เฟรมเหล่านี้เป็นวิดีโอจริง

ใน React เราอาจมี component แบบนี้ TitleCard รับ title, subtitle, color DataChart รับตัวเลขจาก API AvatarScene รับชื่อ รูป และประโยคพูด

พอเป็น Remotion เราสามารถเอา component เหล่านี้มาเรียงเป็นวิดีโอได้ เช่น intro 3 วินาที ตามด้วยกราฟ 8 วินาที ตามด้วยสรุปท้ายคลิป 4 วินาที ทั้งหมดคุมด้วย code แทนการลากเมาส์

จุดที่น่าสนใจคือมันเหมาะกับ “วิดีโอที่ต้องทำซ้ำ” มากกว่าวิดีโอที่ตัดครั้งเดียวจบ เช่น คลิปสรุปยอดขายรายวัน คลิป highlight จากข้อมูลใน database วิดีโอ personalized ตามชื่อผู้ใช้ บทเรียนสั้น ๆ ที่เปลี่ยนหัวข้อและตัวอย่างจาก JSON หรือ social post video ที่ generate จาก Google Sheet / CMS / API 🚀

ตัวอย่าง practical สำหรับทีมเว็บ สมมติเรามีบทความ 100 แถวใน Google Sheet แต่ละแถวมี title, key point, image prompt, keyword เราเขียน Remotion template หนึ่งชุด แล้วให้ Node.js loop อ่านข้อมูลทีละแถว ส่ง props เข้า component render เป็นไฟล์ video_001.mp4, video_002.mp4 ต่อเนื่องได้

สำหรับคนที่ทำ React อยู่แล้ว ข้อดีคือ mental model คุ้นมาก ใช้ JSX วาง layout ใช้ CSS จัด typography ใช้ npm package ช่วยวาด chart หรือ icon ใช้ fetch/read file เพื่อดึงข้อมูล และใช้ logic ของ JavaScript ทำ conditional scene ได้

แต่ต้องเข้าใจว่า Remotion ไม่ใช่แค่ screenshot หน้าเว็บ มันเป็น video renderer เราต้องคิดเรื่องเวลา เฟรม ความยาว scene และ transition เช่น ใช้ frame ปัจจุบันคำนวณ opacity ใช้ interpolate เพื่อให้ข้อความค่อย ๆ เลื่อน ใช้ spring เพื่อทำ motion ที่ดูเป็นธรรมชาติ

ข้อควรระวังแรกคือ render time วิดีโอ 1 นาทีที่ 30 fps คือ 1,800 เฟรม ถ้าแต่ละเฟรมมีภาพใหญ่ chart หนัก หรือ animation ซับซ้อน การ export อาจใช้เวลานานกว่าที่คิด ⏱️

ข้อควรระวังที่สองคือ assets รูปภาพ วิดีโอซ้อน ฟอนต์ และไฟล์เสียงต้องโหลดได้แน่นอนตอน render ถ้า path เพี้ยนหรือ URL ช้า งาน batch อาจ fail กลางทาง งาน production จึงควร cache assets และ validate input ก่อนเริ่ม render

ข้อควรระวังที่สามคือ font บนเครื่อง dev อาจมีฟอนต์ไทยครบ แต่บน server หรือ CI อาจไม่มี ถ้าจะ render ภาษาไทย ควรกำหนด font file ชัดเจน และทดสอบบน environment ที่ใช้ export จริง

Remotion จึงเหมาะมากเมื่อเราอยากเปลี่ยนวิดีโอให้กลายเป็น software project มี component reuse มี version control มี template มี automation และมี pipeline ที่ต่อกับ Node.js ได้

สรุปสั้น ๆ ถ้าวิดีโอของคุณต้องทำมือครั้งเดียว โปรแกรมตัดต่ออาจเร็วกว่า แต่ถ้าวิดีโอของคุณต้องสร้างซ้ำจากข้อมูลหลายชุด Remotion คือทางที่ทำให้ React กลายเป็นเครื่องผลิตวิดีโอแบบ programmable ได้จริง ✨

แนวทางนำไปใช้

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

สรุป

ทำความเข้าใจการใช้ JSX, CSS, props และ frame-based animation สร้างวิดีโอแบบทำซ้ำได้ เหมาะกับงาน batch, personalized video และ content automation