tsParticles Export Video 插件指南将粒子动画导出为 WebM/MP4 视频【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticlestsparticles/plugin-export-video是 tsParticles 官方提供的视频导出插件它基于浏览器原生MediaRecorder与HTMLCanvasElement.captureStream()能力把正在运行的粒子动画画布实时录制为视频 Blob从而无需安装任何额外依赖即可将粒子效果、彩带爆炸或烟花动画保存成 WebM、OGG、MP4 等格式。阅读本文后你将掌握该插件的完整接入流程CDN 与模块化两种方式、可配置参数fps、duration、mimeType以及它在引擎中的导出调用链与浏览器兼容性边界。插件是什么职责与架构定位tsparticles/plugin-export-video是 tsParticles 众多导出插件之一它本身不修改粒子选项体系而是向引擎注册一个容器级插件IContainerPlugin为Container.export(type, options)提供video类型的导出能力。从源码结构看该插件由四个核心文件组成见 plugins/exports/video/srcExportVideoPlugin.ts实现IPlugin接口插件 ID 固定为export-videoneedsPlugin()始终返回true即只要注册就生效并通过动态import懒加载插件实例ExportVideoPluginInstance.ts实现IContainerPlugin真正执行画布捕获与MediaRecorder录制逻辑IExportVideoData.ts导出参数类型定义index.ts / index.lazy.ts / browser.ts包入口导出loadExportVideoPlugin加载函数。加载函数的核心工作非常直接在 index.ts 中调用engine.checkVersion(__VERSION__)做引擎版本兼容性校验然后通过engine.pluginManager.register(...)将插件注册进引擎。而 index.lazy.ts 提供了延迟加载变体——只有当注册时才会真正import插件类适合对首屏包体积敏感的场景。安装与快速接入清单根据 README.md接入只需三步安装或通过 CDN 引入tsparticles/engine在调用tsParticles.load(...)之前调用包加载函数loadExportVideoPlugin(...)按需通过引擎的导出 API 触发视频导出。包本身通过 npm / yarn 安装安装命令见下文。其package.json声明了唯一的 peer 依赖tsparticles/engineworkspace:*并提供.与./lazy两个导出入口分别对应常规与懒加载加载器版本为 4.3.3。CDN / Vanilla JS / jQuery 方式在原生 JavaScript或 jQuery场景下引入tsparticles.plugin.export.video.min.js这一个文件即可。该文件在全局挂载了加载函数loadExportVideoPlugin见 browser.ts 中的globalObject.loadExportVideoPlugin loadExportVideoPlugin赋值。脚本加载完成后即可初始化tsParticles并注册插件(async () { await loadExportVideoPlugin(); await tsParticles.load({ id: tsparticles, options: {/* options */}, }); })();ESM / CommonJS 方式该包同时兼容 ES Module 与 CommonJS。先安装依赖$ npm install tsparticles/plugin-export-video或$ yarn add tsparticles/plugin-export-videoCommonJS 用法const { tsParticles } require(tsparticles/engine); const { loadExportVideoPlugin } require(tsparticles/plugin-export-video); (async () { await loadExportVideoPlugin(); })();ESM 用法import { tsParticles } from tsparticles/engine; import { loadExportVideoPlugin } from tsparticles/plugin-export-video; (async () { await loadExportVideoPlugin(); })();注意在 Webpack / Vite 等打包工具中如果你的目标是减小主包体积也可以从tsparticles/plugin-export-video/lazy导入加载函数把插件类的解析推迟到运行时。触发视频导出参数与调用链导出参数IExportVideoData该插件没有独立的根选项键而是通过引擎导出 API 的data参数传递配置。参数由 IExportVideoData.ts 定义全部为可选参数类型说明默认值durationnumber导出视频时长秒5源码中defaultDuration 5fpsnumber录制帧率取container.actualOptions.fpsLimitmimeTypestring输出视频的 MIME 类型浏览器支持列表中的第一个类型调用方式tsParticles.load(...)会返回Container实例而引擎在 Container.ts 中提供了统一的export(type, options)方法它遍历容器内所有已注册插件找到支持指定type的插件并调用其export方法返回ExportResult定义见 ExportResult.ts含supported、blob、error字段最终把第一个支持的插件的blob返回给调用方若没有插件支持该类型则记录错误日志并返回undefined。因此实际触发录制的方式是import { tsParticles } from tsparticles/engine; import { loadExportVideoPlugin } from tsparticles/plugin-export-video; (async () { await loadExportVideoPlugin(); const container await tsParticles.load({ id: tsparticles, options: { fpsLimit: 60, particles: { number: { value: 80 }, move: { enable: true }, }, }, }); // 录制 5 秒视频默认时长帧率跟随 fpsLimit const blob await container.export(video, { duration: 5, fps: 60 }); if (blob) { const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download particles.webm; a.click(); URL.revokeObjectURL(url); } })();底层录制原理在 ExportVideoPluginInstance.ts 的#exportVideo私有方法中录制流程如下从container.canvas.domElement取得canvas元素调用element.captureStream(data.fps ?? container.actualOptions.fpsLimit)获得媒体流——帧率优先取用户传入的fps未传则回退到粒子配置的fpsLimit用new MediaRecorder(stream, { mimeType })创建录制器监听dataavailable事件收集数据块chunk监听stop事件时将所有 chunk 合并为一个Blobtype 为所选 MIME 类型并 resolverecorder.start()后通过setTimeout在data.duration ?? 5秒后调用recorder.stop()结束录制。值得注意的是整个录制完全发生在浏览器端不需要服务端转码导出的结果是内存中的Blob对象你可以自由决定如何展示如video预览或下载如上面的URL.createObjectURL 模拟点击。MIME 类型与编解码器支持浏览器能力探测由于不同浏览器对视频容器的支持差异很大插件在构造时ExportVideoPluginInstance.ts会通过MediaRecorder.isTypeSupported()探测当前环境的真实能力而不是硬编码输出格式。它探测的容器类型包括video/webmvideo/oggvideo/mp4video/x-matroskaMKV对每种容器又会组合以下编解码器逐一验证含大小写变体vp9, vp8, avc1, av1, h265, h265, h264, opus, pcm, aac, mpeg, mp4a最终得到当前浏览器确实支持的 MIME 类型列表并保存在实例的#supportedTypes中当用户未指定mimeType时插件默认取该列表的第一个元素源码中firstIndex 0。这意味着在不传mimeType的情况下实际输出格式取决于浏览器例如 Chrome 通常首选video/webm;codecsvp9而 Safari 可能偏向video/mp4。如果你想确保下载文件的扩展名正确建议在导出前自行判断blob.type或显式传入你确认可用的mimeType。另外源码中对MediaRecorder.isTypeSupported的探测覆盖了常见大小写形式vp9/VP9并注释指出codecs:冒号分隔的变体是误报来源因此被排除在外——这保证了能力探测的准确性。常见陷阱与排查建议README 明确列出了三条使用注意事项结合源码可以进一步解释其成因在loadExportVideoPlugin(...)之前调用tsParticles.load(...)这是最常见的错误。Container.export(video, ...)只会在已注册的插件中寻找video导出支持如果加载函数尚未执行engine.pluginManager.register未完成容器内就没有ExportVideoPluginInstance引擎会走完循环后记录Export plugin with type video not found错误并返回undefined。务必保证加载函数await完成后再加载配置。开启高级选项前确认 peer 依赖插件以tsparticles/engine为 peer 依赖见 package.json需要保证引擎版本与插件版本兼容loadExportVideoPlugin内部的engine.checkVersion(__VERSION__)会做版本校验版本不匹配时会抛出错误。一次只修改一组选项以快速定位回归由于fps、duration、mimeType相互影响录制结果例如强制指定了浏览器不支持的mimeType时MediaRecorder构造会直接抛异常排查问题时建议逐个调整参数避免多个变量叠加导致难以定位。总结tsparticles/plugin-export-video是一个薄而聚焦的浏览器端视频导出插件通过 index.ts 注册、由 ExportVideoPluginInstance.ts 完成captureStreamMediaRecorder录制并借助 Container.export 与 ExportResult 融入引擎统一的导出体系。使用时只需牢记先加载插件、再加载粒子配置、最后调用container.export(video, {...})的顺序并理解 MIME 类型由浏览器能力探测决定这一前提即可稳定地将任意 tsParticles 动画导出为可下载的视频文件。【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考