多媒体文件完全指南：格式、在线预览与性能优化

多媒体文件
├── 图片类
│   ├── 位图: JPEG, PNG, GIF, WebP, AVIF, BMP, TIFF
│   └── 矢量图: SVG
├── 音频类
│   ├── 有损压缩: MP3, AAC, OGG, Opus
│   └── 无损压缩: WAV, FLAC, ALAC
├── 视频类
│   ├── 常见容器: MP4, WebM, MOV, AVI, MKV
│   └── 流媒体: HLS, DASH
├── 文档类
│   ├── PDF
│   └── Office: Word, Excel, PowerPoint
└── 三维模型类
    └── GLTF/GLB, OBJ, FBX, STL, USDZ

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">
</picture>

JPEG 质量设置:
├── 缩略图: 60-70%  (文件小，质量可接受)
├── 普通图: 75-85%  (质量与体积平衡)
├── 高质量: 90-95%  (细节重要的场景)
└── 渐进式: 开启    (提升加载体验)

WebP 质量设置:
├── 缩略图: 65-75%
├── 普通图: 80-90%
└── 无损模式: 适合图标、截图

<!-- srcset 方案 -->
<img srcset="small.jpg 400w,
             medium.jpg 800w,
             large.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
     src="medium.jpg"
     alt="响应式图片">

<!-- picture 元素方案 -->
<picture>
  <source media="(min-width: 1200px)" srcset="large.webp">
  <source media="(min-width: 600px)" srcset="medium.webp">
  <source srcset="small.webp">
  <img src="fallback.jpg" alt="响应式图片">
</picture>

<!-- 原生懒加载 -->
<img src="image.jpg" loading="lazy" alt="懒加载图片">

<!-- 占位符方案 -->
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23f0f0f0' width='400' height='300'/%3E%3C/svg%3E"
     data-src="image.jpg"
     class="lazyload"
     alt="懒加载图片">

# ImageMagick 批量处理
convert input.jpg -resize 1200x800\> -quality 85 -strip output.webp

# 生成多尺寸响应式图片
convert input.jpg -resize 400x\> small.webp
convert input.jpg -resize 800x\> medium.webp
convert input.jpg -resize 1200x\> large.webp

# PNG 压缩
pngquant --quality=65-80 input.png -o output.png
optipng -o7 input.png

# 批量 WebP 转换
find . -name "*.jpg" -exec cwebp -q 85 {} -o {}.webp \;

# AAC 编码
ffmpeg -i input.wav -c:a aac -b:a 128k -ar 44100 output.m4a

# MP3 编码
ffmpeg -i input.wav -c:a libmp3lame -b:a 192k -q:a 2 output.mp3

# Opus 编码（实时通信）
ffmpeg -i input.wav -c:a libopus -b:a 64k output.opus

<audio controls preload="metadata">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持音频播放
</audio>

视频文件 = 容器 + 视频编码 + 音频编码

常见容器: MP4, WebM, MOV, MKV, AVI
常见视频编码: H.264, H.265, VP9, AV1
常见音频编码: AAC, MP3, Opus, AC3

# 通用 Web 视频（兼容性优先）
ffmpeg -i input.mp4 \
  -c:v libx264 -profile:v high -level 4.0 \
  -b:v 4M -maxrate 5M -bufsize 8M \
  -c:a aac -b:a 128k \
  -movflags +faststart \
  output.mp4

# 参数说明:
# -profile:v high  : 使用 High Profile
# -level 4.0       : 兼容 1080p
# -b:v 4M          : 目标码率 4Mbps
# -maxrate 5M      : 最大码率 5Mbps
# -bufsize 8M      : 缓冲区大小
# -movflags +faststart : 元数据前置，快速开始播放

# 高压缩率编码
ffmpeg -i input.mp4 \
  -c:v libx265 -crf 28 \
  -c:a aac -b:a 128k \
  output_hevc.mp4

# 生成视频缩略图
ffmpeg -i input.mp4 -ss 00:00:01 -vframes 1 -q:v 2 thumbnail.jpg

HLS 结构:
├── master.m3u8 (主播放列表)
├── playlist_240p.m3u8
├── playlist_360p.m3u8
├── playlist_720p.m3u8
└── segment_*.ts (视频分片)

ffmpeg -i input.mp4 \
  -filter_complex "[v:0]split=3[v1][v2][v3]" \
  -map "[v1]" -b:v:0 800k -s:v:0 640x360 \
  -map "[v2]" -b:v:1 2000k -s:v:1 1280x720 \
  -map "[v3]" -b:v:2 4000k -s:v:2 1920x1080 \
  -c:a aac -b:a 128k \
  -f hls -hls_time 6 -hls_list_size 0 \
  -master_pl_name master.m3u8 \
  -var_stream_map "v:0,a:0 v:1,a:0 v:2,a:0" \
  stream_%v.m3u8

<!-- 基础视频播放 -->
<video controls width="800" poster="thumbnail.jpg" preload="metadata">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持视频播放
</video>

<!-- HLS 播放（需要 HLS.js） -->
<video id="video" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  if (Hls.isSupported()) {
    const video = document.getElementById('video');
    const hls = new Hls();
    hls.loadSource('https://example.com/video/master.m3u8');
    hls.attachMedia(video);
  }
</script>

1. 编码优化
   ├── 使用 H.264 High Profile
   ├── 合理设置 GOP 大小（2-4秒）
   ├── 启用 B 帧提高压缩率
   └── 使用 two-pass 编码

