Visual LabINTERACTIVE LEARNING
阶段 1 · 信号数字化基础22 分钟

原始媒体有多大:为什么必须压缩?

Bandwidth、Storage、Frame Size 与实时吞吐

计算 1080p、4K 视频和 PCM 音频的原始数据量,建立“压缩不是优化而是前提”的数量级直觉。

LEARNING GOALS

先明确本课目标

1

计算原始视频帧大小

2

从帧大小推导带宽与存储

3

理解压缩比的数量级

MENTAL MODEL · 再建立心智模型

原始媒体像每秒搬运几十到几百张未压缩大图再加多路采样表;编码器的首要任务是把重复信息变成更短的描述。

MINIMAL EXAMPLE

4K60 真的需要多大内存带宽?

原始视频吞吐由每帧有效字节数乘帧率得到。4:2:0 8-bit 平均每像素约 1.5 字节,但实际缓冲还可能因为 stride 对齐更大。

最小例子javascript
const pixels = 3840 * 2160;
const bytesPerFrame = pixels * 1.5; // 8-bit YUV420
const bytesPerSecond = bytesPerFrame * 60;
const gibPerSecond = bytesPerSecond / (1024 ** 3);
  1. 计算像素总数 4K UHD 一帧包含约 829 万亮度像素。
  2. 套用像素格式 YUV420 8-bit 平均每像素约 1.5 字节。
  3. 乘以帧率 60 帧每秒让持续吞吐接近 0.7 GiB/s。

即使不编码,单次读取 4K60 帧就已接近每秒 0.7 GiB;多次拷贝会成倍放大压力。

本课概念
OPTIONAL · 按需查阅完整术语表与概念边界

遇到陌生术语时再展开,不打断主线实验。

展开⌄
LIVE EXPERIMENT · 先获得反馈

边改边运行

浏览器加载后会激活代码编辑器、独立运行环境与实时输出。

本课挑战

输入目标时长和磁盘容量,反推可接受的平均编码码率。

DEEP DIVE · 实验之后

回到原理,解释刚才发生了什么

先用结果建立反馈,再按运行流程、核心原理和知识关系逐层深入。

CORE IDEA

核心讲解

01

视频数据量是乘法增长

宽 × 高 × 每像素字节 × FPS。分辨率边长翻倍会让像素数约变四倍,再提高帧率会继续线性扩大。

02

目标码率反推出压缩比

如果 1080p60 4:2:0 原始流约 1.5 Gbps,而交付码率是 6 Mbps,整体压缩比超过 250:1。

OPTIONAL · 迁移时查阅Web 与原生实现对照

主线实验完成后,再用完整映射处理跨平台或跨 API 迁移。

展开⌄
API COMPARISON

Web 和原生都受内存带宽约束,原生只是更容易看到每一次帧拷贝。

WebGL

播放器必须规划 Packet、Frame、GPU Surface 与音频环形缓冲的数量和所有权。

WebGPU

浏览器尽量隐藏解码表面和拷贝;Canvas 像素读回会突然暴露巨大的数据成本。

性能问题先数清每帧字节数和拷贝次数,再讨论函数级优化。