OpenCut Workshop #2: ทัวร์หน้าจอ และโปรเจกต์แรกแนวตั้ง 9:16

ตอนที่แล้ว เราติดตั้ง OpenCut จนเปิด editor ได้ ตอนนี้จะพาเดินดูหน้าจอทีละส่วน แล้วตั้งโปรเจกต์แนวตั้ง 9:16 ขนาด 1080×1920 ที่จะใช้ทำคลิปพี่โชว์คุยกับน้องกายไปจนจบซีรีส์

ทุกขั้นในบทนี้ผมกดจริงบน 2 ที่ คือ ตัวที่รันในเครื่อง (OpenCut classic commit cf5e79e เปิดด้วย bun dev:web) และ opencut.app (เปิดดูวันที่ 9 ต.ค. 2026) ทุกภาพมีป้ายมุมขวาล่างบอกว่ามาจากตัวไหน: สีเขียวคือ LOCAL สีน้ำเงินคือ WEB

บทนี้จะได้อะไร

• รู้ว่าหน้าจอ OpenCut มี 4 ส่วนหลัก แต่ละส่วนใช้ทำอะไร
• โปรเจกต์ชื่อ showkhun-ep02 ขนาด 1080×1920 ที่ 30 fps มีพื้นหลังและภาพตัวละคร 2 ตัว
• รู้ “กับดัก” ที่ทำให้ผืนงานแนวตั้งกลายเป็นแนวนอนเอง และวิธีเลี่ยง
• รู้ว่าโปรเจกต์ถูกเก็บไว้ตรงไหน และเปิดกลับมาใหม่ได้จริง
• ไฟล์ MP4 ทดสอบ 1080×1920 ที่ export ออกมาเช็กได้

เตรียมไฟล์ทดสอบ

บทนี้ใช้ไฟล์ที่เราสร้างเองทั้งหมด ไม่ต้องห่วงเรื่องลิขสิทธิ์ ถ้ามี ffmpeg สร้างได้ 2 ไฟล์นี้

# พื้นหลังไล่สีมิ้นต์ ขนาด 1080x1920
ffmpeg -f lavfi -i "gradients=s=1080x1920:c0=0xD8F3DC:c1=0x52B788:x0=0:y0=0:x1=0:y1=1920:nb_colors=2" \
  -frames:v 1 bg-9x16.png

# คลิปทดสอบแนวนอน 1920x1080 ยาว 3 วินาที มีเสียงบี๊บ (ใช้ทดลองกับดักผืนงาน)
ffmpeg -f lavfi -i testsrc2=s=1920x1080:r=30:d=3 -f lavfi -i sine=frequency=440:duration=3 \
  -c:v libx264 -pix_fmt yuv420p -c:a aac -shortest test-16x9.mp4

ภาพตัวละครผมใช้แผ่นภาพพี่โชว์กับน้องกายของบล็อกเอง (phi-show.png, nong-kai.png ขนาด 1024×1536 พื้นหลังเทา) ใครทำตามใช้ภาพอะไรของตัวเองแทนก็ได้

หน้าจอมีอะไรบ้าง

สร้างโปรเจกต์ใหม่จากหน้า Projects → New project จะเจอหน้าจอแบบนี้ (ภาพนี้คือตอนทำเสร็จแล้ว)

เบอร์	ส่วน	ใช้ทำอะไร
1	Assets	คลังไฟล์ของโปรเจกต์ กด Import เพื่อเพิ่มไฟล์
2	Preview	ดูผลงาน เล่น/หยุด ซูม และเต็มจอ
3	Properties	แก้ค่าของชิ้นที่เลือกบนไทม์ไลน์ ถ้ายังไม่เลือกจะขึ้นว่า “It’s empty here”
4	Timeline	วางและเรียงชิ้นงานตามเวลา แต่ละชิ้นอยู่บนแทร็กของตัวเอง
5	แถบแท็บ	สลับเนื้อหาในแผงซ้าย

