Pre-order เปิดแล้ว! E-book คู่มือสร้าง Website ด้วย Claude — เหมาะสำหรับคนไม่มีพื้นฐาน เพียง 499 บาท

ดูรายละเอียด
hspotlight

การตัดต่อ Video ด้วย Claude Code และ Remotion

· 1 min read
การตัดต่อ Video ด้วย Claude Code และ Remotion

ถ้าการตัดต่อทำได้ด้วยโค้ด แปลว่าการปรับแก้ สามารถทำได้ด้วย Claude Code

สวัสดีครับทุกคน หัวหน้าฮงกลับมาแล้ว วันก่อนฮงไปเจอคลิปสอนการตัดต่อ video ของ June Aekkaluk ด้วย Claude code และใช้ tool ชื่อ Remotion ซึ่งเดี่ยวฮงจะมาสรุปให้ฟังครับ 🚀

Outline

  • Remotion คืออะไร
  • การติดตั้ง
  • ตัวอย่างการ prompt เพื่อตัดต่อ video

Remotion คืออะไร 🎥

Remotion เป็น tool (library) ที่เขียนด้วยภาษา javascript, typescript เพื่อใช้สำหรับการตัดต่อ video ซึ่งเหมือนกับการทำ website เลย

ใช้งานผ่าน google chrome browser ได้เลย

✅ สามารถวาง element ข้อความ รูปภาพ รูปทรงต่างๆ บน frame/scene ของเราได้ ✅ สามารถปรับแก้ transition event (fade in, fade out, etc) ได้ ✅ ใส่ เพลง ✅ มี UI ในการปรับแก้ และเล่น video ได้ด้วยตัวเอง

การติดตั้ง ⬇️

สิ่งจำเป็นสำหรับ การใช้งาน Claude + Remotion คือ

  1. Claude Code - ซึ่งเราสามารถใช้งานได้ผ่าน 3 วิธี 1️⃣ การใช้งาน ผ่าน Claude Code CLI (รับใน cmd/terminal) 2️⃣ Claude app (อันเดียวกับที่รัน Claude cowork) 3️⃣ Claude extension ใน VS Code ซึ่งใน video สอนการติดตั้ง วิธีนี้ https://claude.com/download

  2. Text Editor เครื่องมือสำหรับการเขียนโค้ด เช่น VS Code, Cursor AI https://code.visualstudio.com/download

  3. Node JS - Remotion ถูกเขียนในภาษา javascript, typescript เราเลยต้องการ Node JS ซึ่งเป็นเครื่องมือที่ใช้ในการรันโปรแกรมนี้ https://nodejs.org/en/download

ในการติดตั้ง project การสามารถ setup project ได้ด้วยคำสั่ง npx create-video@latest

ซึ่งจะให้เราเลือกว่าจะติดตั้งแบบไหน จากใน video เราเลือก blank project ตามคุณจูนได้เลย

ข้อดีคือ การติดตั้งผ่านคำสั่งนี้ คือ เราจะได้ AI skill ที่ช่วยในการตัดต่อ video มาเลย ว้าวมาก 🥳

ตัวอย่างการ prompt เพื่อตัดต่อ video 🎥

คุณจูนต้องการสร้าง video โปรโมท website สำหรับให้ข้อมูและรณรงค์การเลือกตั้ง และใช้ตัวอย่าง prompt ตามนี้

สร้าง video animation แนวนอนขนาด 16:9
สำหรับรณรงค์ให้ทุกคนมีส่วนร่วมในการเลือกตั้งปี 69
โดยใช้ข้อมูล, รูปภาพ, โทนสีและฟอนต์จากเว็ปไซต์อ้างอิง
ประกอบการนำเสนอ https://conforall.com

ซึ่งเราสามารถกำหนด รายละเอียดต่างๆได้ดังนี้

  • ratio สัดส่วนของ video: (16:9 หรือ 4:3) หรือแล้วแต่เราจะกำหนด
  • ข้อมูล, รูปภาพ: ซึ่งเป็นเนื้อหาของ video
  • โทนสีและฟอนต์: styling

เราสามารถให้แหล่งอ้างอิงเป็นลิ้ง website ได้ ซึ่ง Claude จะไปหารายละเอียดมาเพิ่มเอง

ซึ่งเราสามารถใช้ สำหรับนี้ร่วมกับ skill อื่นๆ เช่น /grill-me หรือ /grill-with-docs เพื่อใช้ในการพูดคุยรายละเอียดและแนวทางการตัดต่อ video ได้

และการสั่ง Claude ปรับแก้ไขรายละเอียดได้ในภายหลังด้วย 🥳

สรุปโดยหัวหน้าฮง

Remotion เป็นเครื่องมือที่ช่วยแก้ปัญหาการตัดต่อด้วยโค้ด ทำให้เราสามารถกำหนดสิ่งต่างๆได้เหมือน program

ยิ่งใช้ผ่าน ภาษา javascript/typescript ซึ่งเป็นภาษายอดนิยม ในการทำ website ทำให้เรามีลูกเล่นในการทำ video เพิ่มขึ้น

และเพราะเป็นโค้ด เราสามารถที่จะกำหนด design system (company branding - font, color, theme) ได้ และทุก video นำเสนอที่เราทำด้วย AI จะมีลักษณะเหมือนกัน

หวังว่าบทความนี้จะเป็นประโยคนะครับ ถ้าใช้ Remotion แล้ว มาแลกเปลี่ยนประสบการณ์กันได้ครับ ลิ้ง video ใน comment ครับ

ขอบคุณครับ