当前位置：首页 > news >正文

跟着 MDN 学 HTML day_21：（Web 视频编解码器完全指南）

news 2026/5/6 20:09:46

引言

视频编解码器是 Web 多媒体开发中最核心也最复杂的技术领域之一。未压缩的视频数据量巨大到令人难以想象：一帧全高清视频约8.3MB，每秒 30 帧意味着每秒约249MB的数据量。一个两小时的电影未经压缩将占用约1.79TB的存储空间。视频编解码器存在的意义就是将如此庞大的数据压缩到可存储和可网络传输的大小。

编解码器通过复杂的算法分析视频帧内和帧间的信息冗余，在尽可能保持视觉质量的前提下大幅减少数据量。理解不同编解码器的特性、优缺点和兼容性，是每个前端开发者构建高质量视频体验的必备知识。

核心概念：影响编码视频的关键因素

在选择和使用视频编解码器之前，必须理解影响编码输出质量和大小的关键因素。这些因素分为两大类：源视频的固有特性和编解码器的配置参数。

源视频的特性对编码结果有着决定性影响。高颜色位深度能提供更平滑的色彩过渡，避免色带现象产生。高帧率让运动画面更加流畅，但也会增加文件体积。画面中的运动量越大，帧间压缩的效率就越低，最终文件也会越大。

以下代码展示了在 HTML 中如何根据不同的视频源特性选择合适的编码版本：

<videocontrolswidth="1920"height="1080"><sourcesrc="video-high-framerate.webm"type="video/webm; codecs=vp9,opus"media="(min-width: 1200px)"/><sourcesrc="video-standard.mp4"type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"/><p>你的浏览器不支持视频播放。</p></video>

编解码器的配置同样至关重要。比特率直接影响视频质量和文件大小，更高的比特率意味着更好的画质和更大的文件。质量设置决定了编码器在压缩过程中的激进程度。有损压缩会产生各类视觉伪影，而无损压缩虽然保持完美画质但文件体积仍然很大。

<videocontrolspreload="metadata"poster="preview.jpg"><sourcesrc="high-bitrate.mp4"type="video/mp4; codecs=avc1.640028,mp4a.40.2"label="高质量 1080p"/><sourcesrc="medium-bitrate.mp4"type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"label="标准质量 720p"/></video>

使用 label 属性可以为每个源添加描述性标签，帮助用户或 JavaScript 代码识别不同质量的版本。

压缩伪影：识别视频中的视觉缺陷

有损视频压缩不可避免地会产生各种视觉伪影。理解这些伪影有助于在编码时做出正确的权衡决策。

空间伪影中最常见的是摩尔纹和楼梯效果。摩尔纹出现在规则图案与编码器采样网格产生干涉时，在砖墙、织物等纹理表面形成波纹状扭曲。楼梯效果让本应平滑的对角线呈现出阶梯状锯齿。

<figure><videocontrolswidth="800"><sourcesrc="artifacts-example.webm"type="video/webm"/></video><figcaption>在高压缩比下，视频中的文字区域会出现明显的模糊和振铃效应。</figcaption></figure>

时间伪影包括运动补偿块边界效应和飞蚊噪声。当相邻帧差异过大导致运动补偿失效时，编码器会在块边界产生明显的边缘效应。飞蚊噪声表现为在物体边缘周围闪烁的模糊颗粒，在 MPEG 系列编解码器中尤为常见。

色彩相关伪影包括分色和轮廓效应。过度压缩会导致渐变区域失去平滑过渡，出现色块或色带。

<videocontrolswidth="1280"height="720"><sourcesrc="gradient-scene.mp4"type="video/mp4; codecs=avc1.640028,mp4a.40.2"/><p>注意观察天空区域的色彩过渡。在低比特率下，平滑的蓝色渐变 会变成明显的色带，这就是轮廓效应。</p></video>

关键帧是修复伪影的重要机制。周期性地插入完整帧可以重置画面状态，清除累积的压缩误差。

AV1：下一代开放视频编解码器

AV1 由开放媒体联盟开发，是专为互联网设计的免版税视频编解码器。它的压缩效率比 H.265 和 VP9 高出约 30%，比 H.264 高出约 50%。这意味着在相同画质下，AV1 文件只有 H.264 的一半大小。

AV1 提供三个配置文件：Main 支持 8 或 10 位色深和 4:2:0 色度采样，High 增加了 4:4:4 色度采样支持，Professional 则进一步扩展到 12 位色深和更灵活的色度配置。

<videocontrolswidth="3840"height="2160"><sourcesrc="8k-video-av1.webm"type="video/webm; codecs=av01.0.17M.10.0.110.09.16.09.0"/><sourcesrc="8k-video-vp9.webm"type="video/webm; codecs=vp9"/><sourcesrc="8k-video-h264.mp4"type="video/mp4; codecs=avc1.640033,mp4a.40.2"/></video>

在这个 8K 视频的例子中，AV1 的 codecs 参数详细描述了编码配置。av01 标识 AV1 编解码器，0 表示 Main 配置文件，17M 表示级别 6.3 的主要层级，10 表示每分量 10 位色深，0 表示彩色模式，110 表示 4:4:4 色度采样，后续数字定义了色彩空间和传输特性。

AV1 目前的主要限制是编码速度较慢和硬件解码支持尚在发展中。使用它时务必提供回退方案。

<videocontrolswidth="1920"height="1080"><sourcesrc="film.av1.mp4"type="video/mp4; codecs=av01.0.13M.08"/><sourcesrc="film.hevc.mp4"type="video/mp4; codecs=hvc1.1.6.L93.90"/><sourcesrc="film.avc.mp4"type="video/mp4; codecs=avc1.640028,mp4a.40.2"/></video>

AVC (H.264)：兼容性最强的视频编解码器

H.264 是当今使用最广泛的视频编解码器，从蓝光光盘到在线流媒体都能看到它的身影。它基于运动补偿和离散余弦变换，提供多种配置文件以适应不同场景。

Constrained Baseline Profile 设计用于视频会议和移动设备，在低带宽下表现良好。Main Profile 用于标清数字电视广播。High Profile 提供最佳压缩效率，是蓝光和流媒体视频的标准选择。

<videocontrolswidth="1920"height="1080"><sourcesrc="movie-high.mp4"type="video/mp4; codecs=avc1.640028,mp4a.40.2"/><sourcesrc="movie-main.mp4"type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"/><sourcesrc="movie-baseline.mp4"type="video/mp4; codecs=avc1.42E01E,mp4a.40.2"/></video>

codecs 参数中的 avc1.640028 描述了 H.264 编码的详细配置。avc1 表示 H.264 编解码器，640028 是十六进制编码，表示 High Profile (0x64) 和 Level 4.0 (0x28)。mp4a.40.2 则表示 AAC-LC 音频编码。

H.264 的广泛硬件支持是其最大优势。几乎所有的智能手机、平板、电脑和智能电视都有 H.264 硬解码器，这使得视频播放功耗极低。

<videocontrolswidth="640"height="360"poster="mobile-preview.jpg"preload="metadata"><sourcesrc="video-avc-baseline.mp4"type="video/mp4; codecs=avc1.42E01E,mp4a.40.2"/></video>

对于移动端优化，使用 Baseline Profile 配合较低的级别可以确保最大范围的设备兼容性。

HEVC (H.265)：高效视频编码

HEVC 是 H.264 的继任者，目标是在相同画质下将比特率降低一半。它引入了编码树单元等新概念，取代了传统的宏块结构，能够更灵活地处理不同尺寸的图像区域。

HEVC 支持从 128x96 到 8192x4320 的广泛分辨率范围，最高 12 位色深，以及 4:2:0、4:2:2 和 4:4:4 色度采样。它原生支持 HDR 视频，是 4K 蓝光和高端流媒体的标准选择。

<videocontrolswidth="3840"height="2160"><sourcesrc="4k-hdr.hevc.mp4"type="video/mp4; codecs=hvc1.2.4.L153.B0"/><sourcesrc="4k-hdr.av1.mp4"type="video/mp4; codecs=av01.0.15M.10.0.110.09.16.09.0"/></video>

HEVC 的 codecs 参数使用不同的格式。hvc1.2.4.L153.B0 表示 Main 10 Profile (2)、High Tier (4)、Level 5.1 (L153)、10 位色深 (B0)。

HEVC 面临的主要问题是复杂的专利许可。多个专利池对 HEVC 主张权利，许可费用和条款的复杂性阻碍了它在 Web 上的广泛采用。Safari 是 HEVC 的最强支持者，Chrome 和 Firefox 的支持则更加谨慎和受限。

<videocontrolswidth="1920"height="1080"><sourcesrc="video.hevc.mp4"type="video/mp4; codecs=hvc1.1.6.L120.90"/><sourcesrc="video.avc.mp4"type="video/mp4; codecs=avc1.4D4028,mp4a.40.2"/><p>如果视频无法播放，说明你的浏览器不支持所用编解码器。 请尝试下载<ahref="video.avc.mp4">H.264 版本</a>。</p></video>

VP8 与 VP9：Google 的开放编解码器方案

VP8 和 VP9 是 Google 主导开发的开放视频编解码器，完全免版税。VP8 于 2010 年开源发布，VP9 在 2013 年作为其继任者推出。

VP8 支持 8 位色深和 4:2:0 色度采样，压缩效率与 H.264 相当。它的独特功能是支持 Alpha 通道，允许视频具有透明背景，这对 Web 设计非常有用。

<videocontrolswidth="640"height="360"autoplaymutedloop><sourcesrc="animated-logo.webm"type="video/webm; codecs=vp8,vorbis"/><sourcesrc="animated-logo.mp4"type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"/></video>

VP9 在 VP8 的基础上大幅提升，压缩效率与 HEVC 相当。它支持从 Profile 0（8 位、4:2:0）到 Profile 3（12 位、4:4:4）的多个配置级别，还支持 HDR10+ 和 HLG 高动态范围标准。

<videocontrolswidth="3840"height="2160"><sourcesrc="film-vp9-hdr.webm"type="video/webm; codecs=vp09.02.51.10.01.09.16.09.01"/><sourcesrc="film-vp9-sdr.webm"type="video/webm; codecs=vp09.00.51.08"/></video>

VP9 的 codecs 参数结构清晰。vp09 是编解码器标识，02 表示 Profile 2，51 表示 Level 5.1，10 表示 10 位色深。后续的数字定义色彩空间、传输特性和矩阵系数等参数。

VP9 在 YouTube 和 Netflix 等流媒体平台上广泛使用，是 WebM 容器的标准视频编码。Chrome、Firefox 和 Edge 都有良好的支持，Safari 从 14 版本开始也提供了支持。

<videocontrolswidth="1920"height="1080"><sourcesrc="video.vp9.webm"type="video/webm; codecs=vp9,opus"/><sourcesrc="video.vp8.webm"type="video/webm; codecs=vp8,vorbis"/><sourcesrc="video.avc.mp4"type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"/></video>

优先使用 VP9 配合 Opus 音频，VP8 配合 Vorbis 作为 WebM 容器内的回退，最终使用 H.264 配合 AAC 的 MP4 兜底，这种三层回退策略能覆盖几乎所有现代浏览器。

Theora 与旧版编解码器

Theora 由 Xiph.org 基金会开发，是早期的开放视频编解码器。它在历史上扮演了重要角色，是第一个为 Web 提供免专利视频播放方案的编解码器。然而，Theora 仅支持 8 位色深，压缩效率低于现代编解码器，且只能在 Ogg 容器中使用。

<videocontrolswidth="640"height="360"><sourcesrc="archive-video.ogv"type="video/ogg; codecs=theora,vorbis"/><sourcesrc="archive-video.webm"type="video/webm; codecs=vp8,vorbis"/><p>此存档视频可能需要支持 Ogg Theora 的浏览器才能播放。</p></video>

H.263 和 MPEG-4 Part 2 等更早期的编解码器在现代 Web 开发中几乎没有使用场景。它们只在需要支持非常老旧设备时才可能被考虑。主流浏览器对这些格式的原生支持极其有限。

<videocontrolswidth="352"height="288"><sourcesrc="legacy-video.3gp"type="video/3gpp; codecs=mp4v.20.9,samr"/><sourcesrc="legacy-video.mp4"type="video/mp4; codecs=avc1.42E01E,mp4a.40.2"/><p>旧格式视频已转换为兼容版本，建议使用 MP4 版本观看。</p></video>

对于需要处理历史档案视频的场景，建议预先将其转换为现代格式，而不是依赖浏览器对旧编解码器的支持。

视频编解码器选择策略

选择合适的视频编解码器需要在开放标准、压缩效率、硬件支持和浏览器兼容性之间做出权衡。以下是针对不同场景的推荐方案。

对于日常网站视频，推荐使用 VP9 编码的 WebM 作为首选，H.264 编码的 MP4 作为回退。这种组合提供了优秀的压缩效率和完整的浏览器覆盖。

<videocontrolswidth="1920"height="1080"preload="metadata"><sourcesrc="video.vp9.webm"type="video/webm; codecs=vp9,opus"/><sourcesrc="video.avc.mp4"type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"/><p>你的浏览器不支持视频播放。<ahref="video.avc.mp4">下载视频</a></p></video>

对于追求极致画质的高质量视频，AV1 是最佳选择，HEVC 作为高画质回退，H.264 确保兼容性。

<videocontrolswidth="3840"height="2160"><sourcesrc="film-av1.webm"type="video/webm; codecs=av01.0.17M.10.0.110.09.16.09.0"/><sourcesrc="film-hevc.mp4"type="video/mp4; codecs=hvc1.2.4.L153.B0"/><sourcesrc="film-avc.mp4"type="video/mp4; codecs=avc1.640033,mp4a.40.2"/></video>

对于使用 MediaStream Recording API 录制视频的场景，可以根据需要选择不同质量的编码配置。

constkbps=1024;constMbps=kbps*kbps;constoptions={mimeType:'video/webm; codecs="av01.2.19H.12.0.000.09.16.09.1, flac"',bitsPerSecond:800*Mbps,};constrecorder=newMediaRecorder(sourceStream,options);recorder.ondataavailable=(event)=>{if(event.data&&event.data.size>0){recordedChunks.push(event.data);}};recorder.start(5000);