แท็บในแถบซ้าย (ตามลำดับในตัวที่รันในเครื่อง) คือ Media, Sounds, Text, Stickers, Effects, Transitions, Captions, Adjustment และ Settings แต่ตอนนี้ Transitions กับ Adjustment ยังเป็นแค่ข้อความ “coming soon…” ในโค้ด ยังใช้ไม่ได้

แถบบนสุดมีโลโก้ (กดแล้วมีเมนู Exit project, Shortcuts และ Discord) ชื่อโปรเจกต์ (คลิกแล้วพิมพ์ชื่อใหม่ กด Enter เพื่อเปลี่ยนชื่อ) ปุ่ม Export และปุ่มสลับธีมสว่าง/มืด

opencut.app หน้าตาต่างกันนิดหน่อย

opencut.app ไม่มีแท็บ Sounds และไม่มีปุ่ม Send feedback ส่วนจุดที่ต่างกันจริงจังคือแผง Properties ซึ่งจะเล่าในหัวข้อ “จัดตำแหน่งตัวละคร”

ขั้นที่ 1: ตั้งชื่อ และตั้งผืนงานเป็น 9:16

1. คลิกชื่อ “New project” มุมซ้ายบน พิมพ์ showkhun-ep02 แล้วกด Enter
2. กดไอคอนเฟือง (แท็บ Settings) อันล่างสุดในแถบซ้าย
3. ในแท็บ Project info เลือก 9:16 ส่วน Frame rate ปล่อยไว้ที่ 30 fps

ตัวเลือกที่มีจริงในตัวที่ใช้:

Aspect ratio	ขนาดผืนงาน
16:9 (ค่าเริ่มต้น)	1920×1080
9:16	1080×1920
1:1	1080×1080
4:3	1440×1080
Custom	ใส่กว้าง/สูงเอง

Frame rate เลือกได้ 24, 25, 30, 60 และ 120 fps (ค่าเริ่มต้น 30) ส่วนแท็บ Background ข้างๆ ใช้ตั้งพื้นหลังของผืนงาน มีแบบเบลอ (Light / Medium / Heavy) สีพื้น และลาย

กับดัก: ไฟล์แรกที่ลงไทม์ไลน์ กำหนดขนาดผืนงานใหม่

ผมตั้ง 9:16 แล้ว ลองลากคลิปแนวนอน test-16x9.mp4 ลงไทม์ไลน์เป็นชิ้นแรก ผลคือผืนงานเด้งกลับเป็น 16:9 (1920×1080) เอง

ในโค้ด (insert-element.ts) ถ้าไทม์ไลน์ยังว่าง แล้วเราวางภาพหรือวิดีโอลงไปเป็นชิ้นแรก ผืนงานจะถูกตั้งเป็นขนาดของไฟล์นั้น และถ้าเป็นวิดีโอ ค่า fps ก็จะเปลี่ยนตามไฟล์ด้วย opencut.app ก็ทำแบบเดียวกัน ผมลองแล้วทั้งสองที่

นี่คือคำตอบของเรื่องที่ค้างไว้ในตอนที่ 1 ว่าทำไมไฟล์ export ออกมาเป็น 1080×1920 ทั้งที่ไม่ได้ตั้งอะไร เพราะคลิปแรกที่วางเป็นแนวตั้งนั่นเอง

วิธีเลี่ยง มี 2 ทาง

• วางไฟล์ขนาด 1080×1920 เป็นชิ้นแรก เช่น bg-9x16.png ที่เราสร้างไว้ (ผมใช้วิธีนี้ ลบคลิปแนวนอนทิ้ง แล้ววางพื้นหลังก่อน ผืนงานกลับเป็น 1080×1920)
• ถ้าวางไปแล้ว ให้กลับไปที่ Settings แล้วกด 9:16 อีกครั้ง

ขั้นที่ 2: นำเข้าไฟล์

