บีบอัดวิดีโอสำหรับเว็บไซต์

WebM ก่อน MP4 เป็นตัวสำรอง

วิดีโอบนหน้าเว็บเป็นส่วนหนึ่งของน้ำหนักหน้า ไฟล์ที่เล็กกว่าจึงโหลดเร็วกว่า VP9 ใน WebM ได้ไฟล์เล็กกว่า H.264 ที่คุณภาพเท่ากัน เว็บไซต์ Can I use ระบุว่า WebM รองรับเต็มรูปแบบใน Chrome, Edge และ Firefox ใน Safari 16 ขึ้นไปบน macOS และใน Safari บน iOS 17.4 ขึ้นไป (caniuse ตรวจสอบเมื่อกันยายน 2026)

สำหรับ Safari รุ่นเก่า ให้เพิ่ม MP4 โดยบีบอัดไฟล์ต้นทางเดิมอีกครั้งด้วย “รูปแบบไฟล์” เป็น MP4 แล้วใส่ทั้งสองไฟล์ในอิลิเมนต์ `<video>` โดยให้ WebM อยู่ก่อน เบราว์เซอร์จะไล่ดูอิลิเมนต์ `<source>` และใช้ไฟล์แรกที่เล่นได้ เมื่อมีแอตทริบิวต์ `type` เบราว์เซอร์จะข้ามไฟล์ที่ไม่รองรับโดยไม่ดาวน์โหลด (MDN)

720p คือ 1280 × 720 สำหรับวิดีโอแนวนอน หากเครื่องเล่นบนหน้าเว็บกว้างกว่า 1280 พิกเซล ให้เลือก 1080p ใน “ขนาดหน้าจอ” แทน

วิดีโอพื้นหลังแบบวนซ้ำและเสียง

Chrome อนุญาตให้เล่นอัตโนมัติแบบปิดเสียงเสมอ (Chrome for Developers) บน iOS `<video autoplay>` จะเล่นโดยไม่ต้องแตะหากปิดเสียงหรือไม่มีแทร็กเสียง และต้องมี `playsinline` จึงจะเล่นในหน้าบน iPhone ได้ (WebKit) วิดีโอพื้นหลังแบบวนซ้ำไม่มีใครได้ยินเสียง จึงตั้ง “เสียง” เป็น “ลบเสียง” ในส่วน “ขั้นสูง” แล้วไฟล์จะไม่มีแทร็กเสียงเลย

สำหรับวิดีโอที่คนเปิดดูพร้อมเสียง ให้คงเสียงไว้ WebM เก็บเสียงได้เฉพาะ Opus หรือ Vorbis “คงเดิม” จึงคัดลอกแทร็กได้เฉพาะเมื่อไฟล์ต้นทางเป็น Opus หรือ Vorbis อยู่แล้ว ส่วนแบบอื่นจะถูกแปลงเป็น Opus เสียงที่มีมากกว่า 2 ช่องสัญญาณจะถูกมิกซ์ลงเป็นสเตอริโอ

บนหน้าเว็บ

ใช้ `preload="metadata"` หรือ `preload="none"` เพื่อไม่ให้เบราว์เซอร์ดึงไฟล์ทั้งหมดตั้งแต่แรก และใช้ภาพ `poster` แสดงจนกว่าวิดีโอจะเริ่ม (MDN) คลิปพื้นหลังต้องมี `muted playsinline autoplay loop`

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

คำถามที่พบบ่อย