feat(frontend/vditor): 实现基于 FFmpeg.wasm 的视频压缩功能

- 添加视频压缩相关配置和工具函数 - 实现 FFmpeg.wasm 初始化和视频压缩功能 - 优化文件上传流程，支持视频文件压缩
2026-02-06 23:21:16 +08:00 · 2025-09-11 10:05:50 +08:00
parent d2ce203236
commit 9d76926b8a
9 changed files with 723 additions and 15 deletions
--- a/frontend_nuxt/.env.example
+++ b/frontend_nuxt/.env.example
@@ -17,3 +17,8 @@ NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liVkO1NPAX5JyWxJ
 NUXT_PUBLIC_DISCORD_CLIENT_ID=1394985417044000779
 NUXT_PUBLIC_TWITTER_CLIENT_ID=ZTRTU05KSk9KTTJrTTdrVC1tc1E6MTpjaQ
 NUXT_PUBLIC_TELEGRAM_BOT_ID=8450237135
+
+# 视频压缩配置 - FFmpeg.wasm 专用
+# 支持 Chrome 60+ 和 Safari 11.1+
+NUXT_PUBLIC_VIDEO_MAX_SIZE=52428800  # 50MB (字节)
+NUXT_PUBLIC_VIDEO_TARGET_SIZE=20971520  # 20MB (字节)
--- a/frontend_nuxt/config/uploadConfig.js
+++ b/frontend_nuxt/config/uploadConfig.js
@@ -0,0 +1,137 @@
+/**
+ * 文件上传配置 - 简化版
+ * 专注于 FFmpeg.wasm 视频压缩，支持 Chrome/Safari
+ */
+
+// 声明全局变量以避免 TypeScript 错误
+/* global useRuntimeConfig */
+
+// 简化的环境变量读取功能
+function getEnvNumber(key, defaultValue) {
+  if (typeof window !== 'undefined') {
+    // 客户端：尝试从 Nuxt 环境获取
+    try {
+      // 使用 globalThis 避免直接引用未定义的变量
+      const nuxtApp = globalThis.$nuxt || globalThis.nuxtApp
+      if (nuxtApp && nuxtApp.$config) {
+        const value = nuxtApp.$config.public?.[key.replace('NUXT_PUBLIC_', '').toLowerCase()]
+        return value ? Number(value) : defaultValue
+      }
+      return defaultValue
+    } catch {
+      return defaultValue
+    }
+  }
+  // 服务端：从 process.env 获取
+  return process.env[key] ? Number(process.env[key]) : defaultValue
+}
+
+function getEnvBoolean(key, defaultValue) {
+  if (typeof window !== 'undefined') {
+    try {
+      // 使用 globalThis 避免直接引用未定义的变量
+      const nuxtApp = globalThis.$nuxt || globalThis.nuxtApp
+      if (nuxtApp && nuxtApp.$config) {
+        const value = nuxtApp.$config.public?.[key.replace('NUXT_PUBLIC_', '').toLowerCase()]
+        return value === 'true' || value === true
+      }
+      return defaultValue
+    } catch {
+      return defaultValue
+    }
+  }
+  const envValue = process.env[key]
+  return envValue ? envValue === 'true' : defaultValue
+}
+
+export const UPLOAD_CONFIG = {
+  // 视频文件配置 - 专为 FFmpeg.wasm 优化
+  VIDEO: {
+    // 文件大小限制 (字节)
+    MAX_SIZE: getEnvNumber('NUXT_PUBLIC_VIDEO_MAX_SIZE', 20 * 1024 * 1024), // 5MB
+    TARGET_SIZE: getEnvNumber('NUXT_PUBLIC_VIDEO_TARGET_SIZE', 5 * 1024 * 1024), // 5MB
+
+    // 支持的输入格式 (FFmpeg.wasm 支持更多格式)
+    SUPPORTED_FORMATS: ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv'],
+
+    // 输出格式 - MP4 (兼容性最好)
+    OUTPUT_FORMAT: 'mp4',
+    OUTPUT_CODEC: 'h264',
+  },
+
+  // 图片文件配置
+  IMAGE: {
+    MAX_SIZE: 5 * 1024 * 1024, // 5MB
+    TARGET_SIZE: 5 * 1024 * 1024, // 5MB
+    SUPPORTED_FORMATS: ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'],
+  },
+
+  // 音频文件配置
+  AUDIO: {
+    MAX_SIZE: 5 * 1024 * 1024, // 5MB
+    TARGET_SIZE: 5 * 1024 * 1024, // 5MB
+    SUPPORTED_FORMATS: ['mp3', 'wav', 'ogg', 'aac', 'm4a'],
+  },
+
+  // 通用文件配置
+  GENERAL: {
+    MAX_SIZE: 100 * 1024 * 1024, // 100MB
+    CHUNK_SIZE: 5 * 1024 * 1024, // 5MB 分片大小
+  },
+
+  // 用户体验配置
+  UI: {
+    SUCCESS_DURATION: 2000,
+    ERROR_DURATION: 3000,
+    WARNING_DURATION: 3000,
+  },
+}
+
+/**
+ * 获取文件类型配置
+ */
+export function getFileTypeConfig(filename) {
+  const ext = filename.split('.').pop().toLowerCase()
+
+  if (UPLOAD_CONFIG.VIDEO.SUPPORTED_FORMATS.includes(ext)) {
+    return { type: 'video', config: UPLOAD_CONFIG.VIDEO }
+  }
+
+  if (UPLOAD_CONFIG.IMAGE.SUPPORTED_FORMATS.includes(ext)) {
+    return { type: 'image', config: UPLOAD_CONFIG.IMAGE }
+  }
+
+  if (UPLOAD_CONFIG.AUDIO.SUPPORTED_FORMATS.includes(ext)) {
+    return { type: 'audio', config: UPLOAD_CONFIG.AUDIO }
+  }
+
+  return { type: 'general', config: UPLOAD_CONFIG.GENERAL }
+}
+
+/**
+ * 格式化文件大小
+ */
+export function formatFileSize(bytes) {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+}
+
+/**
+ * 计算压缩节省的费用 (示例函数)
+ */
+export function calculateSavings(originalSize, compressedSize, costPerMB = 0.01) {
+  const originalMB = originalSize / (1024 * 1024)
+  const compressedMB = compressedSize / (1024 * 1024)
+  const savedMB = originalMB - compressedMB
+  const savedCost = savedMB * costPerMB
+
+  return {
+    savedMB: savedMB.toFixed(2),
+    savedCost: savedCost.toFixed(4),
+    originalCost: (originalMB * costPerMB).toFixed(4),
+    compressedCost: (compressedMB * costPerMB).toFixed(4),
+  }
+}
--- a/frontend_nuxt/nuxt.config.ts
+++ b/frontend_nuxt/nuxt.config.ts
@@ -1,9 +1,21 @@
 import { defineNuxtConfig } from 'nuxt/config'
+import { createRequire } from 'node:module'

+const require = createRequire(import.meta.url)
+const appPkg = require('./package.json') as {
+  dependencies?: Record<string, string>
+  devDependencies?: Record<string, string>
+}
+const ffmpegVersion = (
+  process.env.NUXT_PUBLIC_FFMPEG_VERSION ||
+  appPkg.dependencies?.['@ffmpeg/ffmpeg'] ||
+  appPkg.devDependencies?.['@ffmpeg/ffmpeg'] ||
+  '0.12.15'
+).replace(/^[^\d]*/, '')
 export default defineNuxtConfig({
  devServer: {
    host: '0.0.0.0',
-    port: 3000
+    port: 3000,
  },
  ssr: true,
  modules: ['@nuxt/image'],
@@ -17,6 +29,7 @@ export default defineNuxtConfig({
      discordClientId: process.env.NUXT_PUBLIC_DISCORD_CLIENT_ID || '',
      twitterClientId: process.env.NUXT_PUBLIC_TWITTER_CLIENT_ID || '',
      telegramBotId: process.env.NUXT_PUBLIC_TELEGRAM_BOT_ID || '',
+      ffmpegVersion,
    },
  },
  css: [
--- a/frontend_nuxt/package-lock.json
+++ b/frontend_nuxt/package-lock.json
@@ -6,6 +6,8 @@
    "": {
      "name": "frontend_nuxt",
      "dependencies": {
+        "@ffmpeg/ffmpeg": "^0.12.15",
+        "@ffmpeg/util": "^0.12.2",
        "@icon-park/vue-next": "^1.4.2",
        "@nuxt/image": "^1.11.0",
        "@stomp/stompjs": "^7.0.0",
@@ -19,6 +21,7 @@
        "ldrs": "^1.0.0",
        "markdown-it": "^14.1.0",
        "mermaid": "^10.9.4",
+        "nanoid": "^5.1.5",
        "nprogress": "^0.2.0",
        "nuxt": "latest",
        "sanitize-html": "^2.17.0",
@@ -996,9 +999,39 @@
      "integrity": "sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==",
      "license": "MIT"
    },
+    "node_modules/@ffmpeg/ffmpeg": {
+      "version": "0.12.15",
+      "resolved": "https://registry.npmmirror.com/@ffmpeg/ffmpeg/-/ffmpeg-0.12.15.tgz",
+      "integrity": "sha512-1C8Obr4GsN3xw+/1Ww6PFM84wSQAGsdoTuTWPOj2OizsRDLT4CXTaVjPhkw6ARyDus1B9X/L2LiXHqYYsGnRFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@ffmpeg/types": "^0.12.4"
+      },
+      "engines": {
+        "node": ">=18.x"
+      }
+    },
+    "node_modules/@ffmpeg/types": {
+      "version": "0.12.4",
+      "resolved": "https://registry.npmmirror.com/@ffmpeg/types/-/types-0.12.4.tgz",
+      "integrity": "sha512-k9vJQNBGTxE5AhYDtOYR5rO5fKsspbg51gbcwtbkw2lCdoIILzklulcjJfIDwrtn7XhDeF2M+THwJ2FGrLeV6A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
+    "node_modules/@ffmpeg/util": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmmirror.com/@ffmpeg/util/-/util-0.12.2.tgz",
+      "integrity": "sha512-ouyoW+4JB7WxjeZ2y6KpRvB+dLp7Cp4ro8z0HIVpZVCM7AwFlHa0c4R8Y/a4M3wMqATpYKhC7lSFHQ0T11MEDw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.x"
+      }
+    },
    "node_modules/@icon-park/vue-next": {
      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@icon-park/vue-next/-/vue-next-1.4.2.tgz",
+      "resolved": "https://registry.npmmirror.com/@icon-park/vue-next/-/vue-next-1.4.2.tgz",
      "integrity": "sha512-+QklF255wkfBOabY+xw6FAI0Bwln/RhdwCunNy/9sKdKuChtaU67QZqU67KGAvZUTeeBgsL+yaHHxqfQeGZXEQ==",
      "license": "Apache-2.0",
      "engines": {
@@ -7222,7 +7255,7 @@
    },
    "node_modules/diff2html": {
      "version": "3.4.52",
-      "resolved": "https://registry.npmjs.org/diff2html/-/diff2html-3.4.52.tgz",
+      "resolved": "https://registry.npmmirror.com/diff2html/-/diff2html-3.4.52.tgz",
      "integrity": "sha512-qhMg8/I3sZ4zm/6R/Kh0xd6qG6Vm86w6M+C9W+DuH1V8ACz+1cgEC8/k0ucjv6AGqZWzHm/8G1gh7IlrUqCMhg==",
      "license": "MIT",
      "dependencies": {
@@ -7238,7 +7271,7 @@
    },
    "node_modules/diff2html/node_modules/diff": {
      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/diff/-/diff-7.0.0.tgz",
      "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==",
      "license": "BSD-3-Clause",
      "engines": {
@@ -7247,7 +7280,7 @@
    },
    "node_modules/diff2html/node_modules/highlight.js": {
      "version": "11.9.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.9.0.tgz",
      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
      "license": "BSD-3-Clause",
      "optional": true,
@@ -8330,7 +8363,7 @@
    },
    "node_modules/hogan.js": {
      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/hogan.js/-/hogan.js-3.0.2.tgz",
+      "resolved": "https://registry.npmmirror.com/hogan.js/-/hogan.js-3.0.2.tgz",
      "integrity": "sha512-RqGs4wavGYJWE07t35JQccByczmNUXQT0E12ZYV1VKYu5UiAU9lsos/yBAcf840+zrUQQxgVduCR5/B8nNtibg==",
      "dependencies": {
        "mkdirp": "0.3.0",
@@ -8342,13 +8375,13 @@
    },
    "node_modules/hogan.js/node_modules/abbrev": {
      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-1.1.1.tgz",
      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
      "license": "ISC"
    },
    "node_modules/hogan.js/node_modules/mkdirp": {
      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz",
+      "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.3.0.tgz",
      "integrity": "sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew==",
      "deprecated": "Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)",
      "license": "MIT/X11",
@@ -8358,7 +8391,7 @@
    },
    "node_modules/hogan.js/node_modules/nopt": {
      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+      "resolved": "https://registry.npmmirror.com/nopt/-/nopt-1.0.10.tgz",
      "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
      "license": "MIT",
      "dependencies": {
@@ -8614,7 +8647,7 @@
    },
    "node_modules/ipx": {
      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/ipx/-/ipx-3.1.1.tgz",
+      "resolved": "https://registry.npmmirror.com/ipx/-/ipx-3.1.1.tgz",
      "integrity": "sha512-7Xnt54Dco7uYkfdAw0r2vCly3z0rSaVhEXMzPvl3FndsTVm5p26j+PO+gyinkYmcsEUvX2Rh7OGK7KzYWRu6BA==",
      "license": "MIT",
      "dependencies": {
@@ -10171,7 +10204,7 @@
    },
    "node_modules/nanoid": {
      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-5.1.5.tgz",
      "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
      "funding": [
        {
--- a/frontend_nuxt/package.json
+++ b/frontend_nuxt/package.json
@@ -13,6 +13,8 @@
  },
  "dependencies": {
    "@icon-park/vue-next": "^1.4.2",
+    "@ffmpeg/ffmpeg": "^0.12.15",
+    "@ffmpeg/util": "^0.12.2",
    "@nuxt/image": "^1.11.0",
    "@stomp/stompjs": "^7.0.0",
    "cropperjs": "^1.6.2",
@@ -25,6 +27,7 @@
    "ldrs": "^1.0.0",
    "markdown-it": "^14.1.0",
    "mermaid": "^10.9.4",
+    "nanoid": "^5.1.5",
    "nprogress": "^0.2.0",
    "nuxt": "latest",
    "sanitize-html": "^2.17.0",
--- a/frontend_nuxt/plugins/ffmpeg.client.ts
+++ b/frontend_nuxt/plugins/ffmpeg.client.ts
@@ -0,0 +1,37 @@
+import { FFmpeg } from '@ffmpeg/ffmpeg'
+import { toBlobURL } from '@ffmpeg/util'
+import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app'
+
+let ffmpeg: FFmpeg | null = null
+
+export default defineNuxtPlugin(() => {
+  const {
+    public: { ffmpegVersion },
+  } = useRuntimeConfig()
+
+  return {
+    provide: {
+      ffmpeg: async () => {
+        if (ffmpeg) return ffmpeg
+
+        ffmpeg = new FFmpeg()
+
+        const mtOk =
+          typeof crossOriginIsolated !== 'undefined' &&
+          crossOriginIsolated &&
+          typeof SharedArrayBuffer !== 'undefined'
+
+        const pkg = mtOk ? '@ffmpeg/core-mt' : '@ffmpeg/core-st'
+        const base = `https://unpkg.com/${pkg}@${ffmpegVersion}/dist/umd`
+
+        await ffmpeg.load({
+          coreURL: await toBlobURL(`${base}/ffmpeg-core.js`, 'text/javascript'),
+          wasmURL: await toBlobURL(`${base}/ffmpeg-core.wasm`, 'application/wasm'),
+          workerURL: await toBlobURL(`${base}/ffmpeg-core.worker.js`, 'text/javascript'),
+        })
+
+        return ffmpeg
+      },
+    },
+  }
+})
--- a/frontend_nuxt/utils/ffmpegVideoCompressor.js
+++ b/frontend_nuxt/utils/ffmpegVideoCompressor.js
@@ -0,0 +1,327 @@
+/**
+ * FFmpeg.wasm 视频压缩器
+ *
+ * 用法：
+ *   const { $ffmpeg } = useNuxtApp()
+ *   const ff = await $ffmpeg() // 插件里已完成 ffmpeg.load()
+ *   const out = await compressVideoWithFFmpeg(ff, file, { onProgress, strictSize: false })
+ *
+ * 设计要点：
+ *  - 本文件不再负责加载/初始化，只负责转码逻辑；和 Nuxt 插件解耦。
+ *  - 针对【同一个 ffmpeg 实例】做串行队列，避免并发 exec 踩内存文件系统。
+ *  - 使用 nanoid 生成唯一文件名；日志环形缓冲；默认 CRF+VBV，可选 strictSize（two-pass）。
+ *  - 体积明显小于目标时直通返回，减少无谓重编码。
+ */
+
+import { fetchFile } from '@ffmpeg/util'
+import { nanoid } from 'nanoid'
+import { UPLOAD_CONFIG } from '../config/uploadConfig.js'
+
+/*************************
+ * 每实例一个串行队列     *
+ *************************/
+// WeakMap<FFmpeg, { q: (()=>Promise<any>)[], running: boolean, resolvers: {res,rej}[] }>
+const queues = new WeakMap()
+
+function enqueueOn(instance, taskFn) {
+  return new Promise((res, rej) => {
+    let st = queues.get(instance)
+    if (!st) {
+      st = { q: [], running: false, resolvers: [] }
+      queues.set(instance, st)
+    }
+    st.q.push(taskFn)
+    st.resolvers.push({ res, rej })
+    drain(instance)
+  })
+}
+
+async function drain(instance) {
+  const st = queues.get(instance)
+  if (!st || st.running) return
+  st.running = true
+  try {
+    while (st.q.length) {
+      const task = st.q.shift()
+      const rr = st.resolvers.shift()
+      try {
+        rr.res(await task())
+      } catch (e) {
+        rr.rej(e)
+      }
+    }
+  } finally {
+    st.running = false
+  }
+}
+
+/*****************
+ * 工具函数       *
+ *****************/
+function decideScale(widthHint) {
+  if (!widthHint) return { filter: null, width: null }
+  const evenW = widthHint % 2 === 0 ? widthHint : widthHint - 1
+  return { filter: `scale=${evenW}:-2:flags=bicubic,setsar=1`, width: evenW }
+}
+
+function calculateParamsByRatio(originalSize, targetSize) {
+  const ratio = Math.min(targetSize / originalSize, 1)
+  const crf = ratio < 0.35 ? 29 : ratio < 0.5 ? 27 : ratio < 0.7 ? 25 : 23
+  const preset = ratio < 0.35 ? 'slow' : ratio < 0.5 ? 'medium' : 'veryfast'
+  const s =
+    ratio < 0.35
+      ? decideScale(720)
+      : ratio < 0.6
+        ? decideScale(960)
+        : ratio < 0.8
+          ? decideScale(1280)
+          : { filter: null, width: null }
+  const audioBitrateK = ratio < 0.5 ? 96 : ratio < 0.7 ? 128 : 160
+  const profile = s.width && s.width <= 1280 ? 'main' : 'high'
+  return { crf, preset, scaleFilter: s.filter, scaleWidth: s.width, audioBitrateK, profile }
+}
+
+function makeRingLogger(capBytes = 4000) {
+  const buf = []
+  let total = 0
+  function push(s) {
+    if (!s) return
+    buf.push(s)
+    total += s.length
+    while (total > capBytes) total -= buf.shift().length
+  }
+  return { push, dump: () => buf.slice() }
+}
+
+function parseDurationFromLogs(logs) {
+  // 避免正则：查找 Duration: 后的 00:00:00.xx
+  const text = logs.join(' ')
+  const idx = text.indexOf('Duration:')
+  if (idx === -1) return null
+  let i = idx + 'Duration:'.length
+  while (i < text.length && text[i] === ' ') i++
+  function read2(start) {
+    const a = text.charCodeAt(start) - 48
+    const b = text.charCodeAt(start + 1) - 48
+    if (a < 0 || a > 9 || b < 0 || b > 9) return null
+    return a * 10 + b
+  }
+  const hh = read2(i)
+  if (hh === null) return null
+  i += 2
+  if (text[i++] !== ':') return null
+  const mm = read2(i)
+  if (mm === null) return null
+  i += 2
+  if (text[i++] !== ':') return null
+  const s1 = read2(i)
+  if (s1 === null) return null
+  i += 2
+  if (text[i++] !== '.') return null
+  let j = i
+  while (j < text.length && text.charCodeAt(j) >= 48 && text.charCodeAt(j) <= 57) j++
+  const frac = parseFloat('0.' + text.slice(i, j) || '0')
+  return hh * 3600 + mm * 60 + s1 + frac
+}
+
+export function isFFmpegSupported() {
+  return typeof WebAssembly !== 'undefined' && typeof Worker !== 'undefined'
+}
+
+/**
+ * 读取 ffmpeg 核心版本（通过 -version），会进入队列避免并发冲突
+ */
+export async function getFFmpegInfo(ffmpegInstance) {
+  return enqueueOn(ffmpegInstance, async () => {
+    const logs = []
+    const onLog = ({ type, message }) => {
+      if (type === 'info' || type === 'fferr') logs.push(message)
+    }
+    ffmpegInstance.on('log', onLog)
+    try {
+      await ffmpegInstance.exec(['-version'])
+    } finally {
+      ffmpegInstance.off('log', onLog)
+    }
+    const line = logs.find((l) => l.toLowerCase().includes('ffmpeg version')) || ''
+    const parts = line.trim().split(' ').filter(Boolean)
+    const version = parts.length > 2 ? parts[2] : parts[1] || null
+    return { version }
+  })
+}
+
+/**
+ * 压缩：接受一个已经 load() 完成的 ffmpeg 实例
+ * @param {*} ffmpegInstance 已初始化的 FFmpeg 实例（来自 Nuxt 插件）
+ * @param {File|Blob} file 输入文件
+ * @param {{ onProgress?:(p:{stage:string,progress:number})=>void, signal?:AbortSignal, strictSize?:boolean, targetSize?:number }} opts
+ */
+export async function compressVideoWithFFmpeg(ffmpegInstance, file, opts = {}) {
+  return enqueueOn(ffmpegInstance, () => doCompress(ffmpegInstance, file, opts))
+}
+
+async function doCompress(ffmpegInstance, file, opts) {
+  const onProgress = opts.onProgress || (() => {})
+  const { signal, strictSize = false } = opts
+
+  onProgress({ stage: 'preparing', progress: 10 })
+
+  const targetSize = opts.targetSize ?? UPLOAD_CONFIG?.VIDEO?.TARGET_SIZE ?? 12 * 1024 * 1024
+
+  // 小体积直通
+  const sizeKnown = 'size' in file && typeof file.size === 'number'
+  if (sizeKnown && file.size <= targetSize * 0.9) {
+    onProgress({ stage: 'skipped', progress: 100 })
+    return file
+  }
+
+  const params = calculateParamsByRatio(sizeKnown ? file.size : targetSize * 2, targetSize)
+  const { crf, preset, scaleFilter, audioBitrateK, profile } = params
+
+  const name = 'name' in file && typeof file.name === 'string' ? file.name : 'input.mp4'
+  const dot = name.lastIndexOf('.')
+  const outName = (dot > -1 ? name.slice(0, dot) : name) + '.mp4'
+
+  const ext = dot > -1 ? name.slice(dot + 1).toLowerCase() : 'mp4'
+  const id = nanoid()
+  const inputName = `input-${id}.${ext}`
+  const outputName = `output-${id}.mp4`
+  const passlog = `ffpass-${id}`
+
+  // 监听
+  const ring = makeRingLogger()
+  const onFfmpegProgress = ({ progress: p }) => {
+    const adjusted = 20 + p * 70
+    onProgress({ stage: 'compressing', progress: Math.min(90, adjusted) })
+  }
+  const onFfmpegLog = ({ type, message }) => {
+    if (type === 'fferr' || type === 'info') ring.push(message)
+  }
+  ffmpegInstance.on('progress', onFfmpegProgress)
+  ffmpegInstance.on('log', onFfmpegLog)
+
+  let aborted = false
+  const abortHandler = () => {
+    aborted = true
+  }
+  if (signal) signal.addEventListener('abort', abortHandler, { once: true })
+
+  try {
+    await ffmpegInstance.writeFile(inputName, await fetchFile(file))
+    onProgress({ stage: 'analyzing', progress: 20 })
+
+    let durationSec = null
+    try {
+      await ffmpegInstance.exec(['-hide_banner', '-i', inputName, '-f', 'null', '-'])
+      durationSec = parseDurationFromLogs(ring.dump())
+    } catch {
+      durationSec = durationSec ?? parseDurationFromLogs(ring.dump())
+    }
+
+    let videoBitrate = null
+    if (durationSec && sizeKnown && targetSize < file.size) {
+      const totalTargetBits = targetSize * 8
+      const audioBits = audioBitrateK * 1000 * durationSec
+      const maxVideoBits = Math.max(totalTargetBits - audioBits, totalTargetBits * 0.7)
+      const bps = Math.max(180000, Math.floor(maxVideoBits / durationSec))
+      videoBitrate = String(Math.min(bps, 5000000))
+    }
+
+    const baseArgs = [
+      '-hide_banner',
+      '-i',
+      inputName,
+      '-c:v',
+      'libx264',
+      '-pix_fmt',
+      'yuv420p',
+      '-profile:v',
+      profile,
+      '-movflags',
+      '+faststart',
+      '-preset',
+      preset,
+      '-c:a',
+      'aac',
+      '-b:a',
+      `${audioBitrateK}k`,
+      '-ac',
+      '2',
+    ]
+    if (scaleFilter) baseArgs.push('-vf', scaleFilter)
+
+    const onePassArgs = [...baseArgs, '-crf', String(crf)]
+    if (videoBitrate)
+      onePassArgs.push('-maxrate', videoBitrate, '-bufsize', String(parseInt(videoBitrate, 10) * 2))
+
+    const twoPassFirst = [
+      '-y',
+      '-hide_banner',
+      '-i',
+      inputName,
+      '-c:v',
+      'libx264',
+      '-b:v',
+      `${videoBitrate || '1000000'}`,
+      '-pass',
+      '1',
+      '-passlogfile',
+      passlog,
+      '-an',
+      '-f',
+      'mp4',
+      '/dev/null',
+    ]
+    const twoPassSecond = [
+      ...baseArgs,
+      '-b:v',
+      `${videoBitrate || '1000000'}`,
+      '-pass',
+      '2',
+      '-passlogfile',
+      passlog,
+      outputName,
+    ]
+
+    if (aborted) throw new DOMException('Aborted', 'AbortError')
+
+    if (!strictSize) {
+      await ffmpegInstance.exec([...onePassArgs, outputName])
+    } else {
+      if (!videoBitrate) videoBitrate = '1000000'
+      await ffmpegInstance.exec(twoPassFirst)
+      onProgress({ stage: 'second-pass', progress: 85 })
+      await ffmpegInstance.exec(twoPassSecond)
+    }
+
+    if (aborted) throw new DOMException('Aborted', 'AbortError')
+
+    onProgress({ stage: 'finalizing', progress: 95 })
+    const out = await ffmpegInstance.readFile(outputName)
+
+    const mime = 'video/mp4'
+    const blob = new Blob([out], { type: mime })
+    const hasFileCtor = typeof File === 'function'
+    const result = hasFileCtor ? new File([blob], outName, { type: mime }) : blob
+
+    onProgress({ stage: 'completed', progress: 100 })
+    return result
+  } finally {
+    try {
+      await ffmpegInstance.deleteFile(inputName)
+    } catch {}
+    try {
+      await ffmpegInstance.deleteFile(outputName)
+    } catch {}
+    try {
+      await ffmpegInstance.deleteFile(`${passlog}-0.log`)
+    } catch {}
+    try {
+      await ffmpegInstance.deleteFile(`${passlog}-0.log.mbtree`)
+    } catch {}
+
+    ffmpegInstance.off('progress', onFfmpegProgress)
+    ffmpegInstance.off('log', onFfmpegLog)
+    if (signal) signal.removeEventListener('abort', abortHandler)
+  }
+}
--- a/frontend_nuxt/utils/vditor.js
+++ b/frontend_nuxt/utils/vditor.js
@@ -3,6 +3,8 @@ import { getToken, authState } from './auth'
 import { searchUsers, fetchFollowings, fetchAdmins } from './user'
 import { tiebaEmoji } from './tiebaEmoji'
 import vditorPostCitation from './vditorPostCitation.js'
+import { checkFileSize, formatFileSize, compressVideo, VIDEO_CONFIG } from './videoCompressor.js'
+import { UPLOAD_CONFIG } from '../config/uploadConfig.js'

 export function getEditorTheme() {
  return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic'
@@ -91,10 +93,81 @@ export function createVditor(editorId, options = {}) {
      multiple: false,
      handler: async (files) => {
        const file = files[0]
-        vditor.tip('图片上传中', 0)
+        const ext = file.name.split('.').pop().toLowerCase()
+        const videoExts = ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv']
+        const isVideo = videoExts.includes(ext)
+
+        // 检查文件大小
+        const sizeCheck = checkFileSize(file)
+        if (!sizeCheck.isValid) {
+          console.log(
+            '文件大小不能超过',
+            formatFileSize(sizeCheck.maxSize),
+            '，当前文件',
+            formatFileSize(sizeCheck.actualSize),
+          )
+          vditor.tip(
+            `文件大小不能超过 ${formatFileSize(sizeCheck.maxSize)}，当前文件 ${formatFileSize(sizeCheck.actualSize)}`,
+            3000,
+          )
+          return '文件过大'
+        }
+
+        let processedFile = file
+
+        // 如果是视频文件且需要压缩
+        if (isVideo && sizeCheck.needsCompression) {
+          try {
+            vditor.tip('视频压缩中...', 0)
+            vditor.disabled()
+
+            // 使用 FFmpeg 压缩视频
+            processedFile = await compressVideo(file, (progress) => {
+              const messages = {
+                initializing: '初始化 FFmpeg',
+                preparing: '准备压缩',
+                analyzing: '分析视频',
+                compressing: '压缩中',
+                finalizing: '完成压缩',
+                completed: '压缩完成',
+              }
+              const message = messages[progress.stage] || progress.stage
+              vditor.tip(`${message} ${progress.progress}%`, 0)
+            })
+
+            const originalSize = formatFileSize(file.size)
+            const compressedSize = formatFileSize(processedFile.size)
+            const savings = Math.round((1 - processedFile.size / file.size) * 100)
+
+            vditor.tip(`压缩完成！${originalSize} → ${compressedSize} (节省 ${savings}%)`, 2000)
+            // 压缩成功但仍然超过最大限制，则阻止上传
+            if (processedFile.size > VIDEO_CONFIG.MAX_SIZE) {
+              vditor.tip(
+                `压缩后仍超过限制 (${formatFileSize(VIDEO_CONFIG.MAX_SIZE)}). 请降低分辨率或码率后再上传。`,
+                4000,
+              )
+              vditor.enable()
+              return '压缩后仍超过大小限制'
+            }
+          } catch (error) {
+            // 压缩失败时，如果原文件超过最大限制，则阻止上传
+            if (file.size > VIDEO_CONFIG.MAX_SIZE) {
+              vditor.tip(
+                `视频压缩失败，且文件超过限制 (${formatFileSize(VIDEO_CONFIG.MAX_SIZE)}). 请先压缩后再上传。`,
+                4000,
+              )
+              vditor.enable()
+              return '视频压缩失败且文件过大'
+            }
+            vditor.tip('视频压缩失败，将尝试上传原文件', 3000)
+            processedFile = file
+          }
+        }
+
+        vditor.tip('文件上传中', 0)
        vditor.disabled()
        const res = await fetch(
-          `${API_BASE_URL}/api/upload/presign?filename=${encodeURIComponent(file.name)}`,
+          `${API_BASE_URL}/api/upload/presign?filename=${encodeURIComponent(processedFile.name)}`,
          { headers: { Authorization: `Bearer ${getToken()}` } },
        )
        if (!res.ok) {
@@ -103,14 +176,13 @@ export function createVditor(editorId, options = {}) {
          return '获取上传地址失败'
        }
        const info = await res.json()
-        const put = await fetch(info.uploadUrl, { method: 'PUT', body: file })
+        const put = await fetch(info.uploadUrl, { method: 'PUT', body: processedFile })
        if (!put.ok) {
          vditor.enable()
          vditor.tip('上传失败')
          return '上传失败'
        }

-        const ext = file.name.split('.').pop().toLowerCase()
        const imageExts = [
          'apng',
          'bmp',
@@ -132,6 +204,8 @@ export function createVditor(editorId, options = {}) {
          md = `![${file.name}](${info.fileUrl})`
        } else if (audioExts.includes(ext)) {
          md = `<audio controls="controls" src="${info.fileUrl}"></audio>`
+        } else if (videoExts.includes(ext)) {
+          md = `<video width="600" controls>\n  <source src="${info.fileUrl}" type="video/${ext}">\n  你的浏览器不支持 video 标签。\n</video>`
        } else {
          md = `[${file.name}](${info.fileUrl})`
        }
--- a/frontend_nuxt/utils/videoCompressor.js
+++ b/frontend_nuxt/utils/videoCompressor.js
@@ -0,0 +1,79 @@
+/**
+ * 基于 FFmpeg.wasm 的视频压缩工具
+ * 专为现代浏览器 (Chrome/Safari) 优化
+ */
+
+import { UPLOAD_CONFIG } from '../config/uploadConfig.js'
+import { compressVideoWithFFmpeg, isFFmpegSupported } from './ffmpegVideoCompressor.js'
+import { useNuxtApp } from '#app'
+
+// 导出配置供外部使用
+export const VIDEO_CONFIG = UPLOAD_CONFIG.VIDEO
+
+/**
+ * 检查文件大小是否超出限制
+ */
+export function checkFileSize(file) {
+  return {
+    isValid: file.size <= VIDEO_CONFIG.MAX_SIZE,
+    actualSize: file.size,
+    maxSize: VIDEO_CONFIG.MAX_SIZE,
+    needsCompression: file.size > VIDEO_CONFIG.TARGET_SIZE,
+  }
+}
+
+/**
+ * 格式化文件大小显示
+ */
+export function formatFileSize(bytes) {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+}
+
+/**
+ * 压缩视频文件 - 使用 FFmpeg.wasm
+ */
+export async function compressVideo(file, onProgress = () => {}) {
+  // 检查是否需要压缩
+  const sizeCheck = checkFileSize(file)
+  if (!sizeCheck.needsCompression) {
+    onProgress({ stage: 'completed', progress: 100 })
+    return file
+  }
+
+  // 检查 FFmpeg 支持
+  if (!isFFmpegSupported()) {
+    throw new Error('当前浏览器不支持视频压缩功能，请使用 Chrome 或 Safari 浏览器')
+  }
+
+  try {
+    const { $ffmpeg } = useNuxtApp()
+    const ff = await $ffmpeg()
+    return await compressVideoWithFFmpeg(ff, file, { onProgress })
+  } catch (error) {
+    console.error('FFmpeg 压缩失败:', error)
+    throw new Error(`视频压缩失败: ${error.message}`)
+  }
+}
+
+/**
+ * 预加载 FFmpeg（可选的性能优化）
+ */
+export async function preloadVideoCompressor() {
+  try {
+    // FFmpeg 初始化现在通过 Nuxt 插件处理
+    // 这里只需要检查支持性
+    if (!isFFmpegSupported()) {
+      throw new Error('当前浏览器不支持 FFmpeg')
+    }
+    const { $ffmpeg } = useNuxtApp()
+    await $ffmpeg()
+    return { success: true, message: 'FFmpeg 预加载成功' }
+  } catch (error) {
+    console.warn('FFmpeg 预加载失败:', error)
+    return { success: false, error: error.message }
+  }
+}