กลับไปแท็บแรก (Media) กดปุ่ม Import มุมขวาบนของแผง แล้วเลือกไฟล์ หรือลากไฟล์มาวางในกล่องก็ได้

ตอนทดสอบ ช่องเลือกไฟล์ของปุ่ม Import รับทีละ 1 ไฟล์ ผมเลยกด Import ทีละไฟล์ ปุ่ม 2 ปุ่มข้าง Import ใช้สลับมุมมองตาราง/รายการ และเรียงลำดับไฟล์ คลิกขวาที่ไฟล์จะมีเมนู Export clips กับ Delete

ขั้นที่ 3: วางลงไทม์ไลน์

ชี้เมาส์ที่ภาพในแผง Assets จะมีปุ่ม + โผล่ขึ้นมา กดแล้วไฟล์จะไปวางบนไทม์ไลน์ตรงตำแหน่งหัวเล่น (เส้นสีฟ้า) ผมกดเรียงแบบนี้

1. bg-9x16.png (ชิ้นแรก ผืนงานจะเป็น 1080×1920 พอดี)
2. phi-show.png
3. nong-kai.png

ภาพนิ่งแต่ละชิ้นยาว 5 วินาทีเป็นค่าเริ่มต้น และชิ้นที่วางทีหลังจะขึ้นไปอยู่บนแทร็กใหม่ที่อยู่ ด้านบน แทร็กบนสุดคือชั้นหน้าสุดของภาพ เหมือนเรียงกระดาษซ้อนกัน พื้นหลังเลยอยู่ล่างสุด ตัวละครอยู่ข้างบน

ขั้นที่ 4: จัดตำแหน่งตัวละคร (แผง Properties)

คลิกชิ้นภาพบนไทม์ไลน์ แผง Properties จะขึ้นค่าของชิ้นนั้น ตัวที่รันในเครื่องมี Position X, Position Y, Scale X, Scale Y และ Rotate

ค่าที่ผมใส่

ชิ้น	Position X	Position Y	Scale X / Y
น้องกาย	230	300	0.45
พี่โชว์	-220	250	0.5

Position นับเป็นพิกเซลจาก จุดกลางผืนงาน X เป็นบวกคือไปทางขวา Y เป็นบวกคือ ลงล่าง ผมเช็กจากไฟล์ที่ export ออกมา น้องกายไปอยู่ขวาล่าง พี่โชว์อยู่ซ้าย ตรงตามค่าที่ใส่

ส่วน opencut.app แผงเดียวกันชื่อ Transform และมีช่อง Width, Height, X, Y และ Rotation แทน

บน opencut.app ช่อง Width/Height เริ่มที่ 100 ผมเปลี่ยนแค่ Width เป็น 45 ส่วน Height ยังเป็น 100 ผลคือภาพตัวละคร ผอมยืด เพราะย่อแค่แนวนอน ดูเทียบได้ในภาพ export ด้านล่าง ถ้าจะย่อบน opencut.app ให้แก้ Height ให้เท่ากันด้วย (ไอคอนรูปโซ่ระหว่างสองช่องน่าจะใช้ล็อกสัดส่วน แต่ผมยังไม่ได้ลองกด)

เจอบนเครื่องทดสอบ: หลังพิมพ์ค่าในช่อง Position/Scale ภาพใน Preview หายไป เหลือแค่กรอบของชิ้นที่เลือก เกิดทั้งสองเวอร์ชัน ผมทดสอบด้วย Chrome แบบไม่มีหน้าจอบนเครื่องที่ไม่มีการ์ดจอ พอเปิดโปรเจกต์ใหม่ ภาพก็กลับมาครบ และไฟล์ export ถูกต้อง ถ้าเจอแบบเดียวกัน ลองเปิดโปรเจกต์ใหม่ก่อน

ขั้นที่ 5: ดูผลใน Preview และรู้จักแถบเครื่องมือ

