Vue 2.0 前端使用 ffmpeg 压缩视频

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

1.

(我之前因为直接装了导致报错)Vue 2.0 前端使用 ffmpeg 压缩视频,ffmpeg,vue.js,前端

 要安装这个版本

npm install @ffmpeg/ffmpeg@0.10.1 -S

npm install @ffmpeg/core@0.10.0 -S

2.找到vue.config.js

devServer: {

    headers: {

      "Cross-Origin-Opener-Policy": "same-origin",

      "Cross-Origin-Embedder-Policy": "require-corp",

    },

}

加上红色这段代码

3. 我写在了js文件里 

export function resizeVideo(file) {
  return new Promise(function (resolve, reject) {
    const ffmpeg = createFFmpeg({
      corePath: "ffmpeg-core.js",
      log: true,
    });
    
    //开始压缩
    const transcode = async (file) => {
      const { name } = file;

      await ffmpeg.load();
      ffmpeg.FS("writeFile", name, await fetchFile(file));

      await ffmpeg.run("-i", name, "-b", "700000", "output.mp4");
      
      const vv = ffmpeg.FS("readFile", "output.mp4");
     
      //把压缩后的视频进行回显
      let files = new File([vv.buffer], file.name, {
        type: "video/mp4"
      });
      resolve(files);
    };
    transcode(file)
  })

}

我最后又转了一下blob!

美美解决 就是压缩很慢 最后我们不需要压缩视频了文章来源地址https://www.toymoban.com/news/detail-703983.html

到了这里,关于Vue 2.0 前端使用 ffmpeg 压缩视频的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2项目 使用海康视频h5player@2.0版本

    一、下载开发包         我们需要去海康官网下载h5player@2.0版本的一些用到的文件 二、引入开发包         下载之后我们把下载的文件打开把bin里的文件移动到pubilc文件里,可以自己单独建一个文件放在里面 注意:一定要放在vue中的public文件夹中 否则会报错 三、引用下载

    2024年02月03日
    浏览(36)
  • Vue 3 + ffmpeg + wasm 实现前端视频剪辑、音频剪辑、音波展示、视频抽帧、gif抽帧、帧播放器、字幕、贴图、时间轴、素材轨道

    预览 www.bilibili.com/video/BV1YT411Y7YJ 技术栈: 💪 Vue 3、Vue-Router 4、Vite、pnpm、esbuild、TypeScript ☀️ Pinia 状态管理 🌪 Tailwind 原子css集成 💥 ffmpeg、wasm 底层音视频处理集成 功能 多轨道时间轴,支持帧缩放,时间缩放 支持多种类型轨道的添加删除 多功能轨道调节,支持音视频轨

    2024年02月11日
    浏览(35)
  • 前端安全防线:使用Vue CLI配置代码压缩、加密和混淆功能

    在 Vue 应用程序的开发中,代码压缩、加密和混淆是优化应用程序性能和提高安全性的重要步骤。 Vue CLI 是一个功能强大的开发工具,它提供了方便的配置选项来实现这些功能。本文将介绍如何使用 Vue CLI 配置代码压缩、加密和混淆功能,以提高应用程序的性能和安全性。

    2024年02月16日
    浏览(37)
  • 使用ffmpeg压缩视频

    一、到ffmpeg官网下载文件包: Download FFmpeg 下载后找到 bin 下的3个exe文件,复制到自己本机的某个目录下, 如: 二、使用命令行压缩: 这条命令使用 FFmpeg 工具对输入视频文件  input.mp4  进行压缩,并将压缩后的视频保存为  output.mp4  文件。以下是对命令中各个参数的详细解

    2024年03月18日
    浏览(48)
  • 使用ffmpeg修改视频分辨率同时压缩视频的质量

    调整视频的质量和码率可以使用FFmpeg中的编码选项。以下是一些常用的选项: 1 质量选项 :使用 -q:v 参数设置视频的质量等级。质量等级的范围是 0-51,其中 0 表示无损压缩,51 表示最低质量。质量等级越低,视频的文件大小就越小,但是视频的质量也会降低。 2 码率选项

    2024年02月10日
    浏览(31)
  • FFMPEG视频压缩与Python使用方法

    FFMPEG  是一个完整的,跨平台的解决方案,记录,转换和流音频和视频。 官网:https://ffmpeg.org/ 1、Linux: 2、Mac: 3、Windows:  下载文件:  解压缩:  配置环境变量:   出现上图所示response即可说明成功安装。 1、指定视频压缩大小: -fs 10 : 表示文件大小最大值为 100MB 2、设置

    2024年02月07日
    浏览(36)
  • Vue.js 2.0 Render 函数

    Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是  render 函数 ,它比 template 更接近编译器。 让我们先深入一个使用 render 函数的简单例子,假设你想生成一个带锚链接的标题: 在 HTML 层, 我们

    2023年04月16日
    浏览(31)
  • Vue.js 2.0 自定义指令

    除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。下面这个例子将聚焦一个 input 元素,像这样: 当页面

    2023年04月19日
    浏览(41)
  • Vue.js 2.0 深入响应式原理

    大部分的基础内容我们已经讲到了,现在讲点底层内容。Vue 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图。这会让状态管理变得非常简单且直观,不过理解它的原理以避免一些常见的陷阱也是很重要的。在本节中,我们将开始深挖 Vue 响应系统的

    2023年04月11日
    浏览(31)
  • Android 使用FFmpeg3.3.9基于命令实现视频压缩

    前言 首先利用linux平台编译ffmpeg的so库,具体详情请查看文章:Android NDK(ndk-r16b)交叉编译FFmpeg(3.3.9)_jszlittlecat_720的博客-CSDN博客    点击Create JNI function for compressVideo 自动打开native-lib.cpp并创建完成Java_com_suoer_ndk_ffmpegtestapplication_VideoCompress_compressVideo 方法  在此方法下实现压缩

    2024年02月02日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包