0
0

前端ffmpeg压缩视频

下载ffmpeg

npm install @ffmpeg/core @ffmpeg/ffmpeg

这里需要注意两个插件的版本 "@ffmpeg/core": "^0.10.0", "@ffmpeg/ffmpeg": "^0.10.1"

配置ffmpeg

安装好插件以后，需要配置一下代码，否则会报错：

1、以VUE为例 在vue.config.js文件中配置请求头

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

2、在页面中实例化ffmpeg的时候可能会报找不到模块儿的错误

const ffmpeg = createFFmpeg({
      // ffmpeg路径
      corePath: 'ffmpeg-core.js',
      // 日志
      log: true,
      // 进度
      progress: ({ ratio }) => {
           _this.msg = `完成率: ${(ratio * 100.0).toFixed(1)}%`
      }
})

因此，最好将下载好的插件文件放到public文件夹里面就可以了

使用ffmpeg压缩视频

  • 引入ffmpeg
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
  • 文件上传 获取上传的文件
<input id="upload" type="file" accept="video/mp4" capture="camcorder" @change="upload">

注：capture="camcorder" 代表获取手机的摄像头录像 自行查看

  • 实例化ffmpeg
// 实例化ffmpeg
const ffmpeg = createFFmpeg({
      // ffmpeg路径
      corePath: 'ffmpeg-core.js',
      // 日志
      log: true,
      // 进度
      progress: ({ ratio }) => {
          _this.msg = `完成率: ${(ratio * 100.0).toFixed(1)}%`
      }
})
  • 压缩视频
await ffmpeg.load()
this.msg = '开始压缩'
// 把文件加到ffmpeg   写文件
ffmpeg.FS('writeFile', name, await fetchFile(file))
// await ffmpeg.run('-i', name, '-b', '2000000', '-fs', '4194304', '-preset medium', 'superfast', 'put.mp4')
// 开始压缩视频
await ffmpeg.run('-i', name, '-b', '2000000', '-crf', '23', '-fs', '4194304', '-s', resolution, 'put.mp4')
this.msg = '压缩完成'
// 压缩所完成，   读文件  压缩后的文件名称为 put.mp4
const data = ffmpeg.FS('readFile', 'put.mp4')

名词解释：-b: 比特率（也就是速度大小） -crf： 压缩的视频质量 -fs: 把视频压缩到指定大小（有可能会压缩到指定大小，但是可能会剪切指定大小以后的视频片段并删除超出的部分） -preset medium: 压缩速度 -s: 分辨率 （可以用于指定视频的分辨率 分辨率越大 压缩时间越慢 越小 时间越快） put.mp4：压缩完成后的文件名称

  • 压缩完的视频格式是blob格式按照需要可以将视频格式转换成file格式，代码如下：
// 类型转换 blob 转换 file
transToFile (data) {
    console.log(data)
    const _this = this
    var file = []
    // 转换bolb类型
    const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
    // 这么写是因为文件转换是异步任务
    const transToFile = async (blob, fileName, fileType) => {
        return new window.File([blob], fileName, { type: fileType })
    }
    const textContain = transToFile(blob, 'put.mp4', 'video/mp4')
    // 转换完成后可以将file对象传给接口
    textContain.then((res) => {
        file.push(res)
        console.log('res', res)
    })
    return file
},
  • 如果你嫌压缩的时间太长了，可以控制视频的分辨率 代码如下：
getVideoData () {
    return new Promise((resolve, reject) => {
        const videoElement = document.getElementById('video')
        videoElement.addEventListener('loadedmetadata', function () {
            resolve({
                width: this.videoWidth,
                height: this.videoHeight,
                duration: this.duration
            })
        })
    })
},

拿到视频的宽高，压缩的时候可以等比缩放一下

这里有个坑值得注意一下：如果页面上没有加载出来视频的话，就不会触发得到视频宽高的，需要先把视频加载出来才行 代码如下：

