视频格式与编解码：从原理到生产选型的完整指南

# 将 moov 前置，实现边下边播
ffmpeg -i input.mp4 -movflags faststart -codec copy output.mp4

# 用 FFmpeg 生成 fMP4
ffmpeg -i input.mp4 \
  -c:v libx264 \
  -c:a aac \
  -movflags frag_keyframe+empty_moov+default_base_moof \
  output.fmp4

// High Profile, Level 4.1 — Web 视频最常用
'video/mp4; codecs="avc1.64002A"'
 
// Baseline Profile, Level 3.1 — 最大兼容性
'video/mp4; codecs="avc1.42E01F"'
 
// Main Profile, Level 4.0
'video/mp4; codecs="avc1.4D0028"'

# FFmpeg 编码 VP9（两遍编码获得最佳质量）
# 第一遍：分析
ffmpeg -i input.mp4 -c:v libvpx-vp9 -b:v 0 -crf 33 -pass 1 -an -f null /dev/null
 
# 第二遍：编码
ffmpeg -i input.mp4 \
  -c:v libvpx-vp9 \
  -b:v 0 -crf 33 \
  -pass 2 \
  -c:a libopus -b:a 128k \
  output.webm

# FFmpeg 编码 AV1（使用 libaom-av1，速度较慢）
ffmpeg -i input.mp4 \
  -c:v libaom-av1 \
  -crf 30 \
  -b:v 0 \
  -cpu-used 4 \    # 0=最慢最优，8=最快最差，4是平衡点
  -c:a libopus -b:a 128k \
  output_av1.webm
 
# 更快的 AV1 编码器：SVT-AV1（Netflix 开源，速度快很多）
ffmpeg -i input.mp4 \
  -c:v libsvtav1 \
  -crf 30 \
  -preset 6 \     # 0=最慢，13=最快
  -c:a libopus -b:a 128k \
  output_svtav1.webm

const video = document.createElement('video');
 
// 返回 'probably' | 'maybe' | ''
const support = {
  h264:  video.canPlayType('video/mp4; codecs="avc1.42E01E"'),
  vp9:   video.canPlayType('video/webm; codecs="vp9, opus"'),
  av1:   video.canPlayType('video/webm; codecs="av01.0.05M.08"'),
  hevc:  video.canPlayType('video/mp4; codecs="hev1.1.6.L93.B0"'),
};
 
console.log(support);
// Chrome: { h264: 'probably', vp9: 'probably', av1: 'probably', hevc: '' }
// Safari: { h264: 'probably', vp9: 'probably', av1: 'probably', hevc: 'probably' }

// 检测 fMP4 格式的 MSE 支持
const mseSupport = {
  h264:  MediaSource.isTypeSupported('video/mp4; codecs="avc1.42E01E"'),
  vp9:   MediaSource.isTypeSupported('video/webm; codecs="vp9"'),
  av1:   MediaSource.isTypeSupported('video/mp4; codecs="av01.0.05M.08"'),
};

async function checkDecodeCapability(config) {
  const result = await navigator.mediaCapabilities.decodingInfo({
    type: 'file',
    video: {
      contentType: 'video/mp4; codecs="avc1.42E01E"',
      width: 1920,
      height: 1080,
      bitrate: 4000000, // 4Mbps
      framerate: 30,
    },
  });
 
  console.log({
    supported:    result.supported,    // 是否支持
    smooth:       result.smooth,       // 是否流畅（不会掉帧）
    powerEfficient: result.powerEfficient, // 是否有硬件加速
  });
}
 
checkDecodeCapability();
// { supported: true, smooth: true, powerEfficient: true }

# ── 生成 Web 最优 MP4（H.264 High Profile + AAC + moov 前置）──
ffmpeg -i input.mp4 \
  -c:v libx264 \
  -profile:v high \     # High Profile
  -level:v 4.1 \        # Level 4.1，支持 1080p@30fps
  -preset slow \        # 编码速度/质量平衡（ultrafast/fast/medium/slow/veryslow）
  -crf 23 \             # 质量因子，18=高质量，28=低质量，23是默认
  -c:a aac \
  -b:a 128k \
  -movflags faststart \ # moov 前置！
  output_h264.mp4
 