เบอร์	มีอะไร
1	Split element, Split left, Split right, Extract audio, Duplicate element, Freeze frame (ยัง “coming soon”), Delete element, Add/Remove bookmark และปุ่มกราฟ keyframe
2	ตัวเลือก scene ตอนนี้มี “Main scene”
3	Auto snapping, Ripple editing, ซูมออก แถบซูม และซูมเข้า ของไทม์ไลน์
4	เวลาปัจจุบัน / ความยาวทั้งหมด (คลิกที่เวลาเพื่อพิมพ์เวลาได้) และปุ่มเล่น
5	ซูม Preview (Fit, 25%, 50%, 75%, 100%, 150%, 200%) และปุ่มเต็มจอ

ชื่อปุ่มในกลุ่ม 1 และ 3 ผมอ่านจาก timeline-toolbar.tsx เพราะเวลาชี้เมาส์จะขึ้นชื่อเป็น tooltip ซึ่งจับภาพได้ไม่นิ่ง ส่วนวิธีใช้ split, snap และ ripple จะลงมือจริงในตอนที่ 3

ผมกดเล่น ตัวเลขเวลาเดินไปถึง 00:00:01:12 (1 วินาที 12 เฟรม) แปลว่าเล่นได้ปกติ

ปุ่มลัดที่เช็กแล้ว

กดโลโก้มุมซ้ายบน → Shortcuts จะเปิดหน้าต่าง Keyboard shortcuts ตารางนี้คัดมาจากหน้าต่างนั้น ซึ่งตัวที่รันในเครื่องกับ opencut.app ขึ้นเหมือนกันทุกบรรทัด

ปุ่ม	ทำอะไร
Esc	ยกเลิกสิ่งที่กำลังทำอยู่
Ctrl + C / Ctrl + V	คัดลอกชิ้นที่เลือก / วางที่ตำแหน่งหัวเล่น
Backspace หรือ Delete	ลบชิ้นที่เลือก
S	ตัดชิ้นงานที่ตำแหน่งหัวเล่น
Q / W	ตัดแล้วลบส่วนซ้าย / ส่วนขวาของหัวเล่น
N	เปิด/ปิด snapping
Ctrl + Z	Undo
Ctrl + Shift + Z หรือ Ctrl + Y	Redo
← / →	ถอยหลัง / เดินหน้าทีละเฟรม
Shift + ← / Shift + →	ถอย / เดินหน้า 5 วินาที
Home หรือ Enter / End	ไปต้น / ท้ายไทม์ไลน์
Space หรือ K	เล่น / หยุด
J / L	ถอย / เดินหน้า 1 วินาที
Ctrl + D	ทำสำเนาชิ้นที่เลือก
Ctrl + A	เลือกทุกชิ้น

บน Mac ใช้ Cmd แทน Ctrl ผมเช็กจากโค้ด (keybindings-store.ts) ที่สลับไปใช้ปุ่ม Cmd เมื่อเป็นเครื่อง Apple แต่ยังไม่ได้กดบน Mac จริง ในหน้าต่างนี้ยังตั้งปุ่มลัดเองได้ และมีปุ่ม Reset to default ไว้คืนค่าเดิม

ขั้นที่ 6: โปรเจกต์เก็บอยู่ที่ไหน ปิดแล้วเปิดใหม่ได้ไหม

OpenCut ไม่มีปุ่ม Save มันบันทึกเองหลังเราแก้งานประมาณ 0.8 วินาที (ค่า 800 ms ใน save-manager.ts) และเก็บทุกอย่างไว้ ในเบราว์เซอร์ของเครื่องเรา ไม่ได้ส่งขึ้นเซิร์ฟเวอร์ ผมเปิดดูที่เก็บข้อมูลของเว็บแล้วเจอตามนี้ ทั้งสองเวอร์ชันเหมือนกัน