getObjectURL (file) {
    let url = null
    window.URL = window.URL || window.webkitURL
    if (window.URL) {
        url = window.URL.createObjectURL(file)
    } else {
        url = URL.createObjectURL(file)
    }
    return url
}

献上所有代码

<template>
    <div class="video-box">
      <video id="video" controls object-fill="fill"></video><br />
      <input id="upload" type="file" accept="video/mp4" capture="camcorder" @change="upload">
    </div>
</template>

<script>
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
export default {
    data () {
        return {
            msg: '',
            videoWidth: '',
            videoHeight: '',
            duration: ''
        }
    },
    methods: {
        // 选择文件
        async upload (e) {
            console.log('start', e)
            console.log('start', e.target.files[0])
            var _this = this
            if (e.target.files[0]) {
                var filename = e.target.files[0].name
                var filetype = e.target.files[0].type

                const videoUrl = _this.getObjectURL(e.target.files[0])
                const video = document.getElementById('video')
                video.src = videoUrl

                this.getVideoData().then((videoObj) => {
                    const file = e.target.files[0]
                    console.log('videoObj:', videoObj)
                    const { width, height } = videoObj
                    const result = _this.squeezVideo(file, filename, filetype, width, height, _this.msg)
                    result.then(res => {
                        console.log('resultFile', res)
                    })
                })
            }
        },
        // 压缩视频
        async squeezVideo (file, filename, filetype, width, height) {
            console.log('squeezingVideo file name:  ', file.name)
            console.log('squeezingVideo file type:  ', file.type)
            console.log('squeezingVideo file path:  ', file.path)
            console.log('squeezingVideo file size:  ', file.size)
            console.log('squeezingVideo file lastModified:  ', file.lastModified)
            console.log('squeezingVideo file lastModifiedDate:  ', file.lastModifiedDate)
            const _this = this
            // 分辨率
            const resolution = `${width / 2}x${height / 2}`
            // 实例化ffmpeg
            const ffmpeg = createFFmpeg({
                // ffmpeg路径
                corePath: 'ffmpeg-core.js',
                // 日志
                log: true,
                // 进度
                progress: ({ ratio }) => {
                    _this.msg = `完成率: ${(ratio * 100.0).toFixed(1)}%`
                }
            })
            var { name } = file
            this.msg = '正在加载 ffmpeg-core.js'
            // 开始加载
            await ffmpeg.load()
            this.msg = '开始压缩'
            // 把文件加到ffmpeg   写文件
            ffmpeg.FS('writeFile', name, await fetchFile(file))
            // await ffmpeg.run('-i', name, '-b', '2000000', '-fs', '4194304', '-preset medium', 'superfast', 'put.mp4')
            // 开始压缩视频
            await ffmpeg.run('-i', name, '-b', '2000000', '-crf', '23', '-fs', '4194304', '-s', resolution, 'put.mp4')
            this.msg = '压缩完成'
            // 压缩所完成，   读文件  压缩后的文件名称为 put.mp4
            const data = ffmpeg.FS('readFile', 'put.mp4')
            // 转换压缩后的视频格式  当前为 blob 格式
            var filed = _this.transToFile(data)
            console.log('transToFile: ', filed)
            return new Promise((resolve, reject) => {
                if (filed) {
                    resolve({
                        squzingFile: filed
                    })
                }
            })
        },
        // 获取视频的宽高分辨率
        getVideoData () {
            return new Promise((resolve, reject) => {
                const videoElement = document.getElementById('video')
                videoElement.addEventListener('loadedmetadata', function () {
                    resolve({
                        width: this.videoWidth,
                        height: this.videoHeight,
                        duration: this.duration
                    })
                })
            })
        },
        // 获取上传视频的url
        getObjectURL (file) {
            let url = null
            window.URL = window.URL || window.webkitURL
            if (window.URL) {
                url = window.URL.createObjectURL(file)
            } else {
                url = URL.createObjectURL(file)
            }
            return url
        },
        // 类型转换 blob 转换 file
        transToFile (data) {
            console.log(data)
            const _this = this
            var file = []
            // 转换bolb类型
            const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
            // 这么写是因为文件转换是异步任务
            const transToFile = async (blob, fileName, fileType) => {
                return new window.File([blob], fileName, { type: fileType })
            }
            const textContain = transToFile(blob, 'put.mp4', 'video/mp4')
            // 转换完成后可以将file对象传给接口
            textContain.then((res) => {
                file.push(res)
                console.log('res', res)
                // _this.confirm(file)
            })
            return file
        }
    }
}
</script>

