前言由于最近写东西的时候想把视频转成gif，于是在网上随便搜了一下在线转换网站。结果不仅登录不了微信，而且上传后还不能下载，非常麻烦烦人，所以决定自己写一个。虽然肯定有免费的网站可以用，但是抱着学习的态度，想做什么就做什么，不用受任何限制，而且这些在线转化大部分都需要微信关注公众号。很烦人，免费就免费，收费就收费。非要专心的话我接受不了公众号。于是在github上搜索了一下，发现ffmpeg是一个强大的库，可以做视频和音频的处理。目前我只需要做格式转换，但这意味着我以后可以基于它做更多的功能，比如简单的编辑。.暂且不说，从简单做起，想太多就别想做了，先满足当下的需求。介绍我是用vue写的，因为vue确实方便快捷。看到有人用react写的。您可以观看此项目的视频转gif格式。我的项目地址效果展示。注意有一个地方需要注意。你需要在vite里面配置这个东西。好像跟跨域有关。感兴趣的可以自行搜索。我不太明白。反正不写就会报错。exportdefaultdefineConfig({server:{headers:{"Cross-Origin-Opener-Policy":"same-origin","Cross-Origin-Embedder-Policy":"require-corp",}}}Error:SharedArrayBuffer可能不能使用，也是因为需要设置headers，当你直接使用打包好的静态页面作为githubpages时，会出现这个错误，需要启动服务来设置headers。因此，如果你想体验一下，需要把项目clone到本地才能运行，后面我会部署到服务器上，想要体验的可以关注这个项目。gitclonehttps://github.com/shellingfordly/my-tools.gitcdmy-toolspnpmipnpmrundevopenhttp://localhost:3080/代码转换的核心代码是调用ffmpeg提供的api，将文件传给它，配置输出的各种参数。只需在页面上进行文件上传和配置输入即可。事实上，这很简单。您可以使用导出异步函数useFFmpeg(file:File,config:ConfigType,progressFn:ProgressCallback=()=>{}){constffmpeg=awaitloadFFmpeg();const{fetchFile}=getFFmpeg();ffmpeg.setProgress(progressFn);const{width:defaultWidth,height:defaultHeight,duration,}=awaitgetVideoSize(file);const{frameRate=25,width=defaultWidth,height=defaultHeight,rangeStart=0,rangeEnd=duration,fileType,}=config;ffmpeg.FS("writeFile",file.name,awaitfetchFile(file));等待ffmpeg。run("-i",file.name,"-r",`${frameRate}`,"-ss",`${rangeStart}`,"-to",`${rangeEnd}`,"-vf",`scale=${width}:${height},fade=t=in:st=${rangeStart}:d=0.05`,`output.${fileType}`);返回ffmpeg.FS("readFile",`output.${fileType}`).buffer;}
