HTML5 <video> 元素配合 CSS3 filter 属性可实时轻量级调整视频画面，适用于直播预览、简易美颜等场景；基础用法如 filter: brightness(1.2) contrast(1.1); 直接作用于 video 元素。
HTML5 <video> 元素配合 CSS3 filter 属性，可以在不依赖 JavaScript 或后端处理的前提下，对视频画面进行实时、轻量级的视觉调整。这种方案适用于直播预览、简易美颜、教学演示、UI 原型等场景，性能开销小、兼容性良好（现代浏览器均支持），且易于动态控制。
基础滤镜应用：直接作用于 video 元素
CSS3 filter 可以像修饰图片一样修饰 <video>，无需额外 canvas 中转。只需为 video 标签设置 class 或内联样式：
-
亮度/对比度调节：
filter: brightness(1.2) contrast(1.1);（值 >1 增强， -
色相旋转与饱和度：
filter: hue-rotate(30deg) saturate(1.5);（适合风格化调色） -
模糊与锐化：
filter: blur(1px);或filter: url(#sharp);（需配合 SVG 滤镜定义） -
反转与灰度：
filter: invert(30%) grayscale(50%);（支持混合多个函数）
动态控制：用 JavaScript 实时更新 filter 值
通过修改元素的 style.filter 属性，可实现滑块拖动、按钮切换等交互效果。例如绑定 input[type="range"]：
- 监听滑块 change 事件，读取 value 值并拼接 filter 字符串
- 注意：filter 是复合属性，每次设置应覆盖完整值，避免遗漏其他效果（如不要只写
element.style.filter = "brightness(" + val + ")";，而应保留原有对比度、饱和度等） - 推荐封装一个更新函数：
updateVideoFilter({ brightness: 1.3, contrast: 1.05, saturate: 0.9 })
进阶技巧：结合 backdrop-filter 与伪元素叠加
若需局部增强（如仅高亮人脸区域）或叠加图层效果，可借助容器布局与层级控制：
立即学习“前端免费学习笔记（深入）”；
- 将
<video>放入带position: relative的容器中 - 用伪元素
::before或绝对定位的<div>覆盖在视频上方，设置半透明背景 +backdrop-filter: blur(4px)，形成毛玻璃遮罩效果 - 对容器整体加
filter会影响子元素，如需仅作用于视频本身，请确保滤镜只写在 video 标签上
兼容性与性能注意事项
虽然主流浏览器（Chrome/Firefox/Safari/Edge ≥ 2020）已全面支持 video + filter，但仍需留意：
- Safari 对
hue-rotate()和多层filter组合渲染稍慢，建议避免超过 4 个函数链式调用 - 移动端部分 Android WebView（尤其旧版）可能不支持
filter作用于 video，可用@supports (filter: blur(1px))做特性检测降级 - 避免在高频动画中频繁重设 filter（如 requestAnimationFrame 内每帧修改），优先使用 CSS transitions 或 will-change: filter 提升合成层
