Chuyển đổi video sang HTML5 OGG/OGV và MP4

Tổng quan định dạng HTML5 Video

Để video chạy trên mọi trình duyệt, cần cung cấp nhiều định dạng. Hiện nay MP4 (H.264) + WebM (VP9) là đủ. OGG/Theora đã lỗi thời nhưng vẫn cần cho hệ thống legacy.

Container	Video Codec	Audio Codec	Hỗ trợ
MP4	H.264 (AVC)	AAC	Tất cả trình duyệt hiện đại
WebM	VP8 / VP9	Vorbis / Opus	Chrome, Firefox, Edge, Opera, Android
OGG/OGV	Theora	Vorbis	Firefox, Chrome, Opera (legacy)

Công cụ chuyển đổi

1. FFmpeg (Command line - Khuyên dùng cho dev/automation)

Xem chi tiết tại bài ffmpeg settings.

2. HandBrake (GUI - Dễ dùng)

Miễn phí, open-source, cross-platform
Preset: "Web" → "Vimeo YouTube HQ 1080p30" hoặc tùy chỉnh
Hỗ trợ batch queue, preview

3. Shutter Encoder (GUI - Nâng cao)

Miễn phí, dựa trên FFmpeg
Hỗ trợ nhiều format chuyên nghiệp (ProRes, DNxHR, v.v.)
Queue, watch folder, after-effects integration

4. Online Converters (Cho file nhỏ, không nhạy cảm)

CloudConvert, Convertio, FreeConvert
Giới hạn kích thước file miễn phí (~1GB)

5. Free HTML5 Video Player And Converter (Theo bài gốc)

Phần mềm Windows có GUI, hỗ trợ batch convert, tích hợp player theme.

Quy trình chuyển đổi thủ công (Free HTML5 Video Converter)

Tải và cài đặt phần mềm
Khởi chạy → "Add Files" → Chọn video nguồn (hỗ trợ: *.avi; *.mp4; *.mov; *.mkv; *.flv; *.wmv; *.webm; *.ogv; *.mts; *.3gp...)
Chọn "Output Location" (nơi lưu file kết quả)
Chọn "Presets" → "HTML5 Video" hoặc tùy chỉnh:
- MP4: H.264 High Profile, Level 4.1, AAC 128kbps
- WebM: VP9, Opus 128kbps
- OGV: Theora, Vorbis
Chọn "Player Theme" (nếu muốn nhúng player)
Click "Convert"

HTML5 Video Tag chuẩn (Best Practice 2024)

<video 
  width="640" height="360" 
  controls 
  preload="metadata"
  poster="poster.jpg"
  playsinline>
  
  <!-- Ưu tiên WebM VP9 (nhỏ nhất, chất lượng tốt) -->
  <source src="video.webm" type="video/webm; codecs=vp9,opus">
  
  <!-- Fallback MP4 H.264 (tương thích mọi nơi) -->
  <source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
  
  <!-- Legacy OGG (tùy chọn) -->
  <source src="video.ogv" type="video/ogg; codecs=theora,vorbis">
  
  <!-- Fallback text -->
  Trình duyệt của bạn không hỗ trợ video HTML5.
  <a href="video.mp4">Tải video</a> để xem.
</video>

Kiểm tra codec trong file video

# ffprobe (kèm ffmpeg)
ffprobe -v error -select_streams v:0 -show_entries stream=codec_name,profile,level -of csv=p=0 video.mp4
ffprobe -v error -select_streams a:0 -show_entries stream=codec_name -of csv=p=0 video.mp4

# MediaInfo (GUI/CLI chi tiết hơn)
mediainfo video.mp4

Tối ưu cho Streaming (Adaptive Bitrate - HLS/DASH)

Nếu cần chất lượng tự thích ứng theo băng thông:

# Tạo HLS segments với ffmpeg
ffmpeg -i input.mp4 \
  -filter_complex "[v:0]split=3[v1][v2][v3];[v1]scale=1920:1080[v1out];[v2]scale=1280:720[v2out];[v3]scale=640:360[v3out]" \
  -map "[v1out]" -c:v:0 libx264 -b:v:0 5M -maxrate:v:0 5.5M -bufsize:v:0 10M \
  -map "[v2out]" -c:v:1 libx264 -b:v:1 2.8M -maxrate:v:1 3M -bufsize:v:1 5.6M \
  -map "[v3out]" -c:v:2 libx264 -b:v:2 1M -maxrate:v:2 1.1M -bufsize:v:2 2M \
  -map a:0 -c:a aac -b:a 128k -ac 2 \
  -f hls -hls_time 6 -hls_playlist_type vod -master_pl_name master.m3u8 \
  -hls_segment_filename "stream_%v/data%03d.ts" stream_%v.m3u8

Lưu ý quan trọng

OGG/Theora đã cũ: Chỉ dùng nếu phải hỗ trợ Firefox < 21 (2013). Hiện nay WebM thay thế hoàn hảo.
License H.264: MP4 H.264 cần license cho encoder/decoder thương mại. VP9/AV1 royalty-free.
Audio: Luôn encode audio stereo (2 kênh) AAC 128kbps+ hoặc Opus 96-128kbps.
Faststart: Luôn dùng -movflags +faststart cho MP4 để cho phép progressive download.
Poster: Luôn cung cấp poster image (keyframe đầu hoặc frame đẹp nhất).