可以封装压缩视频代码

  • 目录src/utils/ffmpeg.js
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'

// 压缩视频
const squeezVideo = async (file, filename, filetype, width, height) => {
    console.log('file', file)
    console.log('filename', filename)
    console.log('filetype', filetype)
    console.log('width', width)
    console.log('height', height)
    // 分辨率
    const resolution = `${width / 2}x${height / 2}`
    // 实例化ffmpeg
    const ffmpeg = createFFmpeg({
        // ffmpeg路径
        corePath: 'ffmpeg-core.js',
        // 日志
        log: true
        // 进度
        // progress: ({ ratio }) => {
        //     msg = `完成率: ${(ratio * 100.0).toFixed(1)}%`
        // }
    })
    console.log('file---', file)
    var { name } = file
    // msg = '正在加载 ffmpeg-core.js'
    // 开始加载
    await ffmpeg.load()
    // msg = '开始压缩'
    // 把文件加到ffmpeg   写文件
    ffmpeg.FS('writeFile', name, await fetchFile(file))
    // await ffmpeg.run('-i', name, '-b', '2000000', '-fs', '4194304', '-preset medium', 'superfast', 'put.mp4')
    // 开始压缩视频
    await ffmpeg.run('-i', name, '-b', '2000000', '-crf', '23', '-fs', '4194304', '-s', resolution, 'put.mp4')
    // msg = '压缩完成'
    // 压缩所完成，   读文件  压缩后的文件名称为 put.mp4
    const data = ffmpeg.FS('readFile', 'put.mp4')
    // 转换压缩后的视频格式  当前为 blob 格式
    var res = transToFile(data, filename, filetype)
    return new Promise((result, reject) => {
        result({
            filed: res
        })
    })
}

// 类型转换 blob 转换 file
const transToFile = (data, filename, filetype) => {
    var filed = []
    console.log(data)
    // 转换bolb类型
    const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
    // 这么写是因为文件转换是异步任务
    const transToFile = async (blob, fileName, fileType) => {
        return new window.File([blob], fileName, { type: fileType })
    }
    const textContain = transToFile(blob, filename, filetype)
    // 转换完成后可以将file对象传给接口
    textContain.then((res) => {
        filed.push(res)
        console.log('res', res)
    })
    return filed
}
export { squeezVideo }

注意事项：

ffmpeg是一款很强大的视频编辑工具，你可以自己研究研究，上述的代码可以自己封装一下，另外ffmpeg不能用于微信环境或者是企微环境，代码执行不下去。

效果视频

ffmpeg压缩视频

如果各位视频看不到的话，请移步到我的主页进行观看

还有一种插件好像可以 video-conversion.js 但是没有找到官网，有小伙伴研究成功的话，踢我一下哈

文章若有不足之处 烦请指正

标签： ffmpeg 音视频 vue.js
本文转载自: https://blog.csdn.net/Youareseeing/article/details/132466508
版权归原作者 小卷不卷 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端ffmpeg压缩视频”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

hive分区详细教程

使用Python实现对接Hadoop集群（通过Hive）并提供API接口

springboot整合nacos

Postman Pre-request Script

Apifox、Postman进行接口调用时如何携带cookie？

使用IDEA启动项目build时，解决Java编译时内存溢出问题：OutOfMemoryError深入解析

zookeeper实现RMI服务，高可用，HA

文章导航