vue 使用ffmpeg上传视频前压缩视频，压缩后在上传到服务器-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 使用ffmpeg上传视频前压缩视频，压缩后在上传到服务器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1，使用ffmpeg：npm install @ffmpeg/ffmpeg @ffmpeg/core -S；
2，vue 引入ffmpeg

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

3,需要配置vue.config.js，否则会报错

vue 使用ffmpeg上传视频前压缩视频，压缩后在上传到服务器

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    headers: {
        "Cross-Origin-Opener-Policy": "same-origin",
        "Cross-Origin-Embedder-Policy": "require-corp",
      },
  }
})

完整代码：文章来源地址https://www.toymoban.com/news/detail-506194.html

<template>
  <div class="home">
    <h2>视频前端压缩</h2>
    <video id="video" controls></video><br />
    <input type="file" id="upload" @change="upload">
    <p id="text">{{ msg }}</p>
  </div>
</template>

<script>
// @ is an alias to /src
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
export default {
  name: 'HomeView',
  components: {
  },
  data() {
    return {
      msg: null
    }
  },
  methods: {
    async upload(e) {
      var _this = this;
      const ffmpeg = createFFmpeg({
        log: true,
        progress: ({ ratio }) => {
          _this.msg = `完成率: ${(ratio * 100.0).toFixed(2)}%`;
        },
      });
      var { name } = e.target.files[0];

      this.msg = '正在加载 ffmpeg-core.js'
      await ffmpeg.load();
      this.msg = "开始压缩"
      ffmpeg.FS('writeFile', name, await fetchFile(e.target.files[0]));
      await ffmpeg.run('-i', name, '-b', '2000000', 'put.mp4');
      this.msg = '压缩完成'
      const data = ffmpeg.FS('readFile', 'put.mp4');
      const video = document.getElementById('video');
      video.src = URL.createObjectURL(new Blob([data.buffer], {
        type: 'video/mp4'
      }));
    }
  }
}
</script>