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

引言视频编解码器是 Web 多媒体开发中最核心也最复杂的技术领域之一。未压缩的视频数据量巨大到令人难以想象一帧全高清视频约8.3MB每秒 30 帧意味着每秒约249MB的数据量。一个两小时的电影未经压缩将占用约1.79TB的存储空间。视频编解码器存在的意义就是将如此庞大的数据压缩到可存储和可网络传输的大小。编解码器通过复杂的算法分析视频帧内和帧间的信息冗余在尽可能保持视觉质量的前提下大幅减少数据量。理解不同编解码器的特性、优缺点和兼容性是每个前端开发者构建高质量视频体验的必备知识。核心概念影响编码视频的关键因素在选择和使用视频编解码器之前必须理解影响编码输出质量和大小的关键因素。这些因素分为两大类源视频的固有特性和编解码器的配置参数。源视频的特性对编码结果有着决定性影响。高颜色位深度能提供更平滑的色彩过渡避免色带现象产生。高帧率让运动画面更加流畅但也会增加文件体积。画面中的运动量越大帧间压缩的效率就越低最终文件也会越大。以下代码展示了在 HTML 中如何根据不同的视频源特性选择合适的编码版本videocontrolswidth1920height1080sourcesrcvideo-high-framerate.webmtypevideo/webm; codecsvp9,opusmedia(min-width: 1200px)/sourcesrcvideo-standard.mp4typevideo/mp4; codecsavc1.4D401E,mp4a.40.2/p你的浏览器不支持视频播放。/p/video编解码器的配置同样至关重要。比特率直接影响视频质量和文件大小更高的比特率意味着更好的画质和更大的文件。质量设置决定了编码器在压缩过程中的激进程度。有损压缩会产生各类视觉伪影而无损压缩虽然保持完美画质但文件体积仍然很大。videocontrolspreloadmetadataposterpreview.jpgsourcesrchigh-bitrate.mp4typevideo/mp4; codecsavc1.640028,mp4a.40.2label高质量 1080p/sourcesrcmedium-bitrate.mp4typevideo/mp4; codecsavc1.4D401E,mp4a.40.2label标准质量 720p//video使用 label 属性可以为每个源添加描述性标签帮助用户或 JavaScript 代码识别不同质量的版本。压缩伪影识别视频中的视觉缺陷有损视频压缩不可避免地会产生各种视觉伪影。理解这些伪影有助于在编码时做出正确的权衡决策。空间伪影中最常见的是摩尔纹和楼梯效果。摩尔纹出现在规则图案与编码器采样网格产生干涉时在砖墙、织物等纹理表面形成波纹状扭曲。楼梯效果让本应平滑的对角线呈现出阶梯状锯齿。figurevideocontrolswidth800sourcesrcartifacts-example.webmtypevideo/webm//videofigcaption在高压缩比下视频中的文字区域会出现明显的模糊和振铃效应。/figcaption/figure时间伪影包括运动补偿块边界效应和飞蚊噪声。当相邻帧差异过大导致运动补偿失效时编码器会在块边界产生明显的边缘效应。飞蚊噪声表现为在物体边缘周围闪烁的模糊颗粒在 MPEG 系列编解码器中尤为常见。色彩相关伪影包括分色和轮廓效应。过度压缩会导致渐变区域失去平滑过渡出现色块或色带。videocontrolswidth1280height720sourcesrcgradient-scene.mp4typevideo/mp4; codecsavc1.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 位色深和更灵活的色度配置。videocontrolswidth3840height2160sourcesrc8k-video-av1.webmtypevideo/webm; codecsav01.0.17M.10.0.110.09.16.09.0/sourcesrc8k-video-vp9.webmtypevideo/webm; codecsvp9/sourcesrc8k-video-h264.mp4typevideo/mp4; codecsavc1.640033,mp4a.40.2//video在这个 8K 视频的例子中AV1 的 codecs 参数详细描述了编码配置。av01 标识 AV1 编解码器0 表示 Main 配置文件17M 表示级别 6.3 的主要层级10 表示每分量 10 位色深0 表示彩色模式110 表示 4:4:4 色度采样后续数字定义了色彩空间和传输特性。AV1 目前的主要限制是编码速度较慢和硬件解码支持尚在发展中。使用它时务必提供回退方案。videocontrolswidth1920height1080sourcesrcfilm.av1.mp4typevideo/mp4; codecsav01.0.13M.08/sourcesrcfilm.hevc.mp4typevideo/mp4; codecshvc1.1.6.L93.90/sourcesrcfilm.avc.mp4typevideo/mp4; codecsavc1.640028,mp4a.40.2//videoAVC (H.264)兼容性最强的视频编解码器H.264 是当今使用最广泛的视频编解码器从蓝光光盘到在线流媒体都能看到它的身影。它基于运动补偿和离散余弦变换提供多种配置文件以适应不同场景。Constrained Baseline Profile 设计用于视频会议和移动设备在低带宽下表现良好。Main Profile 用于标清数字电视广播。High Profile 提供最佳压缩效率是蓝光和流媒体视频的标准选择。videocontrolswidth1920height1080sourcesrcmovie-high.mp4typevideo/mp4; codecsavc1.640028,mp4a.40.2/sourcesrcmovie-main.mp4typevideo/mp4; codecsavc1.4D401E,mp4a.40.2/sourcesrcmovie-baseline.mp4typevideo/mp4; codecsavc1.42E01E,mp4a.40.2//videocodecs 参数中的 avc1.640028 描述了 H.264 编码的详细配置。avc1 表示 H.264 编解码器640028 是十六进制编码表示 High Profile (0x64) 和 Level 4.0 (0x28)。mp4a.40.2 则表示 AAC-LC 音频编码。H.264 的广泛硬件支持是其最大优势。几乎所有的智能手机、平板、电脑和智能电视都有 H.264 硬解码器这使得视频播放功耗极低。videocontrolswidth640height360postermobile-preview.jpgpreloadmetadatasourcesrcvideo-avc-baseline.mp4typevideo/mp4; codecsavc1.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 蓝光和高端流媒体的标准选择。videocontrolswidth3840height2160sourcesrc4k-hdr.hevc.mp4typevideo/mp4; codecshvc1.2.4.L153.B0/sourcesrc4k-hdr.av1.mp4typevideo/mp4; codecsav01.0.15M.10.0.110.09.16.09.0//videoHEVC 的 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 的支持则更加谨慎和受限。videocontrolswidth1920height1080sourcesrcvideo.hevc.mp4typevideo/mp4; codecshvc1.1.6.L120.90/sourcesrcvideo.avc.mp4typevideo/mp4; codecsavc1.4D4028,mp4a.40.2/p如果视频无法播放说明你的浏览器不支持所用编解码器。 请尝试下载ahrefvideo.avc.mp4H.264 版本/a。/p/videoVP8 与 VP9Google 的开放编解码器方案VP8 和 VP9 是 Google 主导开发的开放视频编解码器完全免版税。VP8 于 2010 年开源发布VP9 在 2013 年作为其继任者推出。VP8 支持 8 位色深和 4:2:0 色度采样压缩效率与 H.264 相当。它的独特功能是支持 Alpha 通道允许视频具有透明背景这对 Web 设计非常有用。videocontrolswidth640height360autoplaymutedloopsourcesrcanimated-logo.webmtypevideo/webm; codecsvp8,vorbis/sourcesrcanimated-logo.mp4typevideo/mp4; codecsavc1.4D401E,mp4a.40.2//videoVP9 在 VP8 的基础上大幅提升压缩效率与 HEVC 相当。它支持从 Profile 08 位、4:2:0到 Profile 312 位、4:4:4的多个配置级别还支持 HDR10 和 HLG 高动态范围标准。videocontrolswidth3840height2160sourcesrcfilm-vp9-hdr.webmtypevideo/webm; codecsvp09.02.51.10.01.09.16.09.01/sourcesrcfilm-vp9-sdr.webmtypevideo/webm; codecsvp09.00.51.08//videoVP9 的 codecs 参数结构清晰。vp09 是编解码器标识02 表示 Profile 251 表示 Level 5.110 表示 10 位色深。后续的数字定义色彩空间、传输特性和矩阵系数等参数。VP9 在 YouTube 和 Netflix 等流媒体平台上广泛使用是 WebM 容器的标准视频编码。Chrome、Firefox 和 Edge 都有良好的支持Safari 从 14 版本开始也提供了支持。videocontrolswidth1920height1080sourcesrcvideo.vp9.webmtypevideo/webm; codecsvp9,opus/sourcesrcvideo.vp8.webmtypevideo/webm; codecsvp8,vorbis/sourcesrcvideo.avc.mp4typevideo/mp4; codecsavc1.4D401E,mp4a.40.2//video优先使用 VP9 配合 Opus 音频VP8 配合 Vorbis 作为 WebM 容器内的回退最终使用 H.264 配合 AAC 的 MP4 兜底这种三层回退策略能覆盖几乎所有现代浏览器。Theora 与旧版编解码器Theora 由 Xiph.org 基金会开发是早期的开放视频编解码器。它在历史上扮演了重要角色是第一个为 Web 提供免专利视频播放方案的编解码器。然而Theora 仅支持 8 位色深压缩效率低于现代编解码器且只能在 Ogg 容器中使用。videocontrolswidth640height360sourcesrcarchive-video.ogvtypevideo/ogg; codecstheora,vorbis/sourcesrcarchive-video.webmtypevideo/webm; codecsvp8,vorbis/p此存档视频可能需要支持 Ogg Theora 的浏览器才能播放。/p/videoH.263 和 MPEG-4 Part 2 等更早期的编解码器在现代 Web 开发中几乎没有使用场景。它们只在需要支持非常老旧设备时才可能被考虑。主流浏览器对这些格式的原生支持极其有限。videocontrolswidth352height288sourcesrclegacy-video.3gptypevideo/3gpp; codecsmp4v.20.9,samr/sourcesrclegacy-video.mp4typevideo/mp4; codecsavc1.42E01E,mp4a.40.2/p旧格式视频已转换为兼容版本建议使用 MP4 版本观看。/p/video对于需要处理历史档案视频的场景建议预先将其转换为现代格式而不是依赖浏览器对旧编解码器的支持。视频编解码器选择策略选择合适的视频编解码器需要在开放标准、压缩效率、硬件支持和浏览器兼容性之间做出权衡。以下是针对不同场景的推荐方案。对于日常网站视频推荐使用 VP9 编码的 WebM 作为首选H.264 编码的 MP4 作为回退。这种组合提供了优秀的压缩效率和完整的浏览器覆盖。videocontrolswidth1920height1080preloadmetadatasourcesrcvideo.vp9.webmtypevideo/webm; codecsvp9,opus/sourcesrcvideo.avc.mp4typevideo/mp4; codecsavc1.4D401E,mp4a.40.2/p你的浏览器不支持视频播放。ahrefvideo.avc.mp4下载视频/a/p/video对于追求极致画质的高质量视频AV1 是最佳选择HEVC 作为高画质回退H.264 确保兼容性。videocontrolswidth3840height2160sourcesrcfilm-av1.webmtypevideo/webm; codecsav01.0.17M.10.0.110.09.16.09.0/sourcesrcfilm-hevc.mp4typevideo/mp4; codecshvc1.2.4.L153.B0/sourcesrcfilm-avc.mp4typevideo/mp4; codecsavc1.640033,mp4a.40.2//video对于使用 MediaStream Recording API 录制视频的场景可以根据需要选择不同质量的编码配置。constkbps1024;constMbpskbps*kbps;constoptions{mimeType:video/webm; codecsav01.2.19H.12.0.000.09.16.09.1, flac,bitsPerSecond:800*Mbps,};constrecordernewMediaRecorder(sourceStream,options);recorder.ondataavailable(event){if(event.dataevent.data.size0){recordedChunks.push(event.data);}};recorder.start(5000);这个示例创建了一个使用 AV1 Professional Profile、12 位色深、4:4:4 色度采样、BT.2100 HDR 色彩空间和 FLAC 无损音频的高质量录制器。800Mbps 的比特率适合本地录制和后期制作但不适合网络传输。总结与最佳实践视频编解码器的选择是一个多目标优化问题。AV1 代表了开放标准的未来压缩效率最高但编码速度慢。H.264 是兼容性之王硬件支持最为广泛。VP9 在开放性和效率之间取得了良好平衡。HEVC 在高端视频领域表现出色但复杂的专利许可阻碍了其 Web 普及。在实际项目中遵循渐进增强策略是最佳实践使用现代编解码器作为首选提供传统编解码器作为回退。使用source元素和准确的 type 属性让浏览器选择支持的最佳版本。理解 codecs 参数的格式能够精确控制编解码器的配置和行为。想要解锁更多HTML 核心标签实战、前端零基础入门干货、开发避坑全指南吗持续关注后续将更新CSS 布局实战、JavaScript 交互基础、全站导航开发等硬核内容带你从新手快速进阶轻松搞定前端开发