LEVEL 1 · พื้นฐานที่ใช้ทุกวัน
ตัดต่อบน DOM — clips & tracks
ในโปรแกรมตัดต่อ คุณลากคลิปวางบนราง ใน HyperFrames รางก็มีเหมือนกัน แต่มันคือตัวเลขหนึ่งตัวบน attribute และความเข้าใจผิดที่ต้องรื้อก่อนคือ: ราง (track) เป็นเรื่องของเวลา ไม่ใช่เรื่องของชั้นภาพ
4.1 ราง = เลนของเวลา
data-track-index มีหน้าที่เดียว: บอกว่า clip ไหนแชร์เลนเวลากัน กติกาคือ สอง clip บนรางเดียวกันห้ามซ้อนช่วงเวลากัน ส่วนใครบังหน้าใครบนจอเป็นเรื่องของ CSS z-index ล้วน ๆ — clip บนราง 5 ไม่ได้ "อยู่เหนือ" ราง 1
การ์ดนัดประชุมใช้ 6 ราง แยกตามบทบาท:
data-track-index คือเลนของเวลา: clip สองตัวบนรางเดียวกันห้ามซ้อนช่วงเวลากัน ส่วนใครบังใครบนจอเป็นเรื่องของ z-index ล้วน ๆ · ธรรมเนียม: เสียงแยกไปรางเลขสูง (ราง 10) ให้อ่านผังง่าย4.2 ซ้อนรางแล้วเกิดอะไร — ทดลองจริง
ผมย้ายการ์ดปิดไปราง 3 ให้ซ้อนกับแถวรายละเอียด (6.5–10 ทับ 2.5–10) แล้วรันทุกด่าน: lint เงียบ check ผ่าน และเฟรมที่ถ่ายออกมาดูปกติทุกอย่าง — ทั้งสอง clip โชว์พร้อมกันเหมือนไม่มีอะไรเกิดขึ้น
นั่นแหละคือจุดที่ต้องกลัว contract เรียกผลของการซ้อนรางว่า undefined — ไม่ได้แปลว่า "พัง" แต่แปลว่า ไม่มีสัญญาอะไรทั้งนั้น วันนี้ดูปกติ รุ่นหน้าอาจไม่ และไม่มีเครื่องตรวจตัวไหนช่วยคุณ (ยืนยันกับ v0.8.8) เจอ clip ใหม่ที่ช่วงเวลาทับของเดิม ให้หารางว่างหรือขยับเวลาอย่างตั้งใจ
4.3 ตัดต่อจริง: เลื่อน หั่น เรียงใหม่
การตัดต่อทั้งหมดคือการแก้ตัวเลขบน attribute: เลื่อนคลิป = แก้ data-start · ยืด-หด = แก้ data-duration · หั่นวิดีโอหนึ่งไฟล์เป็นหลายท่อน = สร้าง video หลาย element ชี้ไฟล์เดียวกัน แล้วใช้ data-media-start เลือกจุดเริ่มในไฟล์ต้นทางของแต่ละท่อน
ที่เก๋กว่านั้นคือ data-start รับชื่อ clip อื่นแทนตัวเลขได้: data-start="intro" แปลว่า "เริ่มเมื่อ intro จบ" และ data-start="intro - 0.5" สร้างช่วงเกยสำหรับ crossfade (ต้องอยู่คนละราง — ซ้อนรางเดียวกันผิดกติกาข้อ 4.1 เสมอ)