2. 传输优化
   ├── 采用 HLS/DASH 自适应流
   ├── CDN 加速分发
   ├── 开启 HTTP/2 或 HTTP/3
   └── 启用 Gzip/Brotli 压缩

3. 播放优化
   ├── 设置 poster 封面图
   ├── preload="metadata" 按需加载
   ├── 懒加载视频元素
   └── 使用 video.js 等播放器库

4. 体验优化
   ├── 自动播放（静音）
   ├── 播放速度控制
   ├── 画中画模式
   └── 字幕支持

<canvas id="pdf-canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
  const url = 'document.pdf';
  const canvas = document.getElementById('pdf-canvas');
  const ctx = canvas.getContext('2d');

  pdfjsLib.getDocument(url).promise.then(pdf => {
    pdf.getPage(1).then(page => {
      const viewport = page.getViewport({ scale: 1.5 });
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      page.render({ canvasContext: ctx, viewport: viewport });
    });
  });
</script>

# Ghostscript PDF 压缩
gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 \
   -dPDFSETTINGS=/ebook \
   -dNOPAUSE -dQUIET -dBATCH \
   -sOutputFile=compressed.pdf input.pdf

# PDFSETTINGS 选项:
# /screen   - 72dpi, 最小文件
# /ebook    - 150dpi, 中等质量
# /printer  - 300dpi, 打印质量
# /prepress - 300dpi, 最高质量

# 转 PDF
libreoffice --headless --convert-to pdf document.docx

# 转 HTML
libreoffice --headless --convert-to html document.docx

// Excel 预览 (SheetJS)
import * as XLSX from 'xlsx';

async function previewExcel(file) {
  const data = await file.arrayBuffer();
  const workbook = XLSX.read(data);
  const sheet = workbook.Sheets[workbook.SheetNames[0]];
  const html = XLSX.utils.sheet_to_html(sheet);
  document.getElementById('preview').innerHTML = html;
}

// Word 预览 (docx-preview)
import { renderAsync } from 'docx-preview';

async function previewWord(file) {
  const data = await file.arrayBuffer();
  await renderAsync(data, document.getElementById('preview'));
}

model.gltf/
├── model.gltf (JSON 描述)
├── textures/
│   ├── diffuse.png
│   └── normal.png
└── model.bin (几何数据)

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 场景初始化
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.getElementById('container').appendChild(renderer.domElement);

// 控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 加载器
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
loader.setDRACOLoader(dracoLoader);

// 加载模型
loader.load('model.glb', (gltf) => {
  scene.add(gltf.scene);
  renderer.render(scene, camera);
});

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

# 安装 Draco 工具
npm install -g draco3d

# 压缩 GLTF
gltf-pipeline -i input.gltf -o output.glb -d

# 压缩参数
# -d, --draco.compressMeshes  压缩网格
# --draco.compressionLevel    压缩级别 (0-10)

const lod = new THREE.LOD();

// 根据距离切换模型精度
lod.addLevel(highDetailModel, 0);      // 0-50米
lod.addLevel(mediumDetailModel, 50);   // 50-100米
lod.addLevel(lowDetailModel, 100);     // 100米以上

scene.add(lod);

// Intersection Observer 懒加载
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const element = entry.target;
      if (element.dataset.src) {
        element.src = element.dataset.src;
      }
      observer.unobserve(element);
    }
  });
}, { rootMargin: '100px' });

document.querySelectorAll('.lazy').forEach(el => observer.observe(el));

<!-- 预加载关键资源 -->
<link rel="preload" href="hero-image.webp" as="image">
<link rel="preload" href="video.mp4" as="video">

<!-- 预连接 -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

图片渐进加载流程:
├── 1. 显示模糊占位图 (20px 宽, 模糊滤镜)
├── 2. 加载中等质量图 (400px 宽)
└── 3. 加载高清图 (1200px 宽)

视频渐进加载流程:
├── 1. 显示封面图
├── 2. 加载元数据
├── 3. 加载首帧
└── 4. 按需加载视频片段

HTTP 缓存配置:

静态资源 (带哈希):
├── Cache-Control: max-age=31536000, immutable
└── 例: image.a1b2c3.webp

动态资源:
├── Cache-Control: max-age=3600, stale-while-revalidate=86400
└── 配合 ETag 使用

用户上传内容:
├── Cache-Control: max-age=86400
├── CDN 缓存: 7-30天
└── 版本号控制: image.jpg?v=123

CDN 图片处理服务:

阿里云 OSS + IMG:
├── 图片缩放: ?x-oss-process=image/resize,w_800
├── 格式转换: ?x-oss-process=image/format,webp
├── 质量调整: ?x-oss-process=image/quality,q_85
└── 水印添加: ?x-oss-process=image/watermark,...

腾讯云 COS:
├── 图片处理: ?imageMogr2/thumbnail/800x
├── 格式转换: ?imageMogr2/format/webp
└── 质量调整: ?imageMogr2/quality/85

视频处理:
├── 阿里云 VOD: 转码、截图、水印
├── 腾讯云点播: 转码、鉴黄、内容审核
└── 七牛云: 音视频处理、AI分析

// Performance API 监控
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log(`${entry.name}: ${entry.duration}ms`);
  });
});

observer.observe({ entryTypes: ['resource', 'paint', 'largest-contentful-paint'] });

// 自定义指标
const img = new Image();
img.onload = () => {
  const timing = performance.now() - startTime;
  console.log(`图片加载耗时: ${timing}ms`);
};
const startTime = performance.now();
img.src = 'image.webp';