HTML5 video播放画面存在锯齿感，是否缺少抗锯齿？

• 视频格式与声明类型不匹配：你当前使用.mov格式的视频文件，但在<source>标签的type属性里声明为video/mp4，浏览器解码时出现匹配错误，无法调用GPU硬解，只能使用CPU软解，解码效率低下就会出现卡顿、画面伪影、锯齿等问题。
• 容器格式兼容性差：.mov是苹果开发的视频容器，多数Windows平台浏览器默认没有对应的原生解码器支持，解码时会出现额外的性能损耗，画质表现远差于本地播放器。
• 缩放渲染算法问题：你给video标签设置了width="100%"，如果视频原始分辨率和页面实际渲染尺寸差值过大，浏览器默认的低性能缩放算法不会开启抗锯齿，就会出现边缘锯齿、色块等伪影。

1. 转码调整视频格式
   将原.mov视频转码为H.264编码的MP4格式，转码时选择合理的比特率（1080p分辨率选8-12Mbps即可），避免过度压缩损失画质。修改<source>标签对应属性：

<video width="100%" class="videoStyle" autoplay muted loop>
    <source src="video/01-02.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

2. 新增CSS优化渲染性能与画质
   给.videoStyle类添加如下属性，强制调用GPU硬解、使用高质量缩放算法：

.videoStyle {
    /* 开启GPU加速，提升解码效率 */
    transform: translateZ(0);
    backface-visibility: hidden;
    /* 使用高质量缩放渲染，开启抗锯齿 */
    image-rendering: optimizeQuality;
}

3. 额外优化建议
   如果视频原始分辨率高于2K，建议压缩到1080p/2K分辨率，过高的分辨率会提升解码负担，即使硬解也可能出现掉帧卡顿的问题。检查是否给video标签添加了额外的滤镜、变形属性，这类属性也可能影响渲染画质。

内容的提问来源于stack exchange，提问作者Krellzar