เก็บอะไร	อยู่ที่ไหน
รายการโปรเจกต์และการตั้งค่า	IndexedDB ชื่อ video-editor-projects
ข้อมูลไฟล์สื่อของแต่ละโปรเจกต์	IndexedDB ชื่อ video-editor-media-<รหัสโปรเจกต์>
ตัวไฟล์ภาพ/วิดีโอจริง	OPFS (ที่เก็บไฟล์ส่วนตัวของเว็บ) โฟลเดอร์ media-files-<รหัสโปรเจกต์>

ผมลองปิดเบราว์เซอร์ทั้งตัว แล้วเปิดใหม่ด้วยโปรไฟล์เดิม เข้าหน้า Projects ยังเจอ showkhun-ep02 อยู่ กดเข้าไปแล้ว ไฟล์ 4 ชิ้นใน Assets และภาพ 3 ชิ้นบนไทม์ไลน์อยู่ครบ ตัวละครอยู่ตำแหน่งเดิม

สิ่งที่ควรรู้

• เบราว์เซอร์อื่น เครื่องอื่น หรือโหมดไม่ระบุตัวตน จะไม่เห็นโปรเจกต์นี้ เพราะข้อมูลอยู่ในเบราว์เซอร์นั้นเท่านั้น
• opencut.app กับ localhost:3000 นับเป็นเว็บคนละเว็บ โปรเจกต์ไม่ข้ามกัน
• ถ้าล้างข้อมูลเว็บ (Clear site data) โปรเจกต์และไฟล์ในนั้นหายหมด
• OpenCut ขอให้เบราว์เซอร์เก็บข้อมูลแบบถาวร (navigator.storage.persist()) แต่เบราว์เซอร์อาจไม่ให้ บนเครื่องทดสอบผมได้ผล persisted: false แปลว่าถ้าพื้นที่เครื่องใกล้เต็ม เบราว์เซอร์มีสิทธิ์ลบข้อมูลทิ้งได้ เก็บไฟล์ต้นฉบับไว้ในเครื่องเสมอ

URL ของหน้าตัดต่อก็ต่างกันนิดหน่อย ตัวในเครื่องเป็น /editor/<รหัส> ส่วน opencut.app เป็น /editor?project=<รหัส>

ขั้นที่ 7: Export ทดสอบ

กดปุ่ม Export มุมขวาบน เมนูมี 3 หัวข้อ

• Format: MP4 (H.264) หรือ WebM (VP9)
• Quality: Low, Medium, High (ค่าเริ่มต้น) หรือ Very high
• Audio: ติ๊กว่าจะใส่เสียงไหม (ค่าเริ่มต้นใส่)

บทนี้ใช้ค่าเริ่มต้นแล้วกด Export เลย ตัวเลือกพวกนี้จะลงรายละเอียดตอนท้ายซีรีส์ ผลที่ได้

	ตัวในเครื่อง	opencut.app
ไฟล์	showkhun-ep02.mp4	showkhun-ep02.mp4
วิดีโอ	H.264 1080×1920 30 fps ยาว 5.0 วินาที	H.264 1080×1920 30 fps ยาว 5.0 วินาที
เสียง	ไม่มี (โปรเจกต์ไม่มีไฟล์เสียง)	ไม่มี
เวลา export บนเครื่องทดสอบ	46 วินาที	45 วินาที

เวลา export นี้มาจากเครื่องทดสอบที่ไม่มีการ์ดจอ เครื่องทั่วไปน่าจะเร็วกว่านี้

ตัวอย่างไฟล์ที่ export จาก OpenCut ในตอนนี้ (5 วินาที ไม่มีเสียง)

ดูคลิปบน YouTube

ภาพตัวละครยังมีพื้นหลังสีเทาติดมาด้วย เพราะไฟล์ต้นฉบับไม่ได้ตัดพื้นหลังไว้ เรื่องนี้จะแก้ตอนจัดฉากคุยกัน

ข้อจำกัดที่เจอในบทนี้