# ── 生成 WebM/VP9（双遍编码）──
ffmpeg -i input.mp4 -c:v libvpx-vp9 -b:v 0 -crf 33 -pass 1 -an -f null /dev/null && \
ffmpeg -i input.mp4 \
  -c:v libvpx-vp9 -b:v 0 -crf 33 -pass 2 \
  -c:a libopus -b:a 128k \
  output_vp9.webm
 
# ── 生成 fMP4 分片（用于 MSE/DASH）──
ffmpeg -i input.mp4 \
  -c:v libx264 -profile:v high -level:v 4.1 -crf 23 \
  -c:a aac -b:a 128k \
  -movflags frag_keyframe+empty_moov+default_base_moof \
  -g 48 \               # 关键帧间隔（影响分片大小）
  output.fmp4
 
# ── 批量生成多码率版本（用于自适应码率）──
ffmpeg -i input.mp4 \
  -map 0:v -map 0:a -c:v libx264 -crf 28 -vf scale=640:-2  -c:a aac -b:a 96k  360p.mp4 \
  -map 0:v -map 0:a -c:v libx264 -crf 25 -vf scale=1280:-2 -c:a aac -b:a 128k 720p.mp4 \
  -map 0:v -map 0:a -c:v libx264 -crf 23 -vf scale=1920:-2 -c:a aac -b:a 192k 1080p.mp4

# 查看视频的编解码、分辨率、码率等完整信息
ffprobe -v quiet -print_format json -show_streams input.mp4
 
# 快速查看关键信息
ffprobe -v error -select_streams v:0 \
  -show_entries stream=codec_name,width,height,bit_rate,r_frame_rate \
  -of default=noprint_wrappers=1 input.mp4

// 智能格式选择器
async function getBestVideoSource(sources) {
  // sources = { av1: 'video_av1.webm', vp9: 'video_vp9.webm', h264: 'video.mp4' }
 
  const checks = [
    {
      src: sources.av1,
      type: 'video/webm; codecs="av01.0.05M.08"',
      label: 'AV1',
    },
    {
      src: sources.vp9,
      type: 'video/webm; codecs="vp9, opus"',
      label: 'VP9',
    },
    {
      src: sources.h264,
      type: 'video/mp4; codecs="avc1.64002A"',
      label: 'H.264',
    },
  ];
 
  for (const check of checks) {
    const supported = MediaSource.isTypeSupported(check.type);
    if (!supported) continue;
 
    // 进一步检查是否有硬件加速（可选）
    if (navigator.mediaCapabilities) {
      const info = await navigator.mediaCapabilities.decodingInfo({
        type: 'file',
        video: {
          contentType: check.type,
          width: 1920, height: 1080,
          bitrate: 4000000, framerate: 30,
        },
      });
      if (info.supported) {
        console.log(`选择格式: , 硬件加速: `);
        return check;
      }
    } else {
      return check;
    }
  }
 
  // 最终兜底
  return { src: sources.h264, type: 'video/mp4', label: 'H.264 fallback' };
}
 
// 使用示例
const best = await getBestVideoSource({
  av1:  'https://cdn.example.com/video_av1.webm',
  vp9:  'https://cdn.example.com/video_vp9.webm',
  h264: 'https://cdn.example.com/video.mp4',
});
 
const video = document.querySelector('video');
video.src = best.src;

<video controls preload="metadata" playsinline>
  <!-- AV1：最优压缩，现代浏览器优先选择 -->
  <source src="video_av1.webm"
          type="video/webm; codecs='av01.0.05M.08, opus'" />
  <!-- VP9：次优，广泛支持 -->
  <source src="video_vp9.webm"
          type="video/webm; codecs='vp9, opus'" />
  <!-- H.264：最终兜底，100% 兼容 -->
  <source src="video.mp4"
          type="video/mp4; codecs='avc1.64002A, mp4a.40.2'" />
  <p>您的浏览器不支持 HTML5 视频</p>
</video>