基于ffmpeg，在web前端编辑视频 |
您所在的位置：网站首页 › 如何用vue剪辑视频 › 基于ffmpeg，在web前端编辑视频 |
基于ffmpeg，在web前端编辑视频
|
一 什么是ffmpeg
是一款强大的视频处理工具，能够进行视频的转码、压缩、剪辑、滤镜、水印等等操作。 二 音视频基础知识（容器、编码、流） 2.1 容器常见的视频格式有mp4,mkv,mov,flv,avi,wmv等等，这个格式其实是容器。容器里面包含了许多流，如视频流、音频流、字幕流等。
不同的容器，支持的编码格式是不一样的。不同的编码格式（CODEC），有不同的压缩率，会导致文件大小和清晰度的差异。 视频格式视频流编码格式音频流编码格式字幕流编码格式MP4H.264，H.265，MPEG-4ACC，MP3，AC-3SRT，TTMLAVIMPEG-4，Xvid，DivXAC-3，MP3，PCMSubRip，SSA/ASSMKVH.254，H.265，VP9ACC，AC-3，FLACSRT，PGS，VobSubMOVH.264，HEVC，MPEG-4ACC，MP3，ALACSRT，CEA-608WMVWMV7，WMV8，WMV9WMA不支持字幕FLVH.264，VP6MP3，ACC不支持字幕下面命令可以查看视频文件中流的编码格式、分辨率等信息。 ffmpeg -i [输入文件] 2.3 编码器视频编码器： libx264：最流行的开源 H.264 编码器 NVENC：基于 NVIDIA GPU 的 H.264 编码器 libx265：开源的 HEVC 编码器 libvpx：谷歌的 VP8 和 VP9 编码器 libaom：AV1 编码器音频编码器： libfdk-aac aac下面命令查看ffmpeg支持的编码格式 $ ffmpeg -encoders 三. FFmpeg的使用格式FFmpeg 的命令行参数非常多，可以分成五个部分。 $ ffmpeg [全局参数] {[输入文件参数] -i [输入文件]} {[输出文件参数] [输出文件]} 四. FFmpeg的常见用法 4.1 转换容器、编码格式ffmpeg最常见的功能就是用来转码，修改容器格式，流的编码方式。 转换容器格式，例如将mkv文件转mp4 $ ffmpeg -i in.mkv out.mp4 修改流的编码格式，-c指定编码器。-c:v： 指定视频流编码器 -c:a：指定音频流编码器 -c:s： 指定字幕流编码器 -c copy：直接复制，不经过重新编码（这样比较快） $ ffmpeg -i in.mkv -c:v libx264 -c:a libmp3lame -c:s srt out.mp4默认情况下，视频的转换会只转换一个视频流和一个音频流，如果有多个音频流的话，只会转换第一个，同时默认情况下，字幕流不会被转换。保留多个音轨、字幕，一般可以使用map参数，-map 0:v是指第0个input文件的视频流转到output，-map 0:a:0就是第0个文件的第0个音频流搞过来。 $ ffmpeg -i input.mkv -map 0:v -c:v copy -map 0:a:0 -c:a:0 libmp3lame -map 0:a:1 -c:a:1 libvorbis -b:a:1 128k -map 0:s:0 -c:s:0 srt output.mp4 4.2 抽取音频 -vn ffmpeg -i video_input.mp4 -vn -video_output.mp4 4.3 视频静音 -an ffmpeg -i video_input.mp4 -an -video_output.mp4 4.4 从视频中提取图片 ffmpeg -i video.mp4 -r 1 -f image2 image-%3d.png 4.5 剪切视频开始时间 (-ss HH:MM:SS), 持续秒数 (-t duration), 结束时间 (-to HH:MM:SS), 开始秒数 (-s duration)的用法. ffmpeg -i input_audio.wav -ss 00:00:30 -t 10 output_audio.wav ffmpeg -i input_video.h264 -ss 00:01:30 -to 00:01:40 output_video.h264分割文件：为每个输出文件分别指定开始时间、结束或者持续时间就可以了。 ffmpeg -i video.mp4 -t 00:00:30 video_1.mp4 -ss 00:00:30 video_2.mp4拼接视频：（同样这个方法适用与任何音频或者视频文件。） join.txt输入文件，包含了要拼接的文件的完整路径。 ffmpeg -f concat -i join.txt output.mp4 4.6 增加字幕 ffmpeg -i video.mp4 -i subtitles.srt -c:v copy -c:a copy -preset veryfast -c:s mov_text -map 0 -map 1 output.mp4-preset：指定输出的视频质量，会影响文件的生成速度，有以下几个可用的值 ultrafast, superfast, veryfast, faster, fast, medium, slow, slower, veryslow。 4.7 给音频添加封面图片 ffmpeg -loop 1 -i image.jpg -i audio.wav -c:v libx264 -c:a aac -strict experimental -b:a 192k -shortest output.mp4-loop 输入流循环的次数，1表示无限循环，0表示不循环 -shortest (output)最短输出流结束时结束编码。 4.8 压缩媒体文件 ffmpeg -i audio_input.mp3 -b:a 192k audio_output.mp3 ffmpeg -i video_input.mp4 -b:v 1000k -bufsize 1000k video_output.mp4 ffmpeg -i video_input.mp4 -c:v libx264 -crf 28 video_output.mp4 ffmpeg -i video_input.mp4 -r 24 video_output.mp4对于音频文件： -b:a 或 -ab，改变比特率压缩音频文件，比特率有: 96k, 112k, 128k, 160k, 192k, 256k, 320k.值越大，文件所需要的体积就越大。 对于视频文件，压缩文件的方式有许多： 通过-b:v，压缩视频文件（视频的比特率和音频是不同的（一般要大得多）） 使用 -crf 参数 (恒定质量因子). 较小的crf 意味着较大的码率，crf 设置为20 到 30 是最常见的。同时使用 libx264 编码器也有助于减小文件体积 -r 指示了帧率 (这里是 24)。降低帧率在有些情况下也能有效（不过这往往让视频看起来很卡） 4.9 视频缩放 ffmpeg -i input.mp4 -vf "scale=w=800:h=600" output.mp4 ffmpeg -i input.mkv -vf "scale=w=1/2*in_w:h=1/2*in_h" output.mkv 4.10 视频裁剪可以指定裁剪的原点（默认是视频的中心） ffmpeg -i input.mp4 -vf "crop=w=1280:h=720:x=0:y=0" output.mp4 ffmpeg -i input.mkv -vf "crop=w=400:h=400" output.mkv ffmpeg -i input.mkv -vf "crop=w=3/4*in_w:h=3/4*in_h" output.mkv 4.11 视频旋转指定一个弧度，顺时针旋转视频。为了让计算简单一些，你可以给角度然后乘以 PI/180: 第一个命令将视频顺时针旋转90°，第二个则是上下颠倒了视频（翻转了180°）。 ffmpeg -i input.avi -vf "rotate=90*PI/180" ffmpeg -i input.mp4 -vf "rotate=PI" 4.12 更改音量 ffmpeg -i input.wav -af "volume=1.5" output.wav ffmpeg -i input.ogg -af "volume=0.75" output.ogg 4.13 更改播放速度修改视频播放速度：setpts 数值越大意味着播放速度越慢。 第一个命令让播放速度加倍了，第二个则是让播放速度降低了一半。 ffmpeg -i input.mkv -vf "setpts=0.5*PTS" output.mkv //速度加倍 ffmpeg -i input.mp4 -vf "setpts=2*PTS" output,mp4//速度减半修改音频播放速度：atempo，它只接受 0.5(半速) 到 2 (倍速)之间的值，链式使用该过滤器。第一个命令让音频速度慢了1/4，第二个则是加速到原来的4（2*2)倍。 ffmpeg -i input.wav -af "atempo=0.75" output.wav ffmpeg -i input.mp3 -af "atempo=2.0,atempo=2.0" ouutput.mp3 五. 在前端使用FFmpegffmpeg.wasm 是FFmpeg的纯Webassembly/Javascript 端口，简单来说就是前端通过ffmpeg.wasm，来调用ffmpeg相关的视频编辑功能。 5.1 安装依赖 npm install @ffmpeg/ffmpeg @ffmpeg/core -S 5.2 ffmpeg.wasm API createFFmpeg()--创建ffmpeg实例 const { createFFmpeg } = FFmpeg; const ffmpeg = createFFmpeg({ log: true, }); ffmpeg.load()---加载ffmpeg.wasm-core 脚本（异步） (async () => { await ffmpeg.load(); })(); ffmpeg.run() ---最重要的方法，用来执行ffmpeg命令，对视频文件进行编辑。（异步） (async () => { await ffmpeg.run('-i', 'flame.avi', '-s', '1920x1080', 'output.mp4'); /* equals to `$ ffmpeg -i flame.avi -s 1920x1080 output.mp4` */ })(); ffmpeg.FS() -- 将输入文件写入内存，或者将输出文件从内存中读出。只有将视频文件放入内存中，ffmpeg.wasm才可以对其进行操作。 ffmpeg.FS('writeFile', 'video.avi', new Uint8Array(...)); /* Read data from MEMFS */ ffmpeg.FS('readFile', 'video.mp4'); /* Delete file in MEMFS */ ffmpeg.FS('unlink', 'video.mp4'); ffmpeg.exit() ---关闭正在执行的程序，同时清空内存 const ffmpeg = createFFmpeg({ log: true }); await ffmpeg.load(...); setTimeout(() => { ffmpeg.exit(); // ffmpeg.exit() is callable only after load() stage. }, 1000); await ffmpeg.run(...); ffmpeg.setLogging()--控制是否展示日志信息 ffmpeg.setLogging(true); ffmpeg.setLogger()--获取日志信息 ffmpeg.setLogger(({ type, message }) => { console.log(type, message); /* * type can be one of following: * * info: internal workflow debug messages * fferr: ffmpeg native stderr output * ffout: ffmpeg native stdout output */ }); ffmpeg.setProgress()--获取当前进度，可以展示进图条。 ffmpeg.setProgress(({ ratio }) => { console.log(ratio); /* * ratio is a float number between 0 to 1. */ }); fetchFile(media)--获取文件资源，可以获取远程文件url，或者通过本地上传的文件，将文件转换成Uint8Array格式的数据。media an URL string, base64 string or File, Blob, Buffer object (async () => { const data = await fetchFile('https://github.com/ffmpegwasm/testdata/raw/master/video-3s.avi'); /* * data will be in Uint8Array format */ })(); 5.3 ffmpeg开发流程源码地址：gitee.com/yuqing_1_0/… 参考文档：zhuanlan.zhihu.com/p/455572544 www.ruanyifeng.com/blog/2020/0… github.com/sunwu51/not… www.bilibili.com/video/BV1CL… |
【本文地址】
今日新闻 |
推荐新闻 |