Cách làm tệp video web nhỏ hơn bằng codec AV1 (2025)

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

Sử dụng định dạng video AV1 mới nhất có thể giúp giảm kích thước tệp video trên web xuống nhỏ hơn 20~40 lần YouTube và Netflix đã chọn AV1 làm codec video thế hệ tiếp theo, và các trình duyệt lớn như Chrome, Safari, Firefox đều hỗ trợ Hướng dẫn này giải thích chiến lược mã hóa codec AV1 và các cách tối ưu hóa Tổng quan về codec và container Định dạng ảnh tĩnh: WebP, JPEG, PNG được hầu hết trình duyệt hỗ trợ. Trên các trình duyệt hiện đại có thể dùng AVIF Cấu trúc tệp video: Codec video: H.264, HEVC, VP9, AV1... quyết định chiến lược nén video Codec âm thanh: MP3, Opus, AAC... quyết định chiến lược nén âm thanh Container: Có MP4, MOV, WebM..., dùng để lưu luồng video và âm thanh, phụ đề, metadata Giới thiệu codec AV1 Codec AV1 được phát hành lần đầu vào tháng 3 năm 2018 Có thể tạo tệp nhỏ hơn tới 30~50% so với HEVC/VP9 và H.264/VP8 Ưu điểm: Có thể duy trì chất lượng hình ảnh cao ở bitrate thấp Hầu như không có mất mát do nén Nhược điểm: Tốc độ mã hóa chậm Chỉ được hỗ trợ trên thiết bị mới (iPhone 15+, MacBook M3...) Cần chuẩn bị cả phiên bản AV1 và H.264 để đảm bảo tương thích Cách sử dụng AV1 ngay bây giờ Chọn container và codec Container: MP4 là lựa chọn phổ biến nhất và được khuyến nghị Codec âm thanh: Khuyến nghị dùng Opus (hiệu quả và miễn phí) Chuẩn bị tệp để đạt tương thích tối đa Cho desktop và trình duyệt di động mới (Chrome, Safari, Firefox, Edge...) Container MP4 + codec video AV1 + codec âm thanh Opus Độ phủ người dùng: khoảng 74% (tính đến tháng 9/2023) Cho Safari và macOS đời cũ Container MP4 + codec video H.264 + codec âm thanh AAC Độ phủ người dùng: khoảng 19% Để tăng hỗ trợ cho iPhone và Mac đời cũ (tùy chọn) Container MP4 + codec video HEVC + codec âm thanh AAC Cách tạo tệp video AV1 1. Cài đặt FFmpeg Mac: brew install ffmpeg Linux: cài FFmpeg từ bản phân phối của bạn Windows: tham khảo hướng dẫn cài đặt 2. Tạo tệp H.264 (để hỗ trợ thiết bị cũ) 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. Tạo tệp AV1 (để hỗ trợ thiết bị mới) 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 Có thể điều chỉnh giá trị crf hoặc qp để cân bằng giữa chất lượng và kích thước tệp 4. Tạo tệp HEVC (khi cần) Mã hóa HEVC để hỗ trợ iPhone và Mac cũ hơn 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 Giải thích các tùy chọn chính của FFmpeg -i SOURCE.mov: thiết lập tệp đầu vào gốc -map_metadata -1: loại bỏ metadata không cần thiết -c:a libopus: chọn codec âm thanh (Opus) -c:v libsvtav1: chọn codec video (AV1) -crf 34, -qp 30: điều chỉnh chất lượng và kích thước tệp (giá trị càng thấp thì chất lượng càng tốt và kích thước càng lớn) -preset veryslow: thiết lập tốc độ mã hóa để tạo tệp chất lượng cao -pix_fmt yuv420p: giảm dữ liệu màu để giảm kích thước tệp -movflags +faststart: rút ngắn thời gian bắt đầu phát trực tuyến -tile-columns 2 -tile-rows 2: tăng tốc độ mã hóa Thiết lập tương thích trình duyệt Dùng AV1 trên trình duyệt hiện đại, và thay thế bằng H.264 trên trình duyệt cũ <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> Có thể thêm tệp HEVC để hỗ trợ iPhone và Mac cũ <source src="video.hevc.mp4" type="video/mp4; codecs=hvc1"> Chuyển GIF sang AV1 hoặc H.264 GIF lớn hơn 20~40 lần so với H.264 và AV1, đồng thời tiêu tốn nhiều CPU và điện năng hơn → nên chuyển đổi Chuyển 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 Chuyển 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 Ví dụ thay GIF trong 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 điểm bởi xguru 2025-03-14 | 1 bình luận | Chia sẻ qua WhatsApp

Sử dụng định dạng video AV1 mới nhất có thể giúp giảm kích thước tệp video trên web xuống nhỏ hơn 20~40 lần
YouTube và Netflix đã chọn AV1 làm codec video thế hệ tiếp theo, và các trình duyệt lớn như Chrome, Safari, Firefox đều hỗ trợ
Hướng dẫn này giải thích chiến lược mã hóa codec AV1 và các cách tối ưu hóa

Tổng quan về codec và container

Định dạng ảnh tĩnh: WebP, JPEG, PNG được hầu hết trình duyệt hỗ trợ. Trên các trình duyệt hiện đại có thể dùng AVIF
Cấu trúc tệp video:
- Codec video: H.264, HEVC, VP9, AV1... quyết định chiến lược nén video
- Codec âm thanh: MP3, Opus, AAC... quyết định chiến lược nén âm thanh
- Container: Có MP4, MOV, WebM..., dùng để lưu luồng video và âm thanh, phụ đề, metadata

Giới thiệu codec AV1

Codec AV1 được phát hành lần đầu vào tháng 3 năm 2018
Có thể tạo tệp nhỏ hơn tới 30~50% so với HEVC/VP9 và H.264/VP8
Ưu điểm:
- Có thể duy trì chất lượng hình ảnh cao ở bitrate thấp
- Hầu như không có mất mát do nén
Nhược điểm:
- Tốc độ mã hóa chậm
- Chỉ được hỗ trợ trên thiết bị mới (iPhone 15+, MacBook M3...)
- Cần chuẩn bị cả phiên bản AV1 và H.264 để đảm bảo tương thích

Cách sử dụng AV1 ngay bây giờ

Chọn container và codec
- Container: MP4 là lựa chọn phổ biến nhất và được khuyến nghị
- Codec âm thanh: Khuyến nghị dùng Opus (hiệu quả và miễn phí)
Chuẩn bị tệp để đạt tương thích tối đa
- Cho desktop và trình duyệt di động mới (Chrome, Safari, Firefox, Edge...)
  - Container MP4 + codec video AV1 + codec âm thanh Opus
  - Độ phủ người dùng: khoảng 74% (tính đến tháng 9/2023)
- Cho Safari và macOS đời cũ
  - Container MP4 + codec video H.264 + codec âm thanh AAC
  - Độ phủ người dùng: khoảng 19%
- Để tăng hỗ trợ cho iPhone và Mac đời cũ (tùy chọn)
  - Container MP4 + codec video HEVC + codec âm thanh AAC

Cách tạo tệp video AV1

1. Cài đặt FFmpeg

Mac: brew install ffmpeg
Linux: cài FFmpeg từ bản phân phối của bạn
Windows: tham khảo hướng dẫn cài đặt

2. Tạo tệp H.264 (để hỗ trợ thiết bị cũ)

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. Tạo tệp AV1 (để hỗ trợ thiết bị mới)

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
Có thể điều chỉnh giá trị crf hoặc qp để cân bằng giữa chất lượng và kích thước tệp

4. Tạo tệp HEVC (khi cần)

Mã hóa HEVC để hỗ trợ iPhone và Mac cũ hơn
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

Giải thích các tùy chọn chính của FFmpeg

-i SOURCE.mov: thiết lập tệp đầu vào gốc
-map_metadata -1: loại bỏ metadata không cần thiết
-c:a libopus: chọn codec âm thanh (Opus)
-c:v libsvtav1: chọn codec video (AV1)
-crf 34, -qp 30: điều chỉnh chất lượng và kích thước tệp (giá trị càng thấp thì chất lượng càng tốt và kích thước càng lớn)
-preset veryslow: thiết lập tốc độ mã hóa để tạo tệp chất lượng cao
-pix_fmt yuv420p: giảm dữ liệu màu để giảm kích thước tệp
-movflags +faststart: rút ngắn thời gian bắt đầu phát trực tuyến
-tile-columns 2 -tile-rows 2: tăng tốc độ mã hóa

Thiết lập tương thích trình duyệt

Dùng AV1 trên trình duyệt hiện đại, và thay thế bằng H.264 trên trình duyệt cũ

&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;

Có thể thêm tệp HEVC để hỗ trợ iPhone và Mac cũ

&lt;source src=&quot;video.hevc.mp4&quot; type=&quot;video/mp4; codecs=hvc1&quot;&gt;

Chuyển GIF sang AV1 hoặc H.264

GIF lớn hơn 20~40 lần so với H.264 và AV1, đồng thời tiêu tốn nhiều CPU và điện năng hơn → nên chuyển đổi
Chuyển 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
Chuyển 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

Ví dụ thay GIF trong 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 bình luận

laeyoung 2025-03-14

Các trang landing page thường dùng video, nên có lẽ cũng đáng để thử một lần. Xem có hoạt động tốt không, hay có phát sinh các trường hợp ngoại lệ khiến không thể dùng được.