前言
因为最近写货色的时候想把视频转成gif，网上轻易搜了一下在线转换的网站，后果不仅要登微信，上传完之后还不给下载，很烦，于是决定本人写一个。尽管说必定有收费的网站能够用，然而本着学习的心态，加上本人做的话也自在，想要什么加什么，不必受约束，而且这些在线转换大多要微信关注公众号，这一点我很烦，收费就收费，免费就免费，非让我专一公众号，我非常承受不了。
于是去github上搜了，发现ffmpeg这个库，性能很弱小，能够做视频和音频的解决，目前我只须要做格局转换，不过也就是说前面能够基于他做更多的性能，比方简略的剪辑。临时不谈，先从简略做起，思考的太多就不想搞了，先满足目前的需要。
介绍
我是用vue写的，因为vue真的很不便很快，我看到也有人用react写的，能够去看这个我的项目video-to-gif
- 我的我的项目地址
- 成果展现
这个gif展现图就是这个我的项目生成的，看着很卡是因为为了放大上传的大小，我只给了3帧，所以看着非常卡。
留神
有一个中央须要留神，须要在vite外面配置这个货色，如同是和跨域无关，有趣味的本人去搜，我也不是很明确，反正要是不写就会给你一个谬误。
export default defineConfig({ server: { headers: { "Cross-Origin-Opener-Policy": "same-origin", "Cross-Origin-Embedder-Policy": "require-corp", } }}Error: SharedArrayBuffer could not be used.也是因为要设置headers，将打包后的动态页面间接用作github pages时就会失去这个谬误，须要启动服务去设置headers，所以想要体验的话临时须要clone我的项目到本地跑，前面我会部署在服务器上，想要体验的话能够关注本我的项目。
git clone https://github.com/shellingfordly/my-tools.gitcd my-toolspnpm ipnpm run devopen http://localhost:3080/代码
转换的外围代码就是调用ffmpeg提供的api，将文件传给它，配置输入的各种参数。
页面上就做一个文件上传，和一个配置的input就行，其实还是挺简略的，启动服务就能够间接在网页上用了
export async function useFFmpeg( file: File, config: ConfigType, progressFn: ProgressCallback = () => {}) { const ffmpeg = await loadFFmpeg(); const { fetchFile } = getFFmpeg(); ffmpeg.setProgress(progressFn); const { width: defaultWidth, height: defaultHeight, duration, } = await getVideoSize(file); const { frameRate = 25, width = defaultWidth, height = defaultHeight, rangeStart = 0, rangeEnd = duration, fileType, } = config; ffmpeg.FS("writeFile", file.name, await fetchFile(file)); await 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}` ); return ffmpeg.FS("readFile", `output.${fileType}`).buffer;}