{"id":12166,"date":"2026-04-17T15:22:57","date_gmt":"2026-04-17T07:22:57","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=12166"},"modified":"2026-04-17T15:22:57","modified_gmt":"2026-04-17T07:22:57","slug":"mediabunny-video-water-clip-merge","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2026\/04\/mediabunny-video-water-clip-merge\/","title":{"rendered":"\u501f\u52a9mediabunny\u7eafJS\u5b9e\u73b0\u89c6\u9891\u6c34\u5370\u3001\u526a\u88c1\u3001\u5408\u6210\u7b49\u529f\u80fd"},"content":{"rendered":"

by zhangxinxu<\/a> from https:\/\/www.zhangxinxu.com\/wordpress\/?p=12166<\/a>
\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u4f46\u9700\u8981\u4fdd\u7559\u539f\u4f5c\u8005\u3001\u51fa\u5904\u4ee5\u53ca\u6587\u4e2d\u94fe\u63a5\uff0cAI\u6293\u53d6\u4fdd\u7559\u539f\u6587\u5730\u5740\uff0c\u4efb\u4f55\u7f51\u7ad9\u5747\u53ef\u6458\u8981\u805a\u5408\uff0c\u5546\u7528\u8bf7\u8054\u7cfb\u6388\u6743\u3002<\/p>\n

\u4e00\u3001\u63a8\u8350\u4f7f\u7528mediabunny<\/h3>\n

\u5927\u7ea62\u5e74\u524d\uff0c\u6211\u66f4\u65b0\u4e86\u5927\u91cf\u7684\u97f3\u89c6\u9891\u5904\u7406\u7684\u6587\u7ae0\uff0c\u4e0d\u8fc7\u91cc\u9762\u7684\u6280\u672f\u5b9e\u73b0\u5927\u90fd\u4f7f\u7528\u539f\u751f\u4ee3\u7801\u548cWebCodecs API\u624b\u6413\u7684\u5b9e\u73b0\u3002<\/p>\n

\u56e0\u4e3a\u90a3\u4e2a\u65f6\u5019\uff0cWebCodecs API\u521a\u51fa\u6765\uff0c\u6280\u672f\u8fd8\u4e0d\u6210\u719f\u3002<\/p>\n

\u81ea\u7136\u800c\u7136\uff0c\u5c31\u9646\u7eed\u51fa\u73b0\u4e86\u4e0d\u5c11\u57fa\u4e8eWebCodecs API\u5c01\u88c5\u7684\u97f3\u89c6\u9891\u5904\u7406\u6846\u67b6\u3002<\/p>\n

\u7ecf\u8fc7\u8fd9\u4e9b\u5e74\u7684\u53d1\u5c55\uff0c\u6709\u4e00\u4e2a\u5a92\u4f53\u5de5\u5177\u5305\u5f02\u519b\u7a81\u8d77\uff0c\u90a3\u5c31\u662fmediabunny\uff01<\/p>\n

\u9879\u76ee\u5730\u5740\uff1ahttps:\/\/github.com\/Vanilagy\/mediabunny<\/a><\/p>\n

\"mediabubby <\/p>\n

2\u4e2a\u6708\u524d\uff0c\u6211\u5728\u5fae\u535a\u4ecb\u7ecd\u8fc7\u7684MP4\/MOV\u89c6\u9891\u8f6cWebM\u683c\u5f0f\u5728\u7ebf\u5de5\u5177<\/a>\u5c31\u4f7f\u7528\u4e86\u6b64\u9879\u76ee\u3002<\/p>\n

\"\u89c6\u9891\u8f6c\u683c\u5f0f\u622a\u56fe\"<\/p>\n

mediabunny\u7684\u80fd\u529b\u4e0d\u4ec5\u4ec5\u5728\u4e8e\u89c6\u9891\u683c\u5f0f\u8f6c\u6362\u4e0e\u538b\u7f29\uff0c\u6dfb\u52a0\u6c34\u5370\u3001\u65f6\u957f\u526a\u88c1\u7b49\u90fd\u4e0d\u5728\u8bdd\u4e0b\uff0c\u672c\u6587\u5c31\u901a\u8fc7\u6211\u8dd1\u901a\u7684demo\u7ed9\u5927\u5bb6\u770b\u4e0b\u8fd9\u7c7b\u9700\u6c42\u8be5\u5982\u4f55\u5b9e\u73b0\u3002<\/p>\n

\u4e8c\u3001\u7ed9\u89c6\u9891\u6dfb\u52a0\u6c34\u5370<\/h3>\n

\u8bdd\u4e0d\u591a\u8bf4\uff0c\u5148\u76f4\u63a5\u4e0a\u624b\u4f53\u9a8c\u3002<\/p>\n

\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a\u7eaf\u524d\u7aef\u5b9e\u73b0\u89c6\u9891\u6dfb\u52a0\u6c34\u5370\u6548\u679cdemo<\/a><\/p>\n

\u9009\u62e9\u89c6\u9891\u548c\u9700\u8981\u7684\u6c34\u5370\u56fe\u7247\uff0c\u5c31\u53ef\u4ee5\u5f97\u5230\u6700\u7ec8\u7684\u6548\u679c\u4e86\uff0c\u5982\u4e0b\u622a\u56fe\u6240\u793a\uff1a<\/p>\n

\"\u6c34\u5370\u5408\u6210\u6548\u679c\u793a\u610f\"<\/p>\n

\u5176\u4e2d\uff0c\u6700\u5173\u952e\u7684\u5408\u6210\u5c31\u662f\u4e0b\u9762\u8fd9\u90e8\u5206\u4ee3\u7801\uff1a<\/p>\n

let ctx = null;\r\nconst conversion = await Conversion.init({\r\n    input,\r\n    output,\r\n    video: {\r\n        process: (sample) => {\r\n            if (!ctx) {\r\n                \/\/ \u521b\u5efacanvas\r\n                const canvas = new OffscreenCanvas(\r\n                    sample.displayWidth,\r\n                    sample.displayHeight\r\n                );\r\n                ctx = canvas.getContext('2d');\r\n            }\r\n\r\n            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\r\n            sample.draw(ctx, 0, 0);\r\n            ctx.drawImage(watermark, 80, 80 * watermark.naturalHeight \/ watermark.naturalWidth);\r\n\r\n            return ctx.canvas;\r\n        }\r\n    }\r\n});<\/pre>\n
\u4f7f\u7528Conversion.init\u89e3\u7801\u89c6\u9891\u7684\u6bcf\u4e00\u5e27(sample)\uff0c\u7136\u540e\u4f7f\u7528canvas\u5c06\u753b\u9762\u548c\u6c34\u5370\u56fe\u91cd\u65b0\u7ed8\u5236\uff0c\u518d\u8fd4\u56de\u5f53\u524dcanvas\u5373\u53ef\u3002<\/p>\n
\u5176\u5b9e\u4e0d\u4ec5\u662f\u6c34\u5370\u5408\u6210\uff0c\u4efb\u4f55\u753b\u9762\u7279\u6548\uff0c\u5b57\u5e55\u6dfb\u52a0\uff0c\u906e\u7f69\uff0c\u5c3a\u5bf8\u8bbe\u7f6e\u90fd\u53ef\u4ee5\u4f7f\u7528\u6b64\u65b9\u6cd5\u5b9e\u73b0\uff0c\u539f\u7406\u90fd\u662f\u4e00\u6837\u7684\uff0c\u90fd\u662f\u5bf9\u56fe\u50cf\u8fdb\u884c\u5904\u7406\u3002<\/p>\n
\u4e09\u3001Video\u89c6\u9891\u524d\u540e\u526a\u88c1<\/h3>\n
\u540c\u6837\u7684\uff0c\u5148\u770b\u5b9e\u73b0\u6548\u679c\u3002<\/p>\n
\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a\u7eaf\u524d\u7aef\u5b9e\u73b0\u89c6\u9891\u9996\u5c3e\u526a\u88c1demo<\/a><\/p>\n
\u9009\u62e9\u4efb\u610f\u7684\u89c6\u9891\uff0c\u7136\u540e\u62d6\u9009\u6ed1\u7aff\u9009\u62e9\u9700\u8981\u7684\u89c6\u9891\u7247\u6bb5\uff0c\u70b9\u51fb\u7ea2\u8272\u7684\u526a\u88c1\u6309\u94ae\uff0c\u5c31\u53ef\u4ee5\u770b\u5230\u88ab\u526a\u88c1\u540e\u7684\u89c6\u9891\u4e86\uff1a<\/p>\n
\"\u526a\u88c1demo\u793a\u610f\"<\/p>\n
\u5b9e\u9645\u751f\u4ea7\u73af\u5883\uff0c\u62d6\u62fd\u7684\u5e94\u8be5\u662f\u7f29\u5217\u56fe\u7684\u5de6\u53f3\u4e24\u4e2a\u5c0f\u7fc5\u8180\uff0c\u8fd9\u91cc\u4e3a\u4e86\u7b80\u5316\u4f7f\u7528\uff0c\u4f7f\u7528\u4e86LuLu UI\u7684\u53cc\u6ed1\u5757\u6a21\u62df\u3002<\/p>\n
\u5176\u6838\u5fc3\u5b9e\u73b0\u4ee3\u7801\u6781\u4e3a\u7b80\u5355\uff1a<\/p>\n
const input = new Input({\r\n    formats: ALL_FORMATS,\r\n    source: new BlobSource(videoFile),\r\n});\r\nconst output = new Output({\r\n    format: new Mp4OutputFormat(), \/\/ The format of the file\r\n    target: new BufferTarget(),\r\n});\r\n\r\nconst eleRange = range.querySelector('input');  \r\nconst conversion = await Conversion.init({\r\n    input,\r\n    output,\r\n    trim: {\r\n        start: eleRange.from,\r\n        end: eleRange.to,\r\n    },\r\n});\r\n\r\nawait conversion.execute();<\/pre>\n
\u4f7f\u7528trim<\/code>\u53c2\u6570\uff0c\u6307\u5b9a\u8d77\u6b62\u65f6\u95f4\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n
\u5b8c\u6574\u4ee3\u7801\u53ef\u4ee5\u8bbf\u95ee\u6f14\u793a\u9875\u9762\u3002<\/p>\n
\u56db\u3001\u591a\u97f3\u9891\u548c\u753b\u9762\u7684\u89c6\u9891\u5408\u6210<\/h3>\n
\u4e00\u4f8b\u80dc\u5343\u8a00\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a\u7eaf\u524d\u7aef\u5b9e\u73b0\u753b\u9762\u52a0\u97f3\u9891\u7684\u89c6\u9891\u5408\u6210demo<\/a><\/p>\n
\u9ed8\u8ba4\u63d0\u4f9b\u4e86\u5b57\u5e55\u3001\u80cc\u666f\u56fe\u3001\u53f0\u8bcd\uff0c\u80cc\u666f\u97f3\u4e50\u53ef\u9009\uff0c\u7528\u6237\u53ef\u4ee5\u81ea\u5df1\u4e0a\u4f20\uff0c\u53ef\u4ee5\u5408\u6210\u6700\u7ec8\u7684\u89c6\u9891\uff1a<\/p>\n
\"\u89c6\u9891\u5408\u6210demo\u622a\u56fe\"<\/p>\n
\u6211\u67e5\u4e86\u4e0bAPI\uff0cmediabunny\u4e2d\u4f3c\u4e4e\u7f3a\u5c11AudioBuffer\u5904\u7406\u65b9\u6cd5\uff0c\u5f53\u7136\uff0c\u4e5f\u53ef\u80fd\u6709\uff0c\u6211\u81ea\u5df1\u6ca1\u627e\u5230\u3002<\/p>\n
\u8fd9\u91cc\u7684AudioBuffer\u526a\u88c1\u548c\u5408\u5e76\u7528\u7684\u662f\u6211\u81ea\u5df1\u4e4b\u524d\u624b\u6413\u7684\u65b9\u6cd5\u3002<\/p>\n