直接用 filter 样式作用于 video 元素可实时调整色彩和黑白效果，无需 JavaScript 帧处理，性能高、写法简洁；常用 grayscale() 和 brightness()、contrast()、saturate()、hue-rotate() 等组合函数，需完整重写 style.filter 值，建议封装更新函数，并注意 iOS Safari 兼容性及字幕、控件样式独立处理。
直接用 filter 样式作用于 <video> 元素即可实时调整色彩和黑白效果，无需 JavaScript 帧处理，性能高、写法简洁。
基础黑白与色彩控制
最常用的是 grayscale() 和组合调色函数：
-
grayscale(1)或grayscale(100%)：完全转为黑白 -
grayscale(0.5)：半灰度，保留部分色彩 - 搭配使用：
filter: grayscale(1) brightness(0.95) contrast(1.05);
其他实用函数包括：brightness()（调明暗）、contrast()（调对比）、saturate()（控饱和）、hue-rotate()（偏色相）。所有函数可空格分隔连写，顺序不影响最终视觉结果。
动态切换要覆盖整串值
JavaScript 修改时不能只拼接单个函数，否则会覆盖已有效果：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
video.style.filter += ' grayscale(1)'; - ✅ 正确写法：
video.style.filter = 'grayscale(1) brightness(0.9)';
建议封装一个更新函数，接收对象参数并生成完整字符串，例如：updateFilter({ grayscale: 1, brightness: 0.9 })。
兼容性与降级处理
多数现代浏览器支持良好，但需注意：
- iOS Safari 15.4+ 才稳定支持
blur()作用于<video>；旧版可用@supports (filter: blur(1px))检测后降级 - 部分 WebView 对多函数链式渲染较慢，可精简函数数量或改用 Canvas 备选方案
- 若需局部模糊（如只虚化背景），可用容器 +
::before伪元素 +backdrop-filter实现毛玻璃遮罩
避免常见坑点
几个容易忽略但影响体验的细节：
- 视频未加载完成时
video.videoWidth为 0，但滤镜本身不依赖尺寸，可放心提前设置 - 原生控件颜色不受
filter影响，暗色模式下需单独用@media (prefers-color-scheme: dark)调整容器或自定义控件 -
filter不改变字幕（<track>）样式，深色背景下需额外用::cue规则设置文字颜色与描边
