LEVEL 2 · ระดับกลาง

สื่อจริง: วิดีโอ เสียง และฟอนต์ไทย

ได้เวลาไขปริศนาข้อสองจากบทที่ 2: ทำไมเพจถูกห้ามเล่น <video> / <audio> เอง

7.1 framework ยึดสิทธิ์เล่นสื่อ — และหลักฐานคาตา

ถ้าเพจกด .play() เอง เวลาของสื่อจะไหลตามโลกจริง — เฟรมที่ได้จากการถาม "วินาที 4.5" จะขึ้นกับว่าถามตอนไหน ไม่ใช่ขึ้นกับ 4.5 ดังนั้น framework จึง seek สื่อให้เองทุกเฟรม: เวลาในไฟล์สื่อ = เวลาของเรื่อง ลบ data-start ของ clip

ผมพิสูจน์เรื่องนี้ด้วยวิดีโอทดสอบที่มี timestamp ฝังในภาพ: วางไว้ที่ data-start="3" แล้วถ่ายเฟรมของเรื่องที่วินาที 4.5 — ในภาพเห็น timestamp ของไฟล์ต้นทางชี้ 00:00:01.500 พอดีเป๊ะ (4.5 − 3.0) ไม่มีการเล่น มีแต่การเปิดไปหน้าที่ถูกถาม

7.2 กติกาการวางสื่อ

<video id="broll" class="clip" src="assets/broll.mp4"
  data-start="3" data-duration="3.5" data-track-index="5" muted playsinline></video>

<audio id="chime" src="assets/chime.m4a"
  data-start="0.5" data-track-index="10" data-volume="0.8"></audio>

<video> ต้อง muted + playsinline เสมอ — เสียงเป็นหน้าที่ของ <audio> แยกต่างหาก แม้ใช้ไฟล์เดียวกัน
<audio> ไม่ใส่ data-duration = ใช้ความยาวจริงของไฟล์
data-volume คือระดับเสียงพื้นฐาน อยากเฟดให้ tween volume บน timeline
ห้ามเรียก .play() / .pause() / .currentTime เองเด็ดขาด — คุณเพิ่งอ่านเหตุผลไปใน 7.1

เรนเดอร์แล้วเสียงถูกรวม (mux) ลงไฟล์จริง (log ขึ้น hasAudio: true และ ffprobe เห็น stream aac) — ทั้งหมดนี้ทำงานที่ความลึกไหนของ DOM ก็ได้ รวมถึงใน sub-composition (บทที่ 8)

7.3 ฟอนต์ไทย — ด่านที่คนไทยเจอก่อนใคร

พิมพ์ชื่อฟอนต์เฉย ๆ (font-family: "Sarabun") โดยไม่มี @font-face ชี้ไฟล์ = lint แดงทันที:

✗ font_family_without_font_face: Font families used without @font-face declaration:
  sarabun, noto serif thai. ... Text will fall back to a generic font,
  producing incorrect typography in the video.

ทางแก้คือดาวน์โหลด .woff2 มาไว้ในโปรเจกต์แล้วประกาศ @font-face ชี้ไฟล์ local และมีของแปลกหนึ่งจุดที่ควรรู้ (v0.8.8): ประกาศไว้ในไฟล์ CSS แยกแล้ว link เข้ามา — lint เข้าใจ แต่ตัวตรวจตอนรัน (StaticGuard) มองไม่เห็นและเตือนหลอกทั้งที่ผลจริงถูกต้อง (ผมยันจากเฟรมใน MP4 แล้ว) ย้าย @font-face มา inline ใน style ของเพจแล้วเสียงเตือนหาย — แนะนำ inline ให้จบเรื่อง

สุดท้าย กติกาไทยแท้ ๆ หนึ่งข้อ: line-height ของข้อความไทยบนวิดีโอต้อง ≥ 1.3 ไม่งั้นสระบน-วรรณยุกต์ชนบรรทัดบนจนเครื่องตรวจเลย์เอาต์ฟ้อง

อ่านแบบเต็มเล่ม