必须用canvas解码暂停帧后采样取色，因video元素不暴露像素数据，getComputedStyle仅读CSS变量声明值而非实际帧颜色，且浏览器不会自动分析帧内容更新CSS变量。
不能直接从 video 元素提取帧颜色——必须用 <canvas></canvas> 解码一帧再采样，否则所有方案都只是猜颜色或 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 或简单频次统计，不建议用平均值（易被边缘噪点拉偏）
示例片段：
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
立即学习“前端免费学习笔记（深入）”；
const video = document.getElementById('my-video');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
<p>function extractFrameColor() {
if (!video.paused) video.pause();</p><p>canvas.width = 320;
canvas.height = 180;
ctx.drawImage(video, 0, 0, 320, 180);</p><p>const data = ctx.getImageData(0, 0, 320, 180).data;
const colors = [];</p><p>// 步进采样：每 8 像素取一个，跳过 alpha=0 的透明点
for (let i = 0; i < data.length; i += 4 * 8) {
const r = data[i], g = data[i + 1], b = data[i + 2];
if (data[i + 3] > 0) colors.push(<code>${r},${g},${b}</code>);
}</p><p>// 简单频次统计（实际项目建议用更鲁棒的聚类）
const freq = {};
colors.forEach(c => freq[c] = (freq[c] || 0) + 1);
const topColor = Object.entries(freq)
.sort((a, b) => b[1] - a[1])[0]?.[0]
.split(',').map(Number);</p><p>if (topColor?.length === 3) {
const hex = <code>#${topColor.map(x => x.toString(16).padStart(2,'0')).join('')}</code>;
document.documentElement.style.setProperty('--video-main-color', hex);
}
}设置变量后，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 渲染时机、没节流监听——这些细节一漏，页面就白屏或卡死。
