【vue】ffmpeg实现web在线转码播放：

最新推荐文章于 2024-04-30 10:50:04 发布

Sun Peng

最新推荐文章于 2024-04-30 10:50:04 发布

阅读量952

点赞数 7

分类专栏： Vue框架文章标签：前端 vue.js ffmpeg

本文链接：https://blog.csdn.net/weixin_53791978/article/details/135323197

版权

Vue框架专栏收录该内容

140 篇文章 10 订阅

订阅专栏

本文介绍了如何在前端使用ffmpeg进行视频压缩，包括安装ffmpeg库、设置跨域请求头以及提供了一个Vue组件实例，展示了如何通过JavaScript调用ffmpeg进行视频压缩并处理跨域问题。

摘要由CSDN通过智能技术生成

文章目录

一、效果：

二、文档：

ffmpeg
HTML: HyperText Markup Language | MDN
纯前端使用ffmpeg实现视频压缩_js实现前端视频压缩-CSDN博客
 Js使用ffmpeg进行视频剪辑和画面截取_vue项目 ffmpeg截取视频片段-CSDN博客
 ffmpeg实现web在线转码播放
 vue2+vite利用ffmpeg实现纯前端视频剪切
 ffmpeg 使用javascript 实现录屏demo

三、实现：

【1】安装ffmpeg

yarn add @ffmpeg/ffmpeg @ffmpeg/core

【2】引入并初始化

需要在配置文件中设置请求头,否则会报跨域错误

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

【3】案例：

<template>
    <!-- tempalte部分 -->
    <h3>视频前端压缩</h3>
    <video id="output-video" controls :src="vedioSrc"></video><br/>
    <input type="file" id="uploader" @change="initFfmpeg">
		<h5 id="message">{{ message }}</h5>
</template>

<script>
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";

export default {
  data() {
    return {
      message: null,
      vedioSrc: '',
    };
  },
  methods: {
    //初始化
    initFfmpeg() {
      let file = document.querySelector("#uploader").files[0];
      const ffmpeg = createFFmpeg({
        corePath: "ffmpeg-core.js",//public下面的ffmpeg-core.js
        log: true,
      });
      //设置进度条
      ffmpeg.setProgress(({ ratio }) => {
				this.percentage = Math.floor(ratio * 100);
      });
      //开始压缩
      const transcode = async (file) => {
        const { name } = file;
        this.message = "Loading ffmpeg-core.js";
        await ffmpeg.load();
        ffmpeg.FS("writeFile", name, await fetchFile(file));
        this.message = "Start transcoding";
        // '-b','2000000'  值越小  压缩率越大
        await ffmpeg.run("-i", name, "-b", "700000", "output.mp4");
        this.message = "压缩完成";
        const data = ffmpeg.FS("readFile", "output.mp4");
        this.fileBytes = data.byteLength;
        //把压缩后的视频进行回显
        this.vedioSrc = URL.createObjectURL(
          new Blob([data.buffer], { type: "video/mp4" })
          );
      };
      transcode(file);
    },
  },
};
</script>