Production Lab II
การประกอบร่างวิดีโอ (ตัดต่อ), การเขียน Code หน้าเว็บ และการ Deploy ผลงานทั้งหมด
การประกอบร่างวิดีโอ (ตัดต่อ), การเขียน Code หน้าเว็บ และการ Deploy ผลงานทั้งหมด
ประกอบทุกส่วนเข้าด้วยกันบน Website และตรวจสอบความต่อเนื่อง
เป้าหมายการเรียนรู้
- ตัดต่อวิดีโอโดยใช้ AI ช่วยเพิ่มประสิทธิภาพ
- สร้างเว็บไซต์หรือ Landing Page ด้วย AI Coding Tools
- Deploy เว็บไซต์ขึ้น Vercel ให้เข้าถึงได้จริง
- รวม Assets ทั้งหมดจาก Session 12 เป็นผลงานสมบูรณ์
Production Lab II: ประกอบร่างผลงาน
วันนี้คือวันประกอบชิ้นส่วนทั้งหมดเข้าด้วยกัน เนื้อหา ภาพ เสียง จาก Session 12 จะถูก ประกอบเป็นวิดีโอ เว็บไซต์ หรือผลงานสมบูรณ์พร้อมนำไปปรับปรุงใน Session 14
| ช่วงเวลา | กิจกรรม | ระยะเวลา |
|---|---|---|
| ช่วงที่ 1 | ตรวจสอบ Assets จาก Session 12 + วางแผน | 10 นาที |
| ช่วงที่ 2 | ตัดต่อวิดีโอ / สร้างเว็บ | 55 นาที |
| ช่วงที่ 3 | Deploy + ทดสอบ | 25 นาที |
| ช่วงที่ 4 | ตรวจสอบผลงานรวมกับทีม | 15 นาที |
ส่วนที่ 1: ตัดต่อวิดีโอด้วย AI
สำหรับกลุ่มที่ต้องสร้างวิดีโอ (ประเภท B แคมเปญ หรือ ประเภท C Podcast/สารคดี) การตัดต่อวิดีโอเป็นขั้นตอนสำคัญในการรวม Assets ทั้งหมดเข้าด้วยกัน
เครื่องมือตัดต่อวิดีโอแนะนำ
| เครื่องมือ | ราคา | จุดเด่น | เหมาะกับ |
|---|---|---|---|
| CapCut | ฟรี | ใช้งานง่าย มี AI Caption มี Template | ทุกคน |
| Canva Video | ฟรี/Pro | ลาก-วาง มี Template มากมาย | งานกราฟิก |
| DaVinci Resolve | ฟรี | ระดับมืออาชีพ ฟีเจอร์ครบ | คนมีประสบการณ์ |
| Descript | ฟรี/จำกัด | ตัดต่อด้วย Transcript AI ลบคำว่า 'เอ่อ' ได้ | Podcast |
ขั้นตอนตัดต่อวิดีโอ
- 1นำเข้า Assets ทั้งหมด (ภาพ วิดีโอ เสียง เพลง) เข้าโปรแกรมตัดต่อ
- 2วาง Timeline ตามสคริปต์ที่เตรียมไว้
- 3เพิ่ม Transition ระหว่างฉาก (ไม่ควรใช้เกิน 2-3 แบบ)
- 4ใส่ Text/Caption ด้วย AI Caption (CapCut รองรับภาษาไทย)
- 5ปรับระดับเสียง BGM ให้ไม่ดังกลบเสียงบรรยาย
- 6เพิ่ม Intro และ Outro
- 7Export ในความละเอียดอย่างน้อย 1080p
สร้างภาพ Flat infographic diagram showing a video editing workflow: on the left, multiple asset types (images, video clips, audio files, music) feed into a central editing timeline interface. The timeline shows layers for video, audio, and captions. On the right, an export arrow points to a finished video file icon with 1080p label. Clean educational style, minimal design, soft colors, white background (video_editing_workflow.jpg)
Flat infographic diagram showing a video editing workflow: on the left, multiple asset types (images, video clips, audio files, music) feed into a central editing timeline interface. The timeline shows layers for video, audio, and captions. On the right, an export arrow points to a finished video file icon with 1080p label. Clean educational style, minimal design, soft colors, white background
- เสียง BGM ควรอยู่ที่ประมาณ 20-30% ของเสียงบรรยาย
- ใช้ Transition แบบเดียวกันตลอดวิดีโอเพื่อความเป็นมืออาชีพ
- ใส่ Caption ทุกครั้งเพราะผู้ชมส่วนใหญ่ดูวิดีโอแบบไม่เปิดเสียง
- ความยาววิดีโอแนะนำ 3-5 นาที ไม่ควรเกิน 7 นาที
ส่วนที่ 2: สร้างเว็บไซต์ด้วย AI Coding
สำหรับทุกกลุ่ม การมีเว็บไซต์หรือ Landing Page จะช่วยให้ผลงานเข้าถึงได้จริงผ่านอินเทอร์เน็ตใช้ AI ช่วยเขียนโค้ดเพื่อสร้างเว็บไซต์ได้โดยไม่ต้องเป็นโปรแกรมเมอร์
เครื่องมือสร้างเว็บแนะนำ
| เครื่องมือ | ระดับความยาก | ผลลัพธ์ | เหมาะกับ |
|---|---|---|---|
| v0.dev (Vercel) | ง่ายมาก | หน้าเว็บสวย พร้อม Deploy | ทุกคน (แนะนำ) |
| Cursor + Next.js | ปานกลาง | เว็บแอปเต็มรูปแบบ | คนมีพื้นฐานโค้ด |
| Bolt.new | ง่าย | เว็บ Full-stack | คนไม่มีพื้นฐาน |
| Canva Website | ง่ายมาก | Landing Page สวย | งาน Marketing |
ใช้ v0.dev สร้างเว็บ
v0.dev คือเครื่องมือจาก Vercel ที่ให้เราอธิบายเว็บที่ต้องการเป็นภาษาคนแล้ว AI จะสร้างโค้ดและหน้าเว็บให้ทันที
- 1เข้า v0.dev แล้วล็อกอินด้วยบัญชี Vercel/GitHub
- 2พิมพ์อธิบายเว็บที่ต้องการเป็นภาษาอังกฤษหรือไทย
- 3รอ AI สร้างหน้าเว็บ (ใช้เวลาไม่ถึง 1 นาที)
- 4ปรับแต่งด้วยการพิมพ์คำสั่งเพิ่มเติม
- 5กด Deploy เพื่อเผยแพร่บนอินเทอร์เน็ต
🌐 Landing Page:
"Create a modern landing page for an AI music education platform
called 'MelodyAI'. Include a hero section with gradient background,
features section with 3 cards, testimonials, and a call-to-action.
Use Thai language for all text. Color scheme: purple and blue."
🌐 Portfolio:
"Create a project showcase page that displays 4 project cards
with images, descriptions, and team member profiles.
Include a video embed section. Thai language. Dark theme."
🌐 Podcast Page:
"Create a podcast landing page with episode list, audio player,
about section, and subscribe buttons.
Thai language. Clean minimal design."ส่วนที่ 3: Deploy ขึ้น Vercel
Vercel เป็นแพลตฟอร์มสำหรับ เผยแพร่เว็บไซต์ฟรีทำให้เว็บไซต์ของเราเข้าถึงได้จากทุกที่ผ่าน URL จริง
สร้างภาพ Flat infographic showing web deployment pipeline with four sequential steps connected by arrows: Code (laptop with code editor icon), Build (gear/compile icon with loading indicator), Deploy (cloud upload icon with Vercel logo style), and Live (globe/browser icon showing a live website with URL). Each step has a brief label beneath. Clean educational diagram, modern flat design, blue and green palette, white background (web_deployment_pipeline.jpg)
Flat infographic showing web deployment pipeline with four sequential steps connected by arrows: Code (laptop with code editor icon), Build (gear/compile icon with loading indicator), Deploy (cloud upload icon with Vercel logo style), and Live (globe/browser icon showing a live website with URL). Each step has a brief label beneath. Clean educational diagram, modern flat design, blue and green palette, white background
วิธี Deploy บน Vercel (สำหรับ v0.dev)
- 1จากหน้า v0.dev กดปุ่ม Deploy
- 2เชื่อมต่อบัญชี GitHub (ถ้ายังไม่ได้ทำ)
- 3Vercel จะสร้าง Repository ใน GitHub อัตโนมัติ
- 4รอ Build เสร็จ (ใช้เวลาประมาณ 1-2 นาที)
- 5ได้ URL จริงพร้อมใช้งาน เช่น project-name.vercel.app
- 6แชร์ลิงก์กับทีมเพื่อตรวจสอบ
| ปัญหา | สาเหตุ | วิธีแก้ |
|---|---|---|
| Build Error | โค้ดมี Error | ตรวจสอบ Build Log แล้วแก้ไขโค้ด |
| ภาพไม่แสดง | ลิงก์ภาพไม่ถูกต้อง | ใช้ภาพจาก /public หรือ URL ภายนอก |
| หน้าว่าง | Route ไม่ถูกต้อง | ตรวจสอบโครงสร้างไฟล์ |
| โหลดช้า | ไฟล์ภาพใหญ่เกินไป | ลดขนาดภาพ หรือใช้ WebP format |
Checklist รวม: สิ้นสุด Session 13
ทำไม Caption/Subtitle จึงสำคัญในวิดีโอ?
v0.dev ทำงานอย่างไร?