React快上车

挤出一点时间把之前研究视频压缩的资料粘贴出来， 主要是`FFmpeg`这个工具用途太广太实用了。视频压缩、转换、剪裁、提取音频、`GIF`制作等。我这段时间写博客`GIF`图制作都是用它，本文将以示例的形式讲解`FFmpeg`的使用技巧



# 介绍

[官网](https://ffmpeg.org/) 
为什么说FFmpeg是最强的的音视频处理工具？ 
因为它可以实现几乎所有你想要的功能
- 添加水印 
- 路径
- 剪裁、拼接
- 视频缩略图
- 转码、格式转换
- 压缩
- GIF动图
- 声音处理
- 录屏
- 。。。

**它是一个命令行工具 全平台通用，你可以写脚本进行批处理等等**。 
其实相当多的视频工具、平台、播放都用到了`FFmpeg`或着它的核心库

# 剪切
- `ffmpeg -i test.avi -c:v libx264 -ss 00:00:03 -t 00:00:05 out.mp4`
- 从第三秒开始剪切，长度5秒
- `-ss` 指定其实位置 后面是 `时：分：秒` 
- `-t`	可以是个整数，以秒为单位，也可以是`时：分：秒`
- `-ss`要放在 `-i` 参数后面，这样才能做到分毫不差的剪切
- 也可以使用 `-to` 代替 `-t` 指定一个片段的终止位置
- `-c copy`：直接复制，不经过重新编码（这样比较快）
> 注更多关于 `-c` 参数后面说


# 合并
需要将要合并的文件列举到txt文件中
- `mylist.txt`
```txt
file 'clip1.mp4'
file 'clip2.mp4'
file 'clip3.mp4'
```
`ffmpeg -f concat -i mylist.txt -c copy output.mp4`

# 修改音频
`-af`
`ffmpeg -i test.mp4 -af "volume=1.5" output.mp4` 

- `"volume=1.5"` 音量放大50%
- `"loudnorm=I=-5:LRA=1"` 统一视频的音量
- `"equalizer=f=1000:width_type=h:width=200:g-10"` 添加高通、低通滤波器、甚至均衡器等等
- `-an` 删除音频轨 无声视频
- `-vn` 删除视频轨
- `-sn` 删除字幕
- `-dn` 删除视频流


# 转换音频 
`ffmpeg -i sound.wav sound.mp3`

# 提取视频缩略图
`ffmpeg -i test.mp4 -vf "fps=1/10,scale=-2:720" thumbnail-%03d.jpg`
- `thumbnail-%03d.jpg` ---> `thumbnail-001.jpg` `thumbnail-002.jpg` `......`
- `fps` 表示视频帧率 1/10表示每10秒输出一帧画面 
- `scale`指定输出图像大小

# 给视频添加水印
`ffmpeg -i test.mp4 -i cat.jpg -fitter_complex "overlay:=100:100" output.mp4`
- `overlay`用于将水印叠加在原始视频的上方，后面的两个参数指定了在图像中的位置

# GIF动图的制作
需要指定视频片段 
`ffmpeg -i scrollbar.mov -ss 00:00:01 -t 5 -vf "fps=10,scale=480:-1:flags=lanczos" scrollbar.gif`
 - `-i`输入文件 结尾输出文件
 - `-ss 00:00:01 -t 5` 开始时间持续时长
 - `fps=10`每秒渲染10帧 
 - `scale=480:-1`缩放视频宽度为 480
 - `flags=lanczos`指定使用Lanczos算法进行缩放，Lanczos是一种高质量的缩放算法，用于保持图像细节的清晰度。

GIF转Webp
`ffmpeg -i heap.gif heap.webp`

# 视频压缩

## 视频压缩原理

关于视频压缩主要从三个方面着手
1. 调整视频编码格式，使用更高的压缩算法
2. 降低分辨率和帧数
3. 降低码率

关于码率你可能比较萌，更多建议了解一下[视频格式压缩](https://blog.warmplace.cn/post/video)

## 案例
案例1： 
`ffmpeg -i 人性与管理中.mp4 -c:v libx264 -crf 32 2.人性与管理.mp4`
![image.png](https://blog.warmplace.cn/static/img/b6c134abbb4d0bd7df0c070aeaff6f40.image.webp)

参数讲解
- `-i` 			输入文件
- `-c:v libx264`	指定编码为 H264
- `-crf [number]`	控制图像质量；取值范围 0 - 51，值越大代表图像质量越差，0为无损压缩； 实际常用的取值为 19-28
- `-preset` 指定编码器 默认是 `medium` ，上述案例就是用的normal, 有 fast/slow 等等，越快质量越大 越慢质量越小

案例2： 
`ffmpeg -i 24.mov -ss 00:00:00 -vf "fps=10,scale=1024:-1:flags=lanczos" 24.gif`

补充参数讲解
- `--ss` 开始时间 可省略表示 从视频开始
- `-t` 结束时间 可以是 秒（数字）也可以是`时：分：秒`， 省略表示视频结束
- `fps=10` 一秒内有10帧画面，
- `scale=1024:-1` 缩放为宽度1024，高度自适应
- `flags=lanczos` 指定使用 `Lanczos` 算法

# API不完全笔记

## 指定编码器 -c：
- `-c:v`：指定视频编码器
- `-c:a`：指定音频编码器
- `-i`：指定输入文件
- `-an`：去除音频流
- `-vn`： 去除视频流
- `-preset`：指定输出的视频质量，会影响文件的生成速度
- `-y`：不经过确认，输出时直接覆盖同名文件。

## 指定编码（压缩）
- `-preset`参数`ffmpeg -i test.avi -c:v libx264 -preset xxx out.mp4`
- xxx取值如下
- `ultrafast` 拥有最快的编码速度 但同时会产生一个较大的文件
- `superfast`
- `veryfast`
- `faster`
- `fast`
- `medium` 默认
- `slow`
- `slower`
- `veryslow`	虽然速度很慢，但生成的文件较小


## 压缩图像质量
- `-crf`参数 （constant rate factor） 他是用来控制图像质量的
- `ffmpeg -i test.avi -c:v libx264 -crf number　out.mp4`
- `number` 取值范围 0 - 51
- 这个值越大代表图像质量越差 0无损压缩 51最差质量
- 实际使用中最长用到的是 19-28
![image.png](https://blog.warmplace.cn/static/img/fd1ca2b2115e44b7bf2d10448e96be87.image.webp)

## 指定过滤器`-vf`

- 修改尺寸 旋转 增加滤镜等等，可以指定一系列的过滤器
- ![image.png](https://blog.warmplace.cn/static/img/e7be26b47b73001c0992f402aaa82c52.image.webp)
- `-vf "scale=1024:576"` 缩放为宽度1024，像素高度576像素
- `-vf "scale=1024:-1"` 缩放为宽度1024，高度自适应
- `-vf "scale=-1:720p"`	将视频转换为 720p
- 旋转视频可以使用另一个过滤器 `transpose=number`
- `number`取值 `0`-`7` 
 - `1` 顺时针旋转90度
 - `2` 逆时针旋转90度
- 当然不同的过滤器可以相互组合，比如先缩放再旋转 `-vf "scale=256:256,transpose=1"`
- 裁剪视频中的某一块区域 `-vf "crop=w:h:x:y"` 四个数字分别代表宽、高、左上角x y坐标
- 也可以是表达式 `-vf "crop=iw/3:ih/3"` 转换为1/3原始视频的宽度和高度, `iw` 是 `input width`的缩写, `ih`你懂的

FFmpeg实用技巧

# 视频格式
常见的视频格式有`MKV` `MP4` `AVI` `RMVB`

## 一些容器格式
- MKV
 - 优点：“肚量大”，支持各种编码 多音轨 多字幕
 - 缺点：`Premiere`等剪辑软件不支持`mkv`
 - <img src='https://blog.warmplace.cn/static/img/af685dc23eac2a710aea49f12f993c7a.image.webp' width=200>
- mp4 
 - 对剪辑软件比较友好
 - 缺点支持的编码格式有限
- webm
 - 支持`vp9`、`opus`等编码，`youtube`的在线格式之一
- `flv` 通常是`H.264+ACC`编码，国内在线视频网站常用的格式


![image.png](https://blog.warmplace.cn/static/img/176232a1c7d5b4624ccb853df439dda4.image.webp)


## 编码标准与编码器
不同的编码格式对视频质量和压缩率有很大的影响 
对于`mp4`使用最广泛的视频编码格式是`H264` `FFmpeg`默认选择的就是它 
- `H.264`标准
 - `x264 Encoder` 	纯`CPU`编码
 - `h264_nvnev` 	使用`nvidia`显卡编码
 - `h264_qsv`		使用`intel`核显编码
- `H.265`标准
- `VP9`

相对于`H.264`，`H.265`和`VP9`有着更高的压缩率，但考虑硬件支持度、编码效率、使用许可等限制，目前应用最广泛的视频编码后依然还是`H264`。如B站上的绝大多数视频都是用`H264`编码的

TODO 为什么压缩算法受限于显卡支持？

# 如何压缩视频？
-- 既要压缩文件大小，又要肉眼看不出来画质的变化 
压缩视频主要从三个方便下手 **分辨率** **帧率** **码率** 
先来说结论

- 降低分辨率
- 降低帧率
- 使用更高级的算法进行图片编码和视频编码

## 1.使用更高级算法
 - `HEIF`拍摄的照片，保持同样质量的前提下，比常用的`JPEG`格式的图片体积小很多
 - 使用`HEVC（H265）`拍摄和压制的视频，在同样质量的前提下，也比传统的`H.264`编码的体积更小
 - 压缩越多所消耗的算力也要更多，也就有了兼容性问题
 - ![image.png](https://blog.warmplace.cn/static/img/e5fffa3687a369c6988039552283c61d.image.webp)

## 2. 降低分辨率和帧率

![image.png](https://blog.warmplace.cn/static/img/e9237a93905cea5fb252c98b407a6d9a.image.webp)

分辨率

![image.png](https://blog.warmplace.cn/static/img/34b7ca85f4c856c3d42cd77c90f8c45f.image.webp)
- 分辨率越大占用磁盘空间越大
- 帧率越大占用磁盘空间越大

<img src='https://blog.warmplace.cn/static/img/c4924554f4c1fbe857d9604c38e136cb.image.webp' width=400>

分辨率帧率能调整的幅度有限 
一般分辨率不小于720P 否者视频不清晰 
帧率不小于24帧否则会感到卡顿

## 3. 降低码率
1. 视频中通常相邻的图片相似度很高，为了更好的压缩，只存储关键帧的完整内容，其它帧只记录与关键帧的差异。
2. 码率是指单位时间视频中关键帧的数量
 
码率一般要通过播放器才能看到 
<img src='https://blog.warmplace.cn/static/img/c75e763f693a63947092c49f721fdb1a.image.webp' width=200>
<img src='https://blog.warmplace.cn/static/img/3eaae5810649ba44eeccac5f127afdf3.image.webp' width=400>

通常来说码率越高画质越清晰，但是有一个临界值 

![image.png](https://blog.warmplace.cn/static/img/d2026acb15bb8b993d9f59172634fe9a.image.webp)

那么码率设置到多少合适呢？可以参考一些视频网站 

![image.png](https://blog.warmplace.cn/static/img/30d758f67764bb7c637e37d70d95f52c.image.webp)

用手机录制的1080P 码率可能达到23Mps，这也是为什么手机拍摄的视频都很大

推荐视频码率 1080P 大于6Mbps 4K 大于20Mbps

注意：码率只能从高到低压缩

字节换换算成比特 $1MB = 8Mb$

1920*1080的图片未压缩大小为 5.9MB

![image.png](https://blog.warmplace.cn/static/img/dc62d3237698594b749d1e79a41d9d4a.image.webp)

如果还想压缩可以选择更改视频编码方式

根据视频大小和时长是可以计算出码率 
$视频大小/时长（秒）*8$

码率是什么？

单位时间内视频所包含的数据信息

码率高就代表视频里给算法还原的关键帧图片数量多质量好，相应的是视频的质量好文件质量也更大，**压缩视频就是降低码率**

![image.png](https://blog.warmplace.cn/static/img/5aa69e9590e7512155b2f7e1c5f7d681.image.webp)

## TODO 

同样的码率 是 1080P的画质更好 还是720P的画质更好？ 
为什么有的视频通过编辑软件导出后，体积反而变得更大了？ 
为什么视频播放的时候清楚，暂停播放的时候就模糊了？ 
为什么有的视频任务静止的时候清晰，动起来就模糊？ 
提升编码时间，可以弥补码率降低带来的质量损失吗？ 
高码率不等于高质量，低码率一定是低质量，为什么？

- 视频编解码IBP帧 [https://zhuanlan.zhihu.com/p/34162672](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbDlWUGxmQ2QtWll3V1BmdDJBZHRkSlBlR1drUXxBQ3Jtc0ttZndWc0Fkbi1TejZSWGVYeTdHcHAyRGoyVGR2RFpjejJXaFNkNFVDTEktWlpmcXVERDA1cF9QV2tmd3hpSmtNQ1NrLXIxckoybW9pbERxYTUxTllHdms5VkdNaE5wbG1aY1FxY0FvdVN3am52SXRIRQ&q=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F34162672&v=0LSHhatwTxM) 
- 你知道H.264和H.265究竟区别在哪吗？[https://www.sohu.com/a/224199309_825275](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbGlKbmNzeWFFRGVYd1lIM2VrRG5FVW9zMG1aUXxBQ3Jtc0tueVdQa0lkNWVJaTNTQ3VSYUNncjBpLUFpOE9vR0ExMWFXaUM1SXZCMzJDeUFNODNpYllWcmJnbUVXRUhtamdWc2NXVjdFU0JDOUZRQ3NETmpXendQdVJuRUFJSlViN21STEZFdG1pY3lJekFCeHpWTQ&q=https%3A%2F%2Fwww.sohu.com%2Fa%2F224199309_825275&v=0LSHhatwTxM) 
- 视频编码码率控制：CBR、VBR和ABR： [https://zhuanlan.zhihu.com/p/189497566](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbVZyRjFmb3o2WFB5MVV4RHJDZXVIZnpSSFlhUXxBQ3Jtc0trejNIRzhQSldpU1JYdG53d0hnSjdvMmdaR3d0YkZDNUJ6OVZELUloQi1GbU14bGRyRHRpT21hUUJxN1pqdjBpYVFUQ0pVMG0wMFpPcjNjUjg3ZnlaWmxmb24zenh1YXJJcWgteHJhbnpRNEtXRjc1bw&q=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F189497566&v=0LSHhatwTxM) 
- 视频音频格式基础知识 [https://vcb-s.nmm-hd.org/Twilight%20C...](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqa2RoOXo1RUpuRHdINVJ4QzVFdmdxR3V4WjRNUXxBQ3Jtc0tscU9CcFRZWlE2aVRGY3ZNalRXY3VaUTRFTHRXb1JVRlcxTnIza2poRVZjSENzZll0dnE0ZVdHNDRLLU5GT1A1emEzNl9xaTVPQzZpcjhpVXNQczY3My14R2hfTnhJOTF3WGhpZEhHYV9obi1MLW9hTQ&q=https%3A%2F%2Fvcb-s.nmm-hd.org%2FTwilight%2520Council%2F&v=0LSHhatwTxM) 
- 视频码率对视频质量有何影响？画面质量一定和码率成正比吗？ [https://www.bilibili.com/read/cv12243628](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbV9ZT3BXV2IzQ09EZjQtdE5XTDBGN0ljQU9OZ3xBQ3Jtc0tsUjJHQTFYQ3Q3TTRQQjA2OXpTc0hJLXFsYThqV1ZvSWNqcTFrSS1WbU5mbkdMNkd1RlJjWkRvdWxYR0hUdkhlckFWZDZXd2RVQnNnNnVkT3EtY2Y2QjFweDUxay1YSHJ4QlhGNnFhOXhUMi1rMTVRWQ&q=https%3A%2F%2Fwww.bilibili.com%2Fread%2Fcv12243628&v=0LSHhatwTxM) 
- 简单整理一下x264参数 [https://www.bilibili.com/read/cv49107...](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbEt0MHUxTDdBWl91VGN0Nm9rNm9OdnRjd091d3xBQ3Jtc0ttUHdDRlIyUldkRXlhc2xvZk9tTVMtbk8tOUJLaHZfQkdxajV2cjFoeXg4bm9qbXFmZGN3eTZLUnkyREY3RkR0OFE1Z3c3R1cxV1h3WkVpVHFVOTVaZ19CbTNfeExCSVdCTl95UUlhQ0MzdUFVLU81dw&q=https%3A%2F%2Fwww.bilibili.com%2Fread%2Fcv4910766%3Fspm_id_from%3D333.999.0.0&v=0LSHhatwTxM) 
- 视音频编解码技术零基础学习方法 [https://blog.csdn.net/leixiaohua1020/...](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbjBDSW13bEFsRy1VeF9pYXJ4R21yS3JINmRKd3xBQ3Jtc0ttNUF2U0FqTzMyaTlNSmxNOWVQbm5XTUJIaWE5LVFTVGRySE5FZ215d1h1MEFNYU12MU5pTWplRER6UE1MYzhINTB1dDlUb21IekMtYWR6a25kRkNfalJSMUM0RkgtU2g0LVFXOUdGXzV1TnM0bmU1aw&q=https%3A%2F%2Fblog.csdn.net%2Fleixiaohua1020%2Farticle%2Fdetails%2F18893769&v=0LSHhatwTxM) 
- 关于影片压制的视频码率配置参数的小结 [https://www.bilibili.com/read/cv13143006](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbXA5enpwbGZmUE4zOVZVUmtUQTAtLVlXRllJQXxBQ3Jtc0trVUxzdm51ZFpLU1lLa2d1bW1NR2RuWFBDV3ZicmtQSFNEUkRjaFE5OGdCV09Tcm5jRHBWbG1hMTAxbEJkQXBtUlY2ZWV0Tm10dEZPMXM2UDRjb2hmbEFXcFhGZWRHSkl4VE80NWNNWFA0RXEwcUI1UQ&q=https%3A%2F%2Fwww.bilibili.com%2Fread%2Fcv13143006&v=0LSHhatwTxM) 
- IP 视频的比特率控制 [https://www.axis.com/filessaleswhite_...](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqazB5cGp6SFh2aDVXblA5RDFNN0ZFc0NMbGtZQXxBQ3Jtc0trQVJ1SWUzWVhZeFlrUGRNNnVSMWF6a190blFheVRpdUdSZ2FveHQyT1BMTU9xZGQ2V2V0NTUwXzZyeC1DY0xPb1NwRE03YnpxTzhNU3c3R2hjaU41QlgwdVZpZW56RDNUSEZWSEx4X2ktQ2dqeEJsOA&q=https%3A%2F%2Fwww.axis.com%2Ffilessaleswhite_paper_bitrate_control_for_ip_video_zh_2109.pdf&v=0LSHhatwTxM)
- JPEG压缩原理与DCT离散余弦变换 [https://blog.csdn.net/newchenxf/artic...](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbDE4aGhJeURoVmRGT0IyV2pfRDFVMmlSb2lrQXxBQ3Jtc0tscUhVY0p2R1YxeWdFbEF1c0RLTGlpcUlHMk9hdFVLdzlfd1NMUG56amJiTWstMnpZMm1UU2p5bVZJT1pEMEVEWXVGZV9PbGZFSHdycDdURTVENC1QR28zR0dpak9aZWxCNzlfTG05dEk4cW1qRnBBUQ&q=https%3A%2F%2Fblog.csdn.net%2Fnewchenxf%2Farticle%2Fdetails%2F51719597&v=0LSHhatwTxM)

浅谈视频格式与压缩

微前端框架qiankun

本文处于草稿状态， 初步介绍了Vite的架构思路， 后续有时间还会深入研究



# 为什么选Vite
[官方文档](https://cn.vitejs.dev/guide/why.html#the-problems)
## 传统构建工具的问题
- 随着发展构建越来越大的大型应用，`JS`代码指数增长，`webpack`、`rollup`还是存在一些问题（启动慢、热替换慢）
- `Vite`宗旨： 利用生态系统的新进展解决解决上述问题。

## Vite的解决方案
1. 对于启动缓慢的解决
- 将模块区分为依赖和源码两部分， 使用**esbuild预构建**，它比原生JS构建快10-100倍
- 源码 则基于ESM特性懒解析，实际上浏览器也接管了打包部分工作

2. 缓慢更新的解决方案
- 模块热替换是在原生ESM上执行的
- 充分利用协商缓存（源码）和强缓存（依赖）

## 为什么ESBuild快？
![image.png](https://blog.warmplace.cn/static/img/131b8805ea939ec7542470fd42f82533.image.webp)
- 使用**Go语言编写**的，**可以直接转换成机器代码，无需经过字节码**
- ESBuild可以充分利用**CPU的多内核**，尽可能让他们饱和运行
- ESBuild的所有内容都是**从零开始编写**的，而不是使用第三方，所以**一开始就考虑了各种性能问题**

:::tip{title=注意}
vite并没有说它打包快， 因为生产环境它使用的是`rollup`
:::

# Vite打包方案
为什么生产环境仍需要打包 
ESM大量碎片代码的网络往返，致使其效率仍然低下， 还是需要对代码进行 `tree-sharking`、懒加载、`chunk分割` 以获得更好的缓存

为什么不使用ESbuild打包？
`Vite`的插件与使用`esbuild`作为打包起并不兼容。尽管 `esbuild` 速度更快，但 `Vite` 采用了 `Rollup` **灵活的插件 API 和基础建设**，这对 `Vite` 在生态中的成功起到了重要作用。

<img width=300 src='https://blog.warmplace.cn/static/img/b80bd7859fc9f49519057818a164fce6.image.webp'>

:::tip{title=注意}
由于开发模式和生产模式使用不同的工具 所以Vite要兼容一套配置在开发环境和生产环境保持一致
:::

**Vite的组成**
`vite`由两部分组成
1. 一个开发服务器，它基于原生`ESM`提供了丰富的内置功能，`HMR`的速度非常快速
2. 一套构建指令，开发环境使用esbuild，生产使用`rollup`打包，并且它是预配置的，可以输出生产环境优化过的静态资源

# Vite的简单使用
Vite 意在提供**开箱即用的配置**，同时他的插件API和JavaScript API带来了高度的可扩展性，并有完整的类型支持。

- `npm create vite@latest`
- <img width=300 src='https://blog.warmplace.cn/static/img/54e4203b41533d48c0caca77996a650b.image.webp'>
- `cd vite-project && npm i`
- `npm run dev`


## 零配置
- 无需任何配置即可支持 `TS`/`图片` 的支持
- 无需任何配置即可支持 CSS相关 `less` `scss` (但需要安装对应的开发依赖)
- 无需任何配置即可支持`postcss`
- 无需任何配置即可支持`jsx` (react/react-dom是开发依赖)
- 需要配置`plugin` `vitejs-plugin-vue2` 支持`vue2`
- 需要配置`plugin` `@vitejs/plugin-vue` 支持`vue3`

[以上案例点击这里](https://github.com/guojingwen/frontend-project/tree/main/vite_study/vite-project)

**命令** 
`"dev": "vite"`, 
`"build": "tsc && vite build"`, 
`"preview": "vite preview"` 生产模式预览

:::tip{title=思考：vite有哪些缺点？}
- 由于开发不模式没有babel补丁，对于复线生产兼容性问题比较麻烦， 需要 使用 `preview`模式
- 开发环境中，如果我们修改了node_modules下面的文件如果不生效，需要情况浏览器缓存或勾选disable-catch
:::

## vite的配置项和 webpack很像
todo

# 参考资料
- 官网
- [Vite的前世今生](https://juejin.cn/post/7240740177449435191)