[{"data":1,"prerenderedAt":56},["ShallowReactive",2],{"i-lucide:menu":3,"i-lucide:grip":8,"i-lucide:chevron-right":10,"i-lucide:moon":12,"i-lucide:sun":14,"i-material-symbols:language":16,"i-lucide:chevron-down":18,"i-lucide:shield-check":20,"i-lucide:mail":22,"i-tabler:markdown":24,"i-lucide:code-xml":26,"i-lucide:film":28,"i-lucide:file-text":30,"i-lucide:box":32,"i-lucide:code-2":34,"i-lucide:image":35,"i-lucide:square-sigma":37,"i-lucide:gamepad-2":39,"i-lucide:sparkles":41,"i-lucide:graduation-cap":43,"blog-body-webcodecs-video-in-browser-zh":45,"i-lucide:cpu":46,"i-lucide:clapperboard":48,"i-lucide:code":50,"i-lucide:video":52,"i-lucide:arrow-right-left":54},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5h16M4 12h16M4 19h16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"19\" r=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 18l6-6l-6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"currentColor\" d=\"M8.125 21.213q-1.825-.788-3.187-2.15t-2.15-3.188T2 11.988t.788-3.875t2.15-3.175t3.187-2.15T12.013 2t3.875.788t3.175 2.15t2.15 3.175t.787 3.875t-.787 3.887t-2.15 3.188t-3.175 2.15t-3.875.787t-3.888-.787M12 19.95q.65-.9 1.125-1.875T13.9 16h-3.8q.3 1.1.775 2.075T12 19.95m-2.6-.4q-.45-.825-.787-1.713T8.05 16H5.1q.725 1.25 1.813 2.175T9.4 19.55m5.2 0q1.4-.45 2.488-1.375T18.9 16h-2.95q-.225.95-.562 1.838T14.6 19.55M4.25 14h3.4q-.075-.5-.112-.987T7.5 12t.038-1.012T7.65 10h-3.4q-.125.5-.187.988T4 12t.063 1.013t.187.987m5.4 0h4.7q.075-.5.113-.987T14.5 12t-.038-1.012T14.35 10h-4.7q-.075.5-.112.988T9.5 12t.038 1.013t.112.987m6.7 0h3.4q.125-.5.188-.987T20 12t-.062-1.012T19.75 10h-3.4q.075.5.113.988T16.5 12t-.038 1.013t-.112.987m-.4-6h2.95q-.725-1.25-1.812-2.175T14.6 4.45q.45.825.788 1.713T15.95 8M10.1 8h3.8q-.3-1.1-.775-2.075T12 4.05q-.65.9-1.125 1.875T10.1 8m-5 0h2.95q.225-.95.563-1.838T9.4 4.45Q8 4.9 6.912 5.825T5.1 8\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\u002F>\u003Cpath d=\"m9 12l2 2l4-4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":23},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"\u002F>\u003Crect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":25},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\u002F>\u003Cpath d=\"M7 15V9l2 2l2-2v6m3-2l2 2l2-2m-2 2V9\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":27},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m18 16l4-4l-4-4M6 8l-4 4l4 4m8.5-12l-5 16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":29},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M7 3v18M3 7.5h4M3 12h18M3 16.5h4M17 3v18m0-13.5h4m-4 9h4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":31},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":33},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\u002F>\u003Cpath d=\"m3.3 7l8.7 5l8.7-5M12 22V12\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":27},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":36},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"\u002F>\u003Ccircle cx=\"9\" cy=\"9\" r=\"2\"\u002F>\u003Cpath d=\"m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":38},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M16 8.9V7H8l4 5l-4 5h8v-1.9\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":40},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 11h4M8 9v4m7-1h.01M18 10h.01m-.69-5H6.68a4 4 0 0 0-3.978 3.59l-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258q-.01-.075-.017-.151A4 4 0 0 0 17.32 5\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":42},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594zM20 2v4m2-2h-4\"\u002F>\u003Ccircle cx=\"4\" cy=\"20\" r=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":44},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0zM22 10v6\"\u002F>\u003Cpath d=\"M6 12.5V16a6 3 0 0 0 12 0v-3.5\"\u002F>\u003C\u002Fg>","\u003Cblockquote>\n\u003Cp>"网页里剪视频、转格式"过去有两条路：上传到服务器处理，或者用 ffmpeg.wasm 在浏览器里软解——前者要等上传、后者慢且烫 CPU。WebCodecs 提供了第三条路：让网页直接调用设备的硬件编解码器。理解它的分层和边界，就能判断这类方案适合什么任务、不适合什么。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fwebcodecs-video-in-browser\u002Fcover.webp\" alt=\"WebCodecs 在浏览器里调用硬件编解码，无需上传服务器\">\u003C\u002Fp>\n\u003Ch2>WebCodecs 解决的是什么问题？\u003C\u002Fh2>\n\u003Cp>WebCodecs 是浏览器暴露的\u003Cstrong>底层编解码 API\u003C\u002Fstrong>，让 JavaScript 能直接访问操作系统\u002F硬件的视频、音频编解码器。在它之前，前端处理视频只能二选一：把文件传到服务器用 ffmpeg 转，或者把 ffmpeg 编译成 WebAssembly 在浏览器里跑。\u003C\u002Fp>\n\u003Cp>两条老路各有硬伤：服务器方案要承担上传时延和后端算力成本，数据也离开了设备；ffmpeg.wasm 方案是纯软件解码，跑在 CPU 上，处理 1080p 视频常常是"实时的几分之一"速度，还会让风扇狂转。WebCodecs 的价值在于\u003Cstrong>绕开软件解码，直接用本机已有的硬件编解码单元\u003C\u002Fstrong>——现代 CPU\u002FGPU 大多内置 H.264\u002FH.265 的专用编解码硬件。\u003C\u002Fp>\n\u003Ch2>它在分层里处于哪一层？\u003C\u002Fh2>\n\u003Cp>要理解 WebCodecs 的能力边界，关键是看清视频处理的分层。一个 \u003Ccode>.mp4\u003C\u002Fcode> 文件从读到处理到导出，要经过几层，而 \u003Cstrong>WebCodecs 只负责其中的编解码层\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>层\u003C\u002Fth>\n\u003Cth>职责\u003C\u002Fth>\n\u003Cth>谁来做\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>容器封装 (mux\u002Fdemux)\u003C\u002Ftd>\n\u003Ctd>解析\u002F封装 MP4、MOV 等容器，分离音视频轨\u003C\u002Ftd>\n\u003Ctd>不属于 WebCodecs，需 mp4box.js 等\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>编解码 (codec)\u003C\u002Ftd>\n\u003Ctd>压缩帧 ↔ 原始帧（H.264\u002FVP9\u002FAV1…）\u003C\u002Ftd>\n\u003Ctd>WebCodecs (VideoEncoder\u002FVideoDecoder)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>原始帧处理\u003C\u002Ftd>\n\u003Ctd>裁剪、缩放、变速、滤镜、合成\u003C\u002Ftd>\n\u003Ctd>Canvas \u002F WebGL \u002F 自行实现\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>音视频同步\u003C\u002Ftd>\n\u003Ctd>时间戳管理、对齐\u003C\u002Ftd>\n\u003Ctd>应用层自己处理\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>这张表是理解一切的关键：WebCodecs 给你的是 \u003Ccode>VideoDecoder\u003C\u002Fcode>（压缩帧→\u003Ccode>VideoFrame\u003C\u002Fcode>）和 \u003Ccode>VideoEncoder\u003C\u002Fcode>（\u003Ccode>VideoFrame\u003C\u002Fcode>→压缩帧），\u003Cstrong>两头之外的封装、像素处理、同步全得自己接\u003C\u002Fstrong>。所以它不是"开箱即用的转码器"，而是高性能的编解码积木。\u003C\u002Fp>\n\u003Ch2>一次浏览器转码的完整流水线\u003C\u002Fh2>\n\u003Cp>把上面分层串起来，一次典型的"改分辨率并重新编码"大致是这样：\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>解封装\u003C\u002Fstrong>：用封装库从 MP4 里取出编码后的视频包（packet）和时间戳。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>解码\u003C\u002Fstrong>：把视频包喂给 \u003Ccode>VideoDecoder\u003C\u002Fcode>，得到一帧帧 \u003Ccode>VideoFrame\u003C\u002Fcode>（原始像素）。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>处理\u003C\u002Fstrong>：把 \u003Ccode>VideoFrame\u003C\u002Fcode> 画到 Canvas\u002FWebGL 上做缩放、裁剪、变速等。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>编码\u003C\u002Fstrong>：把处理后的帧交给 \u003Ccode>VideoEncoder\u003C\u002Fcode>，按目标码率\u002F分辨率压成新的视频包。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>重新封装\u003C\u002Fstrong>：用封装库把新视频包和音频轨写回一个 MP4。\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>整条流水线都在浏览器进程内完成，硬件编解码让 2、4 两步快到接近甚至超过实时，因此处理短视频常常是秒级；而且数据全程不离开设备。\u003C\u002Fp>\n\u003Ch2>为什么比 ffmpeg.wasm 快这么多？\u003C\u002Fh2>\n\u003Cp>核心差异是\u003Cstrong>硬件 vs 软件\u003C\u002Fstrong>。ffmpeg.wasm 把整套编解码逻辑编译成 WASM，逐像素在 CPU 上算，受限于单线程\u002FSIMD，处理高分辨率视频很吃力。WebCodecs 则把活儿交给\u003Cstrong>专用硬件编解码单元\u003C\u002Fstrong>，这些单元是为视频编解码定制的，吞吐量远超通用 CPU 软算。\u003C\u002Fp>\n\u003Cp>不过这把"快"是有前提的：\u003Cstrong>只支持平台硬件\u002F系统具备的编解码格式\u003C\u002Fstrong>。常见的 H.264 几乎处处可用，但某些格式（如部分 H.265、AV1 编码）在特定浏览器或老设备上可能没有硬件支持，此时要么降级、要么不可用。这与 ffmpeg.wasm "啥都能解但都慢"形成互补取舍。\u003C\u002Fp>\n\u003Ch2>能力边界与已知限制\u003C\u002Fh2>\n\u003Cp>WebCodecs 强在编解码这一层，把它用在它不擅长的地方只会事倍功半。常见边界：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>不做封装\u003C\u002Fstrong>：读写 MP4\u002FMOV 容器要另配 mp4box.js 之类，时间戳和轨道对齐得自己管。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>格式覆盖不如 ffmpeg\u003C\u002Fstrong>：支持哪些编解码取决于浏览器+操作系统+硬件，不像 ffmpeg 那样几乎通吃所有冷门格式。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>音视频同步要手写\u003C\u002Fstrong>：API 只给帧和时间戳，对齐逻辑、丢帧补偿都在应用层。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>滤镜要自己实现\u003C\u002Fstrong>：裁剪、缩放、变速得借 Canvas\u002FWebGL 自己做，没有 ffmpeg 那种现成滤镜图。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>浏览器兼容性\u003C\u002Fstrong>：较新的 API，老浏览器不支持，需做能力检测和降级。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>一句话概括取舍：\u003Cstrong>WebCodecs 用「格式覆盖窄 + 要自己搭周边」换来了硬件级速度和数据不出设备\u003C\u002Fstrong>；ffmpeg.wasm 用「慢且吃 CPU」换来了几乎万能的格式兼容。\u003C\u002Fp>\n\u003Ch2>这类方案适合什么 workload？\u003C\u002Fh2>\n\u003Cp>判断一个视频任务适不适合走 WebCodecs，看三点：\u003Cstrong>格式是否主流、是否在意速度与数据本地化、处理逻辑是否在编解码层\u003C\u002Fstrong>。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>适合\u003C\u002Fstrong>：主流格式（H.264 MP4\u002FMOV）的转码、压缩、裁剪、变速；对速度敏感、希望数据留在本地处理的场景。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>勉强\u003C\u002Fstrong>：需要冷门格式或大量复杂滤镜——可行但要补很多周边，性价比下降。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>不适合\u003C\u002Fstrong>：依赖 ffmpeg 海量滤镜链、或要处理设备硬件不支持的编解码格式——此时服务器端 ffmpeg 或 ffmpeg.wasm 更合适。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>小结\u003C\u002Fh2>\n\u003Cp>WebCodecs 是浏览器暴露的底层编解码 API，让网页直接调用硬件编解码器，从而绕开"上传服务器"和"ffmpeg.wasm 软解慢"两条老路。它只负责编解码这一层，封装、像素处理、音视频同步都要应用层自己接；换来的是硬件级速度和数据不出设备，代价是格式覆盖受限于平台、周边要自己搭。主流格式、看重速度与隐私的转码\u002F压缩\u002F剪辑，是它的主场；冷门格式和重滤镜链，仍属于 ffmpeg 的领域。\u003C\u002Fp>\n",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":47},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M12 20v2m0-20v2m5 16v2m0-20v2M2 12h2m-2 5h2M2 7h2m16 5h2m-2 5h2M20 7h2M7 20v2M7 2v2\"\u002F>\u003Crect width=\"16\" height=\"16\" x=\"4\" y=\"4\" rx=\"2\"\u002F>\u003Crect width=\"8\" height=\"8\" x=\"8\" y=\"8\" rx=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":49},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12.296 3.464l3.02 3.956M20.2 6L3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3zM3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm3.18-5.724l3.1 3.899\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":51},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 18l6-6l-6-6M8 6l-6 6l6 6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":53},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m16 13l5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5\"\u002F>\u003Crect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":55},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 3l4 4l-4 4m4-4H4m4 14l-4-4l4-4m-4 4h16\"\u002F>",1782539693567]