ข้ามไปเนื้อหาหลัก
cloudmania.devCloudmania
คอนเทนเนอร์· ~25 นาที

FFmpeg + HLS 101 — แปลงวิดีโอด้วยมือก่อน

เข้าใจว่า HLS คืออะไร แปลงไฟล์เองด้วย FFmpeg แล้วเปิดเล่นในเบราว์เซอร์

พื้นฐานที่ควรรู้: ก่อนเอาอะไรขึ้น K8s ต้องเข้าใจงานที่ระบบทำก่อน — บทนี้เราจะแปลงวิดีโอด้วยมือทั้งหมดบนเครื่องตัวเอง ให้เห็นกับตาว่า "transcode เป็น HLS" ผลลัพธ์หน้าตาเป็นยังไง เพราะนี่คืองานที่เดี๋ยว K8s Job จะทำแทนเราแบบอัตโนมัติ

ซีรีส์แบ่งตอน

HLS เหมือนซีรีส์ที่หั่นเป็นตอนสั้น ๆ — แทนที่จะโหลดหนังทั้งเรื่อง 2 GB มาก่อนถึงจะดูได้ ผู้ชมโหลดทีละตอน (segment 4 วินาที) ดูไปโหลดไป · ไฟล์ .m3u8 คือหน้าสารบัญที่บอกว่าตอนไหนอยู่ URL ไหน — เพราะทุกอย่างเป็นไฟล์ + HTTP ธรรมดา เลยเสิร์ฟผ่าน web server หรือ CDN อะไรก็ได้

สร้างวิดีโอทดสอบ (ไม่ต้องหาไฟล์จากไหน)

cd ~/projects/k8s-video-pipeline

# วิดีโอลายทดสอบ + เสียง sine 440Hz ยาว 30 วิ ขนาด 1280x720
ffmpeg -f lavfi -i testsrc=duration=30:size=1280x720:rate=30 \
       -f lavfi -i sine=frequency=440:duration=30 \
       -c:v libx264 -c:a aac -pix_fmt yuv420p sample.mp4

ls -lh sample.mp4   # ได้ไฟล์ราว 1-2 MB
💻 ให้ FFmpeg สร้างวิดีโอทดสอบ 30 วินาทีให้เราเลย

แปลงเป็น HLS

mkdir -p out
ffmpeg -i sample.mp4 \
  -c:v libx264 -preset veryfast -b:v 2500k -vf "scale=-2:720" \
  -c:a aac -b:a 128k \
  -f hls -hls_time 4 -hls_playlist_type vod \
  -hls_segment_filename "out/seg_%03d.ts" \
  out/index.m3u8

ls out/   # จะเห็น index.m3u8 + seg_000.ts, seg_001.ts, ...
cat out/index.m3u8
💻 คำสั่งหัวใจของทั้ง workshop — จำโครงนี้ไว้ เดี๋ยวเอาไปใส่ใน Job
  • -c:v libx264 -b:v 2500k — เข้ารหัสวิดีโอเป็น H.264 ที่ bitrate 2.5 Mbps
  • -vf "scale=-2:720" — ย่อความสูงเป็น 720px (ความกว้างคำนวณอัตโนมัติ ให้หารด้วย 2 ลงตัว)
  • -hls_time 4 — หั่น segment ละ ~4 วินาที · -hls_playlist_type vod — บอกว่าเป็นวิดีโอจบแล้ว ไม่ใช่ live
  • index.m3u8 — playlist สารบัญ ชี้ไปยัง segment ทุกชิ้นตามลำดับ

เปิดเล่นในเบราว์เซอร์

สร้างไฟล์ player.html ไว้ที่ root ของโปรเจกต์ — ใช้ไลบรารี hls.js (เบราว์เซอร์ทั่วไปเล่น HLS ตรง ๆ ไม่ได้ ยกเว้น Safari ที่เล่นได้ในตัว):

<!doctype html>
<meta charset="utf-8">
<title>ทดสอบเล่น HLS</title>
<video id="player" controls width="720"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
<script>
  const video = document.getElementById('player')
  const src = 'out/index.m3u8'
  if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = src            // Safari เล่น HLS ได้ในตัว
  } else if (Hls.isSupported()) {
    const hls = new Hls()      // Chrome/Firefox ใช้ hls.js
    hls.loadSource(src)
    hls.attachMedia(video)
  }
</script>
📄 player.html
python3 -m http.server 8000
# เปิดเบราว์เซอร์ → http://localhost:8000/player.html
# กด play — ถ้าเห็นลายทดสอบวิ่ง + มีเสียง = สำเร็จ!
💻 เสิร์ฟไฟล์ผ่าน HTTP แล้วเปิดดู (เปิดไฟล์ตรง ๆ ไม่ได้ เพราะ hls.js ต้อง fetch ผ่าน HTTP)

สรุป Key Takeaways

  • HLS = playlist .m3u8 + segments .ts — เป็นไฟล์ธรรมดา เสิร์ฟผ่าน HTTP อะไรก็ได้
  • คำสั่ง ffmpeg แปลง mp4 → HLS คืองานหลักที่เดี๋ยว K8s Job จะรันแทนเรา
  • เบราว์เซอร์ทั่วไปต้องใช้ hls.js เล่น HLS (Safari เล่นได้ในตัว)
อ่านจบแล้วอย่าลืมทำเครื่องหมาย
ก่อนหน้าภาพรวมโปรเจกต์ + เตรียมเครื่องมือถัดไปสร้าง Upload API ด้วย Node.js + Docker