HTML5 video元素不支持帧插图，需用canvas叠加实现：先确保video.readyState≥2，再用drawImage将视频帧渲染到canvas，最后在其上绘制图片；永久嵌入须用FFmpeg等服务端处理。
video 元素本身不支持“帧插图”
HTML5 的 标签没有内置“在某一帧插入图片”的能力。所谓“帧插图”，实际是开发者在播放过程中，用 JavaScript 截取当前视频帧（canvas.drawImage()），再将图片叠加到视频画面上——本质是「视频 + canvas 叠加层」，不是修改视频流本身。
用 canvas 捕获并叠加帧的典型流程
核心是把 作为 drawImage() 的源，渲染到 ，再在其上绘制图片。需注意时机和尺寸对齐：
- 确保
video.readyState >= 2（已加载元数据且至少一帧可用），否则drawImage()会静默失败 -
canvas宽高必须与视频实际显示尺寸一致（推荐用video.videoWidth/video.videoHeight初始化） - 叠加图片时，用
canvas.getContext('2d').drawImage(img, x, y, width, height)，坐标系以 canvas 左上为原点 - 需在
requestAnimationFrame或video.ontimeupdate中持续重绘，否则只捕获单帧
const video = document.getElementById('myVideo');
const canvas = document.getElementById('overlayCanvas');
const ctx = canvas.getContext('2d');
const overlayImg = new Image();
overlayImg.src = 'icon.png';
video.addEventListener('play', () => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
drawFrame();
});
function drawFrame() {
if (video.readyState === video.HAVE_ENOUGH_DATA) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// 在右上角叠加图片（10px 边距）
ctx.drawImage(overlayImg, canvas.width - overlayImg.width - 10, 10);
}
requestAnimationFrame(drawFrame);
}
想“永久嵌入”图片到视频里？得走服务端或离线处理
如果目标是生成一个带固定水印/贴图的新视频文件（而非浏览器实时叠加）， 和 canvas 都做不到。此时必须：
- 用 FFmpeg 命令行添加水印：
ffmpeg -i input.mp4 -i logo.png -filter_complex "overlay=main_w-overlay_w-10:10" output.mp4 - 或用 WebAssembly 版本（如 ffmpeg.wasm），但性能开销大、编码耗时长，不适合大视频
- 浏览器内无法真正“写入帧”，所有 canvas 绘制仅存在于内存，刷新即消失
移动端兼容性与性能陷阱
iOS Safari 对 video 的 drawImage() 限制严格：若视频未用户手势触发播放（如自动播放被禁）、或启用了硬件加速解码，drawImage() 可能抛出 SecurityError 或返回空白帧。
立即学习“前端免费学习笔记（深入）”；
- 务必监听
video.oncanplay后再初始化 canvas 渲染循环 - 避免在
video.loadstart阶段就调用drawImage() - 安卓 Chrome 一般无此问题，但部分国产 WebView（如微信 X5）可能禁用跨域视频的 canvas 读取
真正难的不是画几帧，而是让叠加位置随视频缩放、旋转、全屏变化实时对齐，这需要监听 resize、fullscreenchange 并重新计算坐标映射——这点常被忽略。