• แท็บ Transitions และ Adjustment ยังขึ้นแค่ “coming soon…” และปุ่ม Freeze frame ก็ยังเป็น coming soon
• opencut.app ไม่มีแท็บ Sounds ส่วนตัวในเครื่องต้องมีคีย์ Freesound ก่อนถึงจะใช้ได้ (ดูตอนที่ 1)
• ปุ่ม Import เลือกได้ทีละ 1 ไฟล์
• ภาพใน Preview หายหลังแก้ค่าใน Properties บนเครื่องทดสอบ (เปิดโปรเจกต์ใหม่แล้วกลับมา ไฟล์ export ไม่มีปัญหา)
• โปรเจกต์อยู่ในเบราว์เซอร์เครื่องเดียว และเบราว์เซอร์อาจไม่ยอมเก็บแบบถาวร

สรุป: ทดสอบจริงอะไร อะไรมาจากโค้ด

เรื่อง	ตัวในเครื่อง (cf5e79e)	opencut.app
ตั้ง 9:16 / 30 fps และเปลี่ยนชื่อโปรเจกต์	✅ กดจริง	✅ กดจริง
กับดักไฟล์แรกเปลี่ยนผืนงาน	✅ เจอจริง + เช็กในโค้ด	✅ เจอจริง
Import + ปุ่ม + + แทร็กซ้อนกัน	✅	✅
แก้ตำแหน่ง/ขนาดตัวละคร	✅ Position/Scale	✅ X/Y/Width (คนละชื่อช่อง)
ปุ่มลัด	✅ จากหน้าต่าง Shortcuts	✅ เหมือนกันทุกบรรทัด
ที่เก็บโปรเจกต์ (IndexedDB + OPFS)	✅ เปิดดูจริง	✅ เปิดดูจริง
ปิดเบราว์เซอร์แล้วเปิดโปรเจกต์ใหม่	✅	✅
Export MP4 1080×1920	✅	✅
ชื่อปุ่มในแถบไทม์ไลน์	📄 อ่านจากโค้ด	📄 ไอคอนเหมือนกัน
Cmd บน Mac	📄 อ่านจากโค้ด	📄

ทั้งหมดทดสอบบน Linux ด้วย Chrome ยังไม่ได้ลองบน macOS และ Windows แต่ OpenCut รันในเบราว์เซอร์ หน้าจอจึงน่าจะเหมือนกัน

Recap

• รู้จัก 4 ส่วนของหน้าจอ: Assets, Preview, Properties, Timeline
• ตั้งผืนงานเป็น 9:16 (1080×1920) ที่แท็บ Settings ได้
• รู้ว่าไฟล์แรกที่วางลงไทม์ไลน์เปลี่ยนขนาดผืนงาน และเลี่ยงได้ด้วยการวางพื้นหลัง 1080×1920 ก่อน
• แทร็กบนสุดคือชั้นหน้าสุดของภาพ
• Position นับจากกลางผืนงาน Y บวกคือลงล่าง
• โปรเจกต์อยู่ในเบราว์เซอร์ (IndexedDB + OPFS) ล้างข้อมูลเว็บแล้วหาย
• Export ได้ MP4 1080×1920

ตอนหน้า

ตอนที่ 3 จะลงมือกับไทม์ไลน์จริงจัง ตัดคลิปด้วย S, Q, W เปิดปิด snap ลากเรียงหลายแทร็ก และใส่ bookmark เพื่อตัดเสียงพูดให้เหลือเฉพาะประโยคที่ใช้ เตรียมโปรเจกต์ showkhun-ep02 ไว้ใช้ต่อได้เลยครับ

---

Navigation

• ก่อนหน้า: Workshop #1: ติดตั้งโปรแกรมตัดต่อฟรี ใช้บนเว็บทันที หรือรันในเครื่องด้วย Bun
• ถัดไป: Workshop #3: ไทม์ไลน์พื้นฐาน ตัด แยก ลาก และ snap แบบจับมือทำ
• ดูทั้งชุด: OpenCut Workshop