Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cài đặt ffmpeg chuyển đổi video sang MP4 và OGG cho HTML5


Tại sao cần chuyển đổi?

HTML5 <video> cần nhiều định dạng để tương thích cross-browser:

  • MP4 (H.264/AAC): Chrome, Firefox, Safari, Edge, iOS, Android
  • WebM (VP8/VP9 + Vorbis/Opus): Chrome, Firefox, Edge, Android
  • OGG (Theora + Vorbis): Firefox, Chrome, Opera (legacy)

Lưu ý: OGG/Theora đã lỗi thời, hiện nay nên dùng WebM thay thế. Bài này giữ lại OGG cho hệ thống cũ.

Chuyển đổi sang MP4 (H.264 + AAC) - Tương thích rộng nhất

Cơ bản (tương thích IE11+)

ffmpeg -i input.mov -c:v libx264 -c:a aac -strict -2 output.mp4

Tối ưu tương thích tối đa (baseline profile, yuv420p)

ffmpeg -i input.mov \
  -an \                              # Bỏ audio (nếu chỉ cần video)
  -c:v libx264 \
  -pix_fmt yuv420p \                 # Quan trọng: Safari/iOS cần yuv420p
  -profile:v baseline \              # Baseline profile cho thiết bị cũ
  -level 3.0 \                       # Level 3.0 tương thích rộng
  -movflags +faststart \             # Cho phép streaming (moov atom ở đầu)
  output_max_compat.mp4

Có audio, chất lượng cao (CRF 23 - mặc định)

ffmpeg -i input.mov \
  -c:v libx264 -crf 23 -preset medium \
  -c:a aac -b:a 128k \
  -pix_fmt yuv420p \
  -movflags +faststart \
  output_high_quality.mp4

Chuyển đổi sang WebM (VP9 + Opus) - Hiện đại, hiệu quả cao

# VP9 (chất lượng tốt hơn VP8, file nhỏ hơn)
ffmpeg -i input.mov \
  -c:v libvpx-vp9 -crf 30 -b:v 0 \
  -c:a libopus -b:a 128k \
  output.webm

# VP8 (tương thích cũ hơn)
ffmpeg -i input.mov \
  -c:v libvpx -crf 10 -b:v 1M \
  -c:a libvorbis -b:a 128k \
  output_vp8.webm

Chuyển đổi sang OGG (Theora + Vorbis) - Legacy

Cần cài ffmpeg2theora hoặc dùng ffmpeg trực tiếp:

# Cách 1: Dùng ffmpeg2theora (đơn giản)
ffmpeg2theora -o output.ogv input.mp4

# Cách 2: Dùng ffmpeg trực tiếp
ffmpeg -i input.mp4 \
  -c:v libtheora -q:v 7 \
  -c:a libvorbis -q:a 4 \
  output.ogv

Script batch chuyển đổi tự động (Linux/macOS)

#!/bin/bash
# convert_video.sh - Chuyển đổi tất cả video trong thư mục hiện tại

INPUT_DIR="."
OUTPUT_DIR="./converted"
mkdir -p "$OUTPUT_DIR"

for file in "$INPUT_DIR"/*.{mov,avi,mkv,flv,wmv,m4v,mpg,mpeg}; do
  [ -f "$file" ] || continue
  
  filename=$(basename -- "$file")
  name="${filename%.*}"
  
  echo "Đang xử lý: $filename"
  
  # MP4 (H.264)
  ffmpeg -i "$file" \
    -c:v libx264 -crf 23 -preset medium \
    -c:a aac -b:a 128k \
    -pix_fmt yuv420p -movflags +faststart \
    "$OUTPUT_DIR/${name}.mp4"
  
  # WebM (VP9)
  ffmpeg -i "$file" \
    -c:v libvpx-vp9 -crf 30 -b:v 0 \
    -c:a libopus -b:a 128k \
    "$OUTPUT_DIR/${name}.webm"
  
  # OGG (Theora) - optional
  # ffmpeg -i "$file" -c:v libtheora -q:v 7 -c:a libvorbis -q:a 4 "$OUTPUT_DIR/${name}.ogv"
  
  echo "Hoàn thành: $name"
done

echo "Tất cả video đã chuyển đổi xong!"

HTML5 Video Tag chuẩn

<video width="640" height="360" controls preload="metadata" poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogv" type="video/ogg">
  Trình duyệt của bạn không hỗ trợ video HTML5.
</video>

Giải thích tham số quan trọng

Tham sốÝ nghĩa
-crfConstant Rate Factor (0-51, mặc định 23). Càng nhỏ = chất lượng cao, file lớn. 18-28 là khoảng tốt.
-presetTốc độ encode: ultrafast, superfast, veryfast, faster, fast, medium, slow, slower, veryslow. Chậm hơn = nén tốt hơn.
-pix_fmt yuv420pChromat subsampling 4:2:0. Bắt buộc cho Safari/iOS/hardware decoder.
-profile:v baselineH.264 Baseline profile. Tương thích thiết bị cũ, không hỗ trợ B-frames.
-movflags +faststartDi chuyển moov atom lên đầu file → cho phép phát video khi đang tải (progressive streaming).
-b:v 0Với VP9: dùng constant quality mode (CRF) thay vì bitrate cố định.