วิธีทำให้ไฟล์วิดีโอบนเว็บเล็กลงด้วยโคเดก AV1 (2025)

xguru · 2025-03-14T09:47:01+09:00

การใช้ฟอร์แมตวิดีโอ AV1 รุ่นใหม่ล่าสุดสามารถลดขนาดไฟล์วิดีโอบนเว็บได้ เล็กลง 20~40 เท่า YouTube และ Netflix ได้นำ AV1 มาใช้เป็นโคเดกวิดีโอรุ่นถัดไป และรองรับโดยเบราว์เซอร์หลักอย่าง Chrome, Safari, Firefox เป็นต้น คู่มือนี้อธิบายกลยุทธ์การเข้ารหัสโคเดก AV1 และวิธีการปรับแต่งให้เหมาะสม ภาพรวมของโคเดกและคอนเทนเนอร์ ฟอร์แมตรูปภาพนิ่ง: WebP, JPEG, PNG รองรับในเบราว์เซอร์ส่วนใหญ่ ส่วนเบราว์เซอร์รุ่นใหม่สามารถใช้ AVIF ได้ โครงสร้างไฟล์วิดีโอ: โคเดกวิดีโอ: H.264, HEVC, VP9, AV1 ฯลฯ ใช้กำหนดกลยุทธ์การบีบอัดวิดีโอ โคเดกเสียง: MP3, Opus, AAC ฯลฯ ใช้กำหนดกลยุทธ์การบีบอัดเสียง คอนเทนเนอร์: เช่น MP4, MOV, WebM ใช้เก็บสตรีมวิดีโอและเสียง คำบรรยาย และเมทาดาทา แนะนำโคเดก AV1 โคเดก AV1 เปิดตัวครั้งแรกในเดือนมีนาคม 2018 สามารถสร้างไฟล์ที่เล็กกว่า HEVC/VP9 และ H.264/VP8 ได้สูงสุด 30~50% ข้อดี: รักษาคุณภาพภาพได้สูงที่บิตเรตต่ำ แทบไม่มีการสูญเสียจากการบีบอัด ข้อเสีย: ความเร็วในการเข้ารหัสช้า รองรับเฉพาะอุปกรณ์รุ่นใหม่ (เช่น iPhone 15+, MacBook M3) จำเป็นต้องเตรียมทั้งเวอร์ชัน AV1 และ H.264 เพื่อความเข้ากันได้ วิธีใช้ AV1 ในตอนนี้ การเลือกคอนเทนเนอร์และโคเดก คอนเทนเนอร์: MP4 เป็นตัวเลือกที่นิยมที่สุดและแนะนำให้ใช้ โคเดกเสียง: แนะนำให้ใช้ Opus (มีประสิทธิภาพและใช้ฟรี) การเตรียมไฟล์เพื่อให้รองรับได้สูงสุด สำหรับเดสก์ท็อปและเบราว์เซอร์มือถือรุ่นใหม่ (Chrome, Safari, Firefox, Edge เป็นต้น) คอนเทนเนอร์ MP4 + โคเดกวิดีโอ AV1 + โคเดกเสียง Opus การครอบคลุมผู้ใช้: ประมาณ 74% (ณ กันยายน 2023) สำหรับ Safari รุ่นเก่าและ macOS รุ่นเก่า คอนเทนเนอร์ MP4 + โคเดกวิดีโอ H.264 + โคเดกเสียง AAC การครอบคลุมผู้ใช้: ประมาณ 19% สำหรับเพิ่มการรองรับ iPhone และ Mac รุ่นเก่า (ทางเลือก) คอนเทนเนอร์ MP4 + โคเดกวิดีโอ HEVC + โคเดกเสียง AAC วิธีสร้างไฟล์วิดีโอ AV1 1. ติดตั้ง FFmpeg Mac: brew install ffmpeg Linux: ติดตั้ง FFmpeg จากดิสทริบิวชันของคุณ Windows: ดูคู่มือติดตั้ง 2. สร้างไฟล์ H.264 (สำหรับรองรับอุปกรณ์รุ่นเก่า) ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4 3. สร้างไฟล์ AV1 (สำหรับรองรับอุปกรณ์รุ่นใหม่) ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libopus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.av1.mp4 สามารถปรับค่า crf หรือ qp เพื่อหาสมดุลระหว่างคุณภาพและขนาดไฟล์ได้ 4. สร้างไฟล์ HEVC (หากจำเป็น) เข้ารหัส HEVC เพื่อรองรับ iPhone และ Mac รุ่นเก่า ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx265 -crf 24 -preset veryslow -pix_fmt yuv420p -movflags +faststart -tag:v hvc1 -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.hevc.mp4 คำอธิบายออปชันหลักของ FFmpeg -i SOURCE.mov: กำหนดไฟล์ต้นฉบับเป็นอินพุต -map_metadata -1: ลบเมทาดาทาที่ไม่จำเป็น -c:a libopus: เลือกโคเดกเสียง (Opus) -c:v libsvtav1: เลือกโคเดกวิดีโอ (AV1) -crf 34, -qp 30: ปรับคุณภาพและขนาดไฟล์ (ยิ่งค่าน้อย คุณภาพยิ่งดีและไฟล์ยิ่งใหญ่ขึ้น) -preset veryslow: กำหนดความเร็วการเข้ารหัสเพื่อสร้างไฟล์คุณภาพสูง -pix_fmt yuv420p: ลดข้อมูลสีเพื่อลดขนาดไฟล์ -movflags +faststart: ลดเวลาการเริ่มสตรีม -tile-columns 2 -tile-rows 2: เพิ่มความเร็วในการเข้ารหัส การตั้งค่าความเข้ากันได้ของเบราว์เซอร์ ใช้ AV1 บนเบราว์เซอร์รุ่นใหม่ และสลับเป็น H.264 บนเบราว์เซอร์รุ่นเก่า <video controls width="600" height="400"> <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08,opus"> <source src="video.h264.mp4" type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"> </video> หากต้องการรองรับ iPhone และ Mac รุ่นเก่า สามารถเพิ่มไฟล์ HEVC ได้ <source src="video.hevc.mp4" type="video/mp4; codecs=hvc1"> แปลง GIF เป็น AV1 หรือ H.264 GIF มีขนาดใหญ่กว่า H.264 และ AV1 ถึง 20~40 เท่า และใช้ CPU กับพลังงานมากกว่า → แนะนำให้แปลง แปลง GIF → H.264 ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.h264.mp4 แปลง GIF → AV1 ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:a opus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.av1.mp4 ตัวอย่างการแทน GIF ใน HTML <video autoplay loop muted playsinline width="600" height="400"> <source src="animation.av1.mp4" type="video/mp4; codecs=av01.0.05M.08"> <source src="animation.h264.mp4" type="video/mp4"> </video>

(evilmartians.com)

28 คะแนน โดย xguru 2025-03-14 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

การใช้ฟอร์แมตวิดีโอ AV1 รุ่นใหม่ล่าสุดสามารถลดขนาดไฟล์วิดีโอบนเว็บได้ เล็กลง 20~40 เท่า
YouTube และ Netflix ได้นำ AV1 มาใช้เป็นโคเดกวิดีโอรุ่นถัดไป และรองรับโดยเบราว์เซอร์หลักอย่าง Chrome, Safari, Firefox เป็นต้น
คู่มือนี้อธิบายกลยุทธ์การเข้ารหัสโคเดก AV1 และวิธีการปรับแต่งให้เหมาะสม

ภาพรวมของโคเดกและคอนเทนเนอร์

ฟอร์แมตรูปภาพนิ่ง: WebP, JPEG, PNG รองรับในเบราว์เซอร์ส่วนใหญ่ ส่วนเบราว์เซอร์รุ่นใหม่สามารถใช้ AVIF ได้
โครงสร้างไฟล์วิดีโอ:
- โคเดกวิดีโอ: H.264, HEVC, VP9, AV1 ฯลฯ ใช้กำหนดกลยุทธ์การบีบอัดวิดีโอ
- โคเดกเสียง: MP3, Opus, AAC ฯลฯ ใช้กำหนดกลยุทธ์การบีบอัดเสียง
- คอนเทนเนอร์: เช่น MP4, MOV, WebM ใช้เก็บสตรีมวิดีโอและเสียง คำบรรยาย และเมทาดาทา

แนะนำโคเดก AV1

โคเดก AV1 เปิดตัวครั้งแรกในเดือนมีนาคม 2018
สามารถสร้างไฟล์ที่เล็กกว่า HEVC/VP9 และ H.264/VP8 ได้สูงสุด 30~50%
ข้อดี:
- รักษาคุณภาพภาพได้สูงที่บิตเรตต่ำ
- แทบไม่มีการสูญเสียจากการบีบอัด
ข้อเสีย:
- ความเร็วในการเข้ารหัสช้า
- รองรับเฉพาะอุปกรณ์รุ่นใหม่ (เช่น iPhone 15+, MacBook M3)
- จำเป็นต้องเตรียมทั้งเวอร์ชัน AV1 และ H.264 เพื่อความเข้ากันได้

วิธีใช้ AV1 ในตอนนี้

การเลือกคอนเทนเนอร์และโคเดก
- คอนเทนเนอร์: MP4 เป็นตัวเลือกที่นิยมที่สุดและแนะนำให้ใช้
- โคเดกเสียง: แนะนำให้ใช้ Opus (มีประสิทธิภาพและใช้ฟรี)
การเตรียมไฟล์เพื่อให้รองรับได้สูงสุด
- สำหรับเดสก์ท็อปและเบราว์เซอร์มือถือรุ่นใหม่ (Chrome, Safari, Firefox, Edge เป็นต้น)
  - คอนเทนเนอร์ MP4 + โคเดกวิดีโอ AV1 + โคเดกเสียง Opus
  - การครอบคลุมผู้ใช้: ประมาณ 74% (ณ กันยายน 2023)
- สำหรับ Safari รุ่นเก่าและ macOS รุ่นเก่า
  - คอนเทนเนอร์ MP4 + โคเดกวิดีโอ H.264 + โคเดกเสียง AAC
  - การครอบคลุมผู้ใช้: ประมาณ 19%
- สำหรับเพิ่มการรองรับ iPhone และ Mac รุ่นเก่า (ทางเลือก)
  - คอนเทนเนอร์ MP4 + โคเดกวิดีโอ HEVC + โคเดกเสียง AAC

วิธีสร้างไฟล์วิดีโอ AV1

1. ติดตั้ง FFmpeg

Mac: brew install ffmpeg
Linux: ติดตั้ง FFmpeg จากดิสทริบิวชันของคุณ
Windows: ดูคู่มือติดตั้ง

2. สร้างไฟล์ H.264 (สำหรับรองรับอุปกรณ์รุ่นเก่า)

ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4

3. สร้างไฟล์ AV1 (สำหรับรองรับอุปกรณ์รุ่นใหม่)

ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libopus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.av1.mp4
สามารถปรับค่า crf หรือ qp เพื่อหาสมดุลระหว่างคุณภาพและขนาดไฟล์ได้

4. สร้างไฟล์ HEVC (หากจำเป็น)

เข้ารหัส HEVC เพื่อรองรับ iPhone และ Mac รุ่นเก่า
ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx265 -crf 24 -preset veryslow -pix_fmt yuv420p -movflags +faststart -tag:v hvc1 -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.hevc.mp4

คำอธิบายออปชันหลักของ FFmpeg

-i SOURCE.mov: กำหนดไฟล์ต้นฉบับเป็นอินพุต
-map_metadata -1: ลบเมทาดาทาที่ไม่จำเป็น
-c:a libopus: เลือกโคเดกเสียง (Opus)
-c:v libsvtav1: เลือกโคเดกวิดีโอ (AV1)
-crf 34, -qp 30: ปรับคุณภาพและขนาดไฟล์ (ยิ่งค่าน้อย คุณภาพยิ่งดีและไฟล์ยิ่งใหญ่ขึ้น)
-preset veryslow: กำหนดความเร็วการเข้ารหัสเพื่อสร้างไฟล์คุณภาพสูง
-pix_fmt yuv420p: ลดข้อมูลสีเพื่อลดขนาดไฟล์
-movflags +faststart: ลดเวลาการเริ่มสตรีม
-tile-columns 2 -tile-rows 2: เพิ่มความเร็วในการเข้ารหัส

การตั้งค่าความเข้ากันได้ของเบราว์เซอร์

ใช้ AV1 บนเบราว์เซอร์รุ่นใหม่ และสลับเป็น H.264 บนเบราว์เซอร์รุ่นเก่า

&lt;video controls width=&quot;600&quot; height=&quot;400&quot;&gt;  
  &lt;source src=&quot;video.av1.mp4&quot; type=&quot;video/mp4; codecs=av01.0.05M.08,opus&quot;&gt;  
  &lt;source src=&quot;video.h264.mp4&quot; type=&quot;video/mp4; codecs=avc1.4D401E,mp4a.40.2&quot;&gt;  
&lt;/video&gt;

หากต้องการรองรับ iPhone และ Mac รุ่นเก่า สามารถเพิ่มไฟล์ HEVC ได้
```
&lt;source src=&quot;video.hevc.mp4&quot; type=&quot;video/mp4; codecs=hvc1&quot;&gt;  
```

แปลง GIF เป็น AV1 หรือ H.264

GIF มีขนาดใหญ่กว่า H.264 และ AV1 ถึง 20~40 เท่า และใช้ CPU กับพลังงานมากกว่า → แนะนำให้แปลง
แปลง GIF → H.264
- ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.h264.mp4
แปลง GIF → AV1
- ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:a opus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.av1.mp4

ตัวอย่างการแทน GIF ใน HTML

&lt;video autoplay loop muted playsinline width=&quot;600&quot; height=&quot;400&quot;&gt;  
  &lt;source src=&quot;animation.av1.mp4&quot; type=&quot;video/mp4; codecs=av01.0.05M.08&quot;&gt;  
  &lt;source src=&quot;animation.h264.mp4&quot; type=&quot;video/mp4&quot;&gt;  
&lt;/video&gt;

1 ความคิดเห็น

laeyoung 2025-03-14

ในหน้า Landing page มักมีการใช้วิดีโอกันบ่อย ลองเอาไปใช้ดูก็น่าสนใจนะ ว่าใช้งานได้ดีไหม หรือมีเคสยกเว้นจนใช้ไม่ได้หรือเปล่า