vue使用ffmpeg视频压缩

在Vue中使用FFmpeg进行视频压缩可以分为以下步骤：

1. 安装FFmpeg库

在Vue项目中安装FFmpeg库，可以使用npm或yarn命令：

npm install @ffmpeg/ffmpeg

或

yarn add @ffmpeg/ffmpeg

2. 引入FFmpeg库

在Vue组件中引入FFmpeg库：

import { createFFmpeg } from '@ffmpeg/ffmpeg'
const ffmpeg = createFFmpeg({ log: true })

3. 加载FFmpeg库

在Vue组件中加载FFmpeg库：

async function loadFFmpeg() {
  await ffmpeg.load()
}

4. 压缩视频

在Vue组件中使用FFmpeg进行视频压缩：

async function compressVideo() {
  // 选择要压缩的视频文件
  const videoFile = document.getElementById('video-file').files[0]

  // 读取视频文件
  await ffmpeg.FS('writeFile', videoFile.name, await fetchFile(videoFile))

  // 设置FFmpeg运行参数
  await ffmpeg.run('-i', videoFile.name, '-codec:v', 'libx264', '-crf', '28', '-preset', 'medium', '-codec:a', 'aac', '-b:a', '128k', '-pix_fmt', 'yuv420p', 'output.mp4')

  // 读取压缩后的视频文件
  const data = await ffmpeg.FS('readFile', 'output.mp4')

  // 将压缩后的视频文件转换成Blob对象
  const blob = new Blob([data.buffer], { type: 'video/mp4' })

  // 将Blob对象转换成File对象
  const file = new File([blob], 'output.mp4', { type: 'video/mp4' })

  // 显示压缩后的视频文件
  document.getElementById('video-preview').src = URL.createObjectURL(file)
}

上述代码中，`fetchFile()`是一个异步函数，用于读取本地文件并将其转换成Uint8Array数组。下面是`fetchFile()`函数的实现代码：

async function fetchFile(file) {
  const reader = new FileReader()
  reader.readAsArrayBuffer(file)
  await new Promise(resolve => reader.onload = resolve)
  return new Uint8Array(reader.result)
}

5. 在Vue模板中添加HTML元素

在Vue模板中添加HTML元素，用于选择要压缩的视频文件和显示压缩后的视频文件：

<input type="file" id="video-file" accept="video/*">
<video id="video-preview" controls></video>
<button @click="compressVideo">压缩视频</button>

在上述代码中，`<input>`元素用于选择要压缩的视频文件，`<video>`元素用于显示压缩后的视频文件，`<button>`元素用于触发视频压缩操作。

以上就是在Vue中使用FFmpeg进行视频压缩的步骤，希望对你有所帮助！