ผมเปิดดูวิดีโอบทเรียนในคอร์สของตัวเอง แล้วรู้สึกหงุดหงิดเล็กๆ ครับ — กดเข้าบทเรียนปุ๊บ จอดำอยู่พักนึงกว่าภาพจะขึ้น พอเล่นไปเรื่อยๆ บางทีก็ค้าง แล้วยังมีปุ่มแปลกๆ เด้งให้วิดีโอไปลอยอีกมุมจออีก ทั้งที่คอมผมก็แรง เน็ตก็เร็ว มันไม่ควรอืดขนาดนี้
เรื่องนี้น่าสนใจตรงที่ ทิม (AI Agent ของผม) ไม่รีบแก้ ครับ มันไม่ได้กระโดดไปเดาว่า "วิดีโอคงเสีย" หรือ "เน็ตคงช้า" แล้วลงมือทันที — แต่ไปขุดหลักฐานก่อน จนเจอว่าตัวที่ผมนึกว่าพัง จริงๆ ไม่ได้พังเลย วันนี้เลยอยากเล่าเรื่องการแก้บั๊กที่เริ่มจาก "อย่าเพิ่งเชื่อสิ่งที่ตาเห็น" ครับ
ที่มา — คอร์สออนไลน์ที่ผมเพิ่งเปิดขาย
เล่าฉากหลังก่อนครับ ช่วงนี้ผมเปิดคอร์สออนไลน์สอนใช้ AI ยิงแอด Meta ขายอยู่บนระบบเรียนของเราเอง (LearnAI) วิดีโอบทเรียนทั้งหมดผมฝากไว้บน Bunny Stream — เป็นบริการ CDN สำหรับสตรีมวิดีโอ มันจะ encode วิดีโอเราเป็นหลายความละเอียด (240p ไปจนถึง 1080p) แล้วเสิร์ฟให้คนดูจากเซิร์ฟเวอร์ที่ใกล้ที่สุด
ตอนแรกผมต่อวิดีโอเข้าหน้าเว็บด้วยวิธีที่ง่ายที่สุด คือเอา iframe player สำเร็จรูป ของ Bunny มาแปะ — เหมือนเอาหน้าจอเครื่องเล่นของเขามาฝังในหน้าเราเลย เสียบปุ๊บเล่นได้ปั๊บ ไม่ต้องเขียนอะไรเอง สะดวกดี
แต่พอใช้จริงมันออกอาการ 3 อย่าง: (1) เปลี่ยนบทเรียนทีไรจอดำรอนาน (2) เล่นๆ ไปค้างเป็นพักๆ (3) มีปุ่ม picture-in-picture เด้งให้วิดีโอหลุดไปลอยอีกมุมจอ ซึ่งผมไม่ได้อยากให้มี
ขั้นแรก — ไปขุด log ก่อน อย่าเพิ่งเดา
ตรงนี้คือจุดที่ผมชอบวิธีทำงานของทิมครับ ผมไม่ได้สั่งว่า "แก้ให้วิดีโอเร็วขึ้นที" แล้วปล่อยให้มันไปเดาสุ่ม — กฎเหล็กของผมคือ เจอบั๊กให้เช็คหลักฐานก่อนเสมอ ห้ามเดา ทิมเลยไปไล่ดูของจริงทีละชั้น:
- วิดีโอ encode ครบไหม? — เช็คทุกบท สถานะ encode สมบูรณ์หมด มีครบทุกความละเอียดตั้งแต่ 240p ถึง 1080p
- CDN เสิร์ฟช้าไหม? — จับเวลาโหลดไฟล์จริง ได้ราวครึ่งวินาที ถือว่าเร็วปกติ
- ไฟล์เพี้ยน บิตเรตผิดไหม? — ปกติทุกอย่าง
สรุปคือ วิดีโอไม่ได้พัง Bunny ไม่ได้พัง CDN ก็ไม่ได้ช้า ครับ ทุกอย่างที่ผมนึกว่าเป็นตัวการ จริงๆ แล้วทำงานดีหมด
เทียบให้เห็นภาพ — เหมือนผมบ่นว่ารถออกตัวช้า ก็เดาว่าเครื่องยนต์คงมีปัญหา แต่พอช่างเปิดฝากระโปรงดูจริง เครื่องดีหมด น้ำมันเต็ม ยางลมพอ — ตัวที่หนักคือ "ตัวถังรถ" ที่ผมดันเอามาครอบทับ มันหนักเกินจนเครื่องดีๆ ก็ลากไม่ออก
บั๊กที่แท้จริง — ตัวการคือ player สำเร็จรูป ไม่ใช่วิดีโอ
พอตัดทุกอย่างที่ไม่ใช่ออกไป เหลือผู้ต้องสงสัยตัวเดียวครับ — เจ้า iframe player สำเร็จรูป ที่ผมเอามาแปะตั้งแต่แรกนั่นแหละ
ปัญหาของมันคือ ทุกครั้งที่ผมเปลี่ยนบทเรียน มันต้อง "สร้างเครื่องเล่นใหม่ทั้งตัว" ใหม่หมด โหลด UI โหลดสคริปต์ ตั้งค่าใหม่ทุกรอบ กว่าจะพร้อมเล่นก็เลยจอดำรอนาน แถมมันไม่ยอม preload วิดีโอล่วงหน้า และในบางจังหวะยังเสี่ยงไปดึงไฟล์ MP4 ก้อนใหญ่ทั้งไฟล์มาแทนที่จะสตรีมเป็นชิ้นๆ — เลยค้าง
พูดง่ายๆ คือ ความสะดวกตอนแรก (เสียบปุ๊บเล่นปั๊บ) มันแลกมาด้วยน้ำหนักที่ผมแบกไม่ไหวตอนใช้จริง โจทย์เลยเปลี่ยนจาก "วิดีโอเสียตรงไหน" เป็น "จะเอาตัวถังหนักๆ นี่ออก แล้วเล่นวิดีโอตรงๆ ยังไงให้เบาที่สุด"
วิธีแก้ — ทิ้ง player สำเร็จรูป เขียนเครื่องเล่นเองด้วย hls.js
ก่อนลงมือ ทิมเสนอผม 2 ทางครับ: ทางลัดคือแค่ไปปิดปุ่ม pip ที่กวนใจ จบ — แต่จอดำกับอาการค้างก็ยังอยู่ ส่วนทางที่ยั่งยืนกว่าคือ เลิกใช้ iframe สำเร็จรูปไปเลย แล้วเล่นวิดีโอด้วยเครื่องเล่นพื้นฐานของเบราว์เซอร์เอง ผมเลือกทางหลังครับ เพราะอยากแก้ที่รากไม่ใช่กลบอาการ
ทิมเลยเปลี่ยนมาใช้ tag <video> ธรรมดาของเบราว์เซอร์ (ตัวที่เบาที่สุด เพราะเป็นของในตัวอยู่แล้ว) แล้วเอาไลบรารีเล็กๆ ตัวหนึ่งชื่อ hls.js มาทำหน้าที่ป้อนวิดีโอแบบสตรีมเข้าไป — ชี้ตรงไปที่ลิงก์ HLS ของ Bunny เลย ไม่ผ่านตัวถังหนักๆ อีกต่อไป
HLS (HTTP Live Streaming) คือวิธีสตรีมที่หั่นวิดีโอเป็นชิ้นเล็กๆ แล้วทยอยส่งทีละชิ้น เล่นไปโหลดไป ไม่ต้องรอทั้งไฟล์ และมันเลือกความละเอียดให้เองตามความเร็วเน็ต ณ ตอนนั้น (เน็ตช้าก็หย่อนลง 480p เน็ตดีก็ดัน 1080p) ทิมตั้งค่าให้มันเริ่มจากความละเอียดต่ำก่อนเพื่อให้ภาพขึ้นไว แล้วค่อยไต่ขึ้นเอง บวกกับปิดปุ่มดาวน์โหลดและ pip ที่ไม่อยากได้ทิ้งไปด้วยในตัว
พิสูจน์ด้วยเบราว์เซอร์จริง ไม่ใช่ "น่าจะดีขึ้น"
จุดที่ผมยึดมาตลอดคือ แก้เสร็จต้องวัดผลจริง ไม่ใช่เคลมว่า "น่าจะเร็วขึ้น" ครับ ทิมเลยเปิดเบราว์เซอร์จริงด้วย Playwright แล้วลองเล่นวิดีโอ วัดออกมาเป็นตัวเลข:
- เฟรมแรกขึ้นภายใน 4 มิลลิวินาที — จากเดิมที่จอดำรอเป็นวินาที เหลือแทบจะทันที
- เล่นลื่น บัฟเฟอร์ล่วงหน้าไว้เกือบ 200 วินาที — เลื่อนข้ามไปข้างหน้าได้ไม่สะดุด
- มันเลือก 480p ขึ้นมาเล่นเองตามเน็ต แล้วไต่ขึ้นเอง ไม่ต้องตั้งค่าเอง
- 0 error ใน console — ไม่มีอะไรพังเงียบๆ อยู่เบื้องหลัง
จากวิดีโอที่กดแล้วจอดำลุ้นว่าจะขึ้นไหม กลายเป็นกดแล้วเล่นทันทีเหมือนเปิด YouTube ครับ และที่สำคัญ — แก้ที่ตัวเครื่องเล่น ไม่ได้ไปยุ่งกับวิดีโอหรือ Bunny ที่ทำงานดีอยู่แล้วเลยแม้แต่นิดเดียว
หลังจากนั้นทิมยังต่อยอด LearnAI อีกจุดที่ผมชอบมาก คือ สอนระบบเรียนให้รองรับบทโบนัสแบบข้อความล้วน แทนการบังคับว่าทุกบทต้องมีวิดีโอ ทำให้ฝั่งคอร์สทั้ง player และ lesson model เริ่มยืดหยุ่นขึ้นพร้อมกัน
บทเรียน — ความสะดวกสำเร็จรูป มีราคาที่ต้องจ่ายทีหลัง
เรื่องนี้สอนผมซ้ำในสิ่งที่เจอบ่อยมากเวลาทำของจริงครับ:
- อย่าเดาว่าอะไรพัง — ไปดูหลักฐานก่อน ถ้าทิมรีบแก้ตามที่ผมบ่น มันคงไปนั่งงมแก้ Bunny หรือเปลี่ยนผู้ให้บริการวิดีโอทั้งที่ของเดิมไม่ได้ผิดอะไรเลย เสียเวลาเปล่าและแก้ผิดจุด
- ของสำเร็จรูปดีตอนเริ่ม แต่หนักตอนโต iframe player แปะแล้วใช้ได้เลยก็จริง แต่พอเอาจริงมันแบกของที่เราไม่ต้องการมาเต็มไปหมด ถึงจุดหนึ่งการ "เขียนเองให้พอดีตัว" กลับเบากว่าและเร็วกว่า
- มี 2 ทางเสมอ — ทางกลบอาการ กับทางแก้ราก ทิมเสนอทั้งคู่ให้ผมเลือก ไม่ได้ตัดสินใจแทน ผมเลือกแก้รากเพราะคอร์สนี้ผมจะใช้ยาว ไม่อยากกลับมาเจ็บซ้ำ
ที่ผมเล่าเรื่องจิ๊บจ๊อยแบบนี้บ่อยๆ เพราะมันคือความต่างระหว่างเครื่องมือที่ลูกค้าใช้แล้วลื่น กับเครื่องมือที่ใช้แล้วสะดุดจนเขาเลิกเรียนกลางคอร์ส — และไม่มีใครเห็นงานเบื้องหลังพวกนี้เลย เห็นแค่ "วิดีโอมันเล่นไว" เฉยๆ
Newton — AI ที่ไม่เดา แต่ไล่ของจริงให้คุณ
ทั้งหมดที่เล่ามานี่คือวิธีทำงานของ Newton ครับ — AI Agent เต็มตัวที่อยู่บน server ส่วนตัวของคุณ 24 ชั่วโมง คุยสั่งงานจากมือถือเหมือนแชทกับคน เวลามีอะไรพังหรืออืด มันไม่กระโดดเดาแล้วลงมือมั่ว แต่ไปขุด log ขุดหลักฐานก่อนจนเจอตัวการจริง แล้วค่อยเสนอทางเลือกให้คุณตัดสินใจ
ข้อดีของการมี AI บน server ส่วนตัว ไม่ใช่บน platform คนอื่น คือผมคุมได้ทุกชั้นครับ — จะรื้อ player ทิ้งทั้งตัวแล้วเขียนใหม่ จะเปลี่ยนวิธีสตรีม จะวัดผลด้วยเบราว์เซอร์จริง ทำได้หมด ไม่ต้องรอใครอนุญาต และพอผมขัดเกลารายละเอียดเล็กๆ แบบเรื่องวันนี้เสร็จ มันก็กลายเป็นวิธีคิดที่ทิมเอาไปใช้กับงานอื่นต่อ เหมือนตอนที่ผมไล่ทีละ engine ว่าตัวไหนจำเรื่องได้บ้าง หรือตอนย้าย AI กลับมานั่งที่นั่ง subscription เหมา — งานเบื้องหลังที่ไม่หวือหวา แต่ทำให้ของทั้งระบบดีขึ้นทีละนิด
คำถามที่พบบ่อย
ทำไม iframe player สำเร็จรูปถึงทำให้วิดีโอโหลดช้า?
เพราะ iframe player ต้องโหลด UI โหลดสคริปต์ และสร้าง environment ใหม่ทั้งหมดทุกครั้งที่เปลี่ยนบทเรียนครับ มันหนักและช้ากว่าการใช้ tag video ธรรมดาของเบราว์เซอร์มาก บวกกับ iframe บางตัวยังดึงไฟล์ทั้งก้อนแทนการ stream เป็นชิ้นๆ ทำให้ค้างกลางทาง
HLS (HTTP Live Streaming) คืออะไร และดีกว่าเล่นวิดีโอตรงๆ ยังไง?
HLS คือวิธีหั่นวิดีโอเป็นชิ้นเล็กๆ แล้วทยอยส่งทีละชิ้นครับ เล่นไปโหลดไป ไม่ต้องรอทั้งไฟล์ และมันเลือกความละเอียดให้เองตามความเร็วเน็ต เน็ตช้าก็หย่อนลง 480p เน็ตดีก็ดัน 1080p ทำให้วิดีโอลื่นแม้เน็ตไม่เสถียร
วิดีโอบทเรียนในคอร์สออนไลน์โหลดช้า ควรแก้จากจุดไหนก่อน?
ควรเช็คหลักฐานก่อนเดาครับ ตรวจสอบว่าไฟล์วิดีโอ encode ครบไหม CDN ช้าจริงไหม ก่อนสรุปว่าเป็นปัญหา server กรณีนี้วิดีโอและ CDN ปกติ แต่ตัว player สำเร็จรูปที่หนักเกินต่างหากที่เป็นตัวการ การ diagnose ผิดจะเสียเวลาแก้ผิดจุด
hls.js คืออะไร ใช้งานยากไหม?
hls.js เป็น JavaScript library เล็กๆ ที่ช่วยให้เบราว์เซอร์เล่นไฟล์ HLS ได้ครับ ใช้ร่วมกับ tag video ธรรมดาของเบราว์เซอร์ เบา ปรับแต่งได้เต็มที่ ไม่ต้องพึ่ง player สำเร็จรูปใดๆ และยังตั้งค่า adaptive bitrate และ preload ได้ตามต้องการ
ถ้าคุณอยากมี AI Agent ที่อยู่ในเครื่องของคุณเอง ทำงานต่อเนื่อง คุยง่ายจากมือถือ และแก้ปัญหาด้วยการ "ไล่ของจริง" ไม่ใช่เดาสุ่ม — ลอง Newton ดูครับ setup เสร็จใน 10 นาที ไม่ต้องมีความรู้เรื่อง server เลย
— ปอนด์