必须用canvas解码暂停帧后采样取色，因video元素不暴露像素数据，getComputedStyle仅读CSS变量声明值而非实际帧颜色，且浏览器不会自动分析帧内容更新CSS变量。
不能直接从 video 元素提取帧颜色——必须用 解码一帧再采样，否则所有方案都只是猜颜色或 fallback。
为什么 getComputedStyle 读不到视频当前帧颜色
视频是动态流媒体，CSS 自定义属性（如 --video-main-color）本身不感知画面内容。即使你写了 background: linear-gradient(to right, var(--video-main-color), #000)，getComputedStyle 返回的也只是变量声明值（比如 #ff0000），不是视频某帧实际 dominant color。浏览器不会自动分析帧像素并写入 CSS 变量。
用 canvas captureStream + getImageData 提取主色
核心路径：播放 video → 暂停 → 绘制到 canvas → 读像素 → 聚类或直方图取主色 → 写入 CSS 变量。关键点：
- 必须暂停 video，否则
canvas.getContext('2d').drawImage(video, ...)可能捕获到撕裂帧或黑屏 - canvas 尺寸不宜过大（如 320×180 足够），否则
getImageData()性能陡降 - 避免逐像素遍历全部数据；可用步进采样（如每第 4 行、第 4 列取一个像素）加速
- 主色提取推荐用 median-cut 或简单频次统计，不建议用平均值（易被边缘噪点拉偏）
示例片段：
${r},${g},${b}
设置变量后，CSS 中如何安全使用它
别直接在 background 里裸写 var(--video-main-color) ——若变量未初始化或为空，会退成 transparent，导致背景消失。必须提供 fallback：
- 写成
background-color: var(--video-main-color, #333);，fallback 是确定色值 - 如果要用作渐变起点：
background: linear-gradient(to right, var(--video-main-color, #666), #000); - 避免在
:root外部直接设--video-main-color，否则局部作用域可能覆盖不到；统一用document.documentElement.style.setProperty() - 注意：Safari 对未声明变量的 fallback 解析更严格，务必测试
var(--x, #fff)是否生效
监听视频时间变化时重提主色的坑
不要在 timeupdate 事件里高频调用 extractFrameColor() —— canvas 绘制和像素读取是同步阻塞操作，容易卡顿。正确做法：
- 用
requestAnimationFrame节流，每秒最多执行 2–3 次 - 只在用户显式点击“取帧”或跳转到新时间点后触发一次，而非持续监听
- 若需实时响应（如音乐可视化），改用 WebAssembly 加速的色彩分析库（如
color-thief-wasm），而非原生 JS - 移动端要注意：部分 Android WebView 不支持
captureStream()，需降级为静态 poster 图 fallback
真正难的不是“怎么取”，而是“什么时候取、取哪一帧、取完怎么稳稳落到样式上”。变量写进去了，但没配 fallback、没考虑 canvas 渲染时机、没节流监听——这些细节一漏，页面就白屏或卡死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
