เบื้องหลัง HLS vs MP4: ทำไมหนังบนเว็บถึงสตรีมได้ลื่นไหล ไม่ต้องรอโหลดนาน?
Back to Blog

เบื้องหลัง HLS vs MP4: ทำไมหนังบนเว็บถึงสตรีมได้ลื่นไหล ไม่ต้องรอโหลดนาน?

21 กรกฎาคม 2569

⚡ เบื้องหลัง HLS vs MP4: ทำไมหนังบนเว็บถึงสตรีมได้ลื่นไหล ไม่ต้องรอโหลดนาน?

🤔 เคยสงสัยไหม ทำไมดูหนังบางเว็บถึงกระตุก?

คุณเคยเจอปัญหาแบบนี้ไหมครับ? เวลาดูหนังผ่าน Netflix หรือ YouTube ภาพจะมาทันที กรอไปตรงไหนก็เล่นต่อได้เลย แต่พอไปดูวิดีโอบนเว็บไซต์ทั่วไป กลับต้องนั่งดูวงกลมหมุนติ้วๆ รอมันบัฟเฟอร์เป็นนาที!

ความลับของความลื่นไหลนี้ ไม่ได้อยู่ที่ความแรงของเน็ตคุณเพียงอย่างเดียวครับ แต่อยู่ที่ "ฟอร์แมต" ของวิดีโอต่างหาก! วันนี้ UFlix จะพาไปเจาะลึกเบื้องหลังเทคโนโลยีสตรีมมิ่งที่ทำให้คุณดูหนังได้แบบไม่มีสะดุด


1️⃣ มวยถูกคู่: โหลดก้อนใหญ่ (MP4) vs หั่นเป็นชิ้นเล็ก (HLS) ⚔️

HLS vs MP4 Concept

เพื่อให้เห็นภาพง่ายที่สุด ลองจินตนาการว่าวิดีโอคือ "พิซซ่าถาดใหญ่":

  • แบบ MP4 (ยุคเก่า): เหมือนคุณต้องรอให้พิซซ่าทั้งถาดอบจนเสร็จ แล้วค่อยยกมาเสิร์ฟทีเดียว ถ้าเน็ตคุณช้า หรือไฟล์หนังใหญ่ระดับ 5GB... เบราว์เซอร์จะต้องพยายามดาวน์โหลดก้อนข้อมูลมหาศาลนี้ให้เสร็จระดับนึงก่อน ถึงจะเริ่มเล่นได้ และถ้าคุณกดข้ามไปตอนจบ มันก็จะเอ๋อไปเลย!
  • แบบ HLS (ยุคปัจจุบัน): HLS (HTTP Live Streaming) คือเทคโนโลยีจาก Apple ที่ทำงานเหมือนการ ตัดพิซซ่าเป็นชิ้นเล็กๆ หลายสิบชิ้น (ไฟล์ละ 2-10 วินาที) แล้วค่อยๆ เสิร์ฟให้คุณทีละชิ้น!

ข้อดีของ HLS: ✔️ เริ่มเล่นได้ทันทีเพราะโหลดแค่ชิ้นแรก (ไม่กี่ MB) ✔️ กดข้ามไปตรงไหน เบราว์เซอร์ก็จะวิ่งไปหยิบ "ชิ้น" นั้นมาเล่นทันที ✔️ ปรับความคมชัดอัตโนมัติ (Adaptive Bitrate) ถ้านาทีนี้เน็ตคุณช้า ระบบจะเสิร์ฟชิ้นที่ภาพดรอปลงหน่อยให้ เพื่อไม่ให้ค้าง!


2️⃣ พลังแฝงของ Google Drive ที่หลายคนไม่รู้ ☁️

พลังแฝงของ Google Drive

หลายคนคิดว่า Google Drive เป็นแค่ที่ฝากไฟล์ (เหมือน Flash Drive บนฟ้า) แต่รู้หรือไม่ว่า... Google Drive มีเอนจิ้นสตรีมมิ่งวิดีโอที่โคตรโหดซ่อนอยู่เบื้องหลัง!

เมื่อคุณอัปโหลดไฟล์วิดีโอขึ้นไป (ไม่ว่าจะเป็น MP4 หรือ MKV) Google จะไม่ปล่อยให้มันเป็นแค่ไฟล์ก้อนทื่อๆ แต่เซิร์ฟเวอร์ของ Google จะแอบเอาไฟล์ของคุณไป Transcode (แปลงรหัส) และหั่นเป็นชิ้นๆ แบบ HLS ไว้ให้เรียบร้อย! (เหมือนกับเวลาเราอัปโหลดคลิปขึ้น YouTube เป๊ะเลยครับ)

[!NOTE] นี่คือสาเหตุว่าทำไมอัปโหลดวิดีโอเสร็จใหม่ๆ Google Drive จะขึ้นว่า "กำลังประมวลผล (Processing)" นั่นคือตอนที่มันกำลังอบพิซซ่าและตัดแบ่งชิ้นให้เรานั่นเอง!


3️⃣ UFlix จัดการกับคอขวด (Bottleneck) อย่างไร? 🚀

UFlix Overcoming Bottleneck

แม้ Google Drive จะสร้างระบบสตรีมมิ่งไว้ให้ แต่ถ้าเราไปฝังโค้ด <iframe src="drive.google.com/..."> ตรงๆ ลงเว็บ บางครั้งมันก็ช้า หรือโดนบล็อก CORS (ข้อจำกัดด้านความปลอดภัยของเบราว์เซอร์)

สิ่งที่ UFlix ทำเบื้องหลังคือ:

  1. Direct API Access: UFlix ไม่ได้ใช้ iframe ธรรมดา แต่เราใช้ Google Drive API เจาะเข้าไปดึง Token การเข้าถึงโดยตรง
  2. Smart HLS Player: เราฝังเทคโนโลยี hls.js เข้าไปในตัวเล่นของ UFlix เมื่อดึงไฟล์จาก Drive มา ระบบของเราจะประกอบชิ้นส่วนวิดีโอแบบเรียลไทม์ ทำให้เล่นได้ลื่นไหลเหมือน Netflix
  3. Bypassing Limits: สำหรับเซิร์ฟเวอร์ที่จำกัดแบนด์วิดท์ UFlix มีระบบ Proxy Routing ที่ช่วยทำหน้าที่เป็นสะพานเชื่อม ส่งมอบวิดีโอเข้าหน้าจอคุณโดยไม่เกิดคอขวด

และทั้งหมดนี้ ทำงานอยู่บนเบราว์เซอร์ของคุณ โดยไม่ต้องใช้เซิร์ฟเวอร์ราคาแพงเลยสักบาทเดียว! 😎