真视频水印必须用canvas实时绘制，因img叠层在全屏、截图、录屏时失效；需监听video播放帧，动态同步尺寸、清空画布、绘制文字并控制透明度。
直接在 上加 CSS 伪元素或 canvas 实时绘制。
为什么 ![]()
这种写法只是把图片浮在 video 标签 DOM 层级上方，浏览器渲染时 video 的画面图层仍独立于页面布局流。结果是：
- 全屏播放时，
- 右键“图片另存为”或截图工具截的是 video 帧，不是叠加层
- 移动端 Safari / Chrome 的 video 全屏逻辑会强制重排，浮动水印错位甚至消失
-
pointer-events: none能透点击，但无法解决内容不可见的本质问题
canvas 绘制视频帧水印的最小可行步骤
核心是监听 video 的 play 和 timeupdate，每帧把当前画面 draw 到 canvas，再叠文字。关键动作不能少：
- canvas 尺寸必须与 video 当前显示尺寸一致（不是原始宽高），用
video.clientWidth/video.clientHeight动态同步 - 每次绘制前必须调用
ctx.clearRect()，否则上一帧残留 - 文字位置建议锚定右下角（如
canvas.width - 20,canvas.height - 20），避免旋转后跑出画布 -
ctx.globalAlpha = 0.3控制水印透明度，别用style.opacity，那会淡掉整块 canvas 内容 - 防抖：不要每帧都重绘文字，可设节流（如 300ms 一次），文字内容不变时跳过
fillText
示例片段：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const canvas = document.getElementById('watermarkCanvas');
const ctx = canvas.getContext('2d');
const video = document.getElementById('myVideo');
<p>const draw = () => {
if (!video.paused && !video.ended) {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
ctx.globalAlpha = 0.3;
ctx.font = 'bold 24px sans-serif';
ctx.fillStyle = '#fff';
ctx.textAlign = 'right';
ctx.textBaseline = 'bottom';
ctx.fillText('CONFIDENTIAL', canvas.width - 20, canvas.height - 20);
ctx.globalAlpha = 1;
}
};</p><p>video.addEventListener('play', () => requestAnimationFrame(draw));
video.addEventListener('timeupdate', () => requestAnimationFrame(draw));</p>
动态内容水印（带用户名、时间戳）怎么安全注入
如果水印要含 user.name 或 new Date().toISOString()，注意两点：
- 别拼接进 HTML 字符串再 innerHTML，尤其当数据来自后端接口——XSS 风险极高；应统一走
ctx.fillText(userSafeText, ...) - 时间戳类内容更新频率低（秒级），但 canvas 每帧重绘，别在
draw函数里反复调new Date()，提前算好字符串缓存 - 若需防录屏追踪，可在文字中嵌入极细小、低对比度的 base64 用户 ID（如
ctx.fillText('ID: ' + btoa(userId).slice(0,6), ...)），肉眼难辨但 OCR 可识别
canvas 方案不是银弹：它会让低端设备 CPU 占用明显升高，且无法在 video 的 preload="none" 场景下提前生效。真正需要强防护的场景，水印得由服务端转码时烧录进视频流——前端 canvas 只是第一道轻量防线，别把它当防盗锁用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
