前言

最近做设计，要在网页里对视频进行种种编辑。本人知识有限，只找到了ffmpeg。本着能用就行的原则，直接用现成的依赖。

环境和语言

浏览器：chrome浏览器

技术：vue

发车

首先下载依赖

npm i @ffmpeg/core @ffmpeg/ffmpeg

然后在要使用的vue文件里引入

import FFmpeg from "@ffmpeg/ffmpeg/dist/ffmpeg.min.js";

视频转换(mp4->avi)

在这就举一个例子，想要实现其他功能可以去参考ffmpeg的命令以及ffmpeg.wasm方法

ffmpeg.wasm

首先的获取选择的视频

function selectVideo() {
    let name = e.target.files[0].name;
    //文件格式设置为mp4
    let myType = ["mp4"];
    let len = myType.length;
    for (let i = 0; i < len; i++) {
        if (name.indexOf(myType[i]) != -1) {
            this.$message({
                type: "success",
                message: "视频选择成功",
            });
            this.file = e.target.files[0];
            return;
        }
    }
    this.$message.error("请选择mp4格式的视频");
}

然后ffmpeg的使用

function transformFormat() {
    const { createFFmpeg, fetchFile } = FFmpeg;
    const ffmpeg = createFFmpeg();
    let url = null;
    (async () => {
        let { name } = this.file;
        //进度条设置，凭个人喜好
        ffmpeg.setProgress(({ ratio }) => {
            this.percent = Math.floor(ratio * 100);
        });
        await ffmpeg.load();
        ffmpeg.FS("writeFile", name, await fetchFile(this.file));
        await ffmpeg.run("-i", name, "output.avi");
        const data = ffmpeg.FS("readFile", "output.avi");
        url = URL.createObjectURL(
            new Blob([data.buffer], { type: "video/avi" })
        );
        //点击连接可以直接下载avi视频
        let down = document.querySelector(".downVideo");
        down.href = url;
    })();
}

项目地址

报错解决

问题：ReferenceError: SharedArrayBuffer is not defined

解决：因为跨域策略产生的跨域问题

参考文章

在vue.config.js配置

headers: {
    "Cross-Origin-Opener-Policy": "same-origin",
    "Cross-Origin-Embedder-Policy": "require-corp",
},

题外话：本来上传和编辑功能是一起的，设置之后，上传功能就会出错。可能也是因为本人技术有限，在项目内只能二选一，解决只能用笨方法，分成两个项目来，只在ffmpeg项目这设置头。

结语

欢迎补充和建议~