iOS无法对HTML5 video截图的根本原因是Safari安全策略限制video内容不进入Canvas可读取图层；需满足playsinline、muted等属性组合，用户手势触发播放，并在playing事件中延时调用drawImage。
iOS 上无法对 HTML5 元素截图，根本原因不是“截不了”，而是 Safari 的安全策略和渲染机制决定了：** 内容默认不进入 Canvas 可读取的合成图层**——哪怕你用 canvas.getContext('2d').drawImage(video, ...)，在 iOS 上也大概率拿到黑帧或透明画布。
video.drawCanvas 在 iOS 上静默失败的典型表现
你写了标准的截图逻辑，调用 drawImage() 后 canvas 看似正常，但 canvas.toDataURL() 返回的 base64 是纯黑、全透明，或尺寸正确但内容为空。控制台无报错，video.readyState 显示 HAVE_ENOUGH_DATA，甚至 video.videoWidth 也有值——这恰恰是 iOS WebKit 的“假成功”陷阱。
- 仅当视频已播放（非 paused 状态）且处于「可绘制状态」时，iOS 才允许 drawImage；autoplay + muted 后立即截图仍会失败，因为解码/渲染未就绪
- 使用
playsinline和webkit-playsinline是前提，否则视频可能被强制全屏，脱离当前 document 上下文 - iOS 15.4+ 起，若视频来自跨域 source（如 CDN），即使加了 CORS 头，
crossOrigin="anonymous"也未必生效；Safari 对 video 的 CORS 检查比 Chrome 更严格
必须加的 video 属性与加载时机控制
不是“加了就能截”，而是属性组合 + 用户交互时机 + 渲染等待三者缺一不可：
-
—— 四个属性一个都不能少；muted不仅为了 autoplay，更是绕过 iOS 的媒体策略锁 - 必须由用户手势（
click/touchend）触发播放，再在playing事件回调里 setTimeout(0) 延迟截图，给渲染管线留出 1–2 帧缓冲 - 截图前务必检查
video.videoWidth > 0 && video.readyState === 4，仅靠loadeddata事件不够可靠
示例关键片段：
立即学习“前端免费学习笔记（深入）”；
video.addEventListener('playing', () => {
setTimeout(() => {
if (video.videoWidth && video.readyState === 4) {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const data = canvas.toDataURL('image/png');
// data 此时才真正可用
}
}, 0);
});
替代方案：用 video.requestVideoFrameCallback（iOS 16.4+）
如果你的目标系统明确 ≥ iOS 16.4，这是目前最干净的解法：requestVideoFrameCallback 保证你在视频帧真正合成完成后的第一时刻捕获，不再依赖猜测式延时。
- 它不触发跨域异常，不依赖
crossOrigin设置，且天然规避了drawImage的异步竞态 - 注意：该 API 在 iOS 16.4 之前完全不存在，需
if ('requestVideoFrameCallback' in video)特征检测 - 回调中拿到的
metadata包含时间戳和是否为关键帧，可用于精准选帧
简写示意：
if ('requestVideoFrameCallback' in video) {
const capture = (now, metadata) => {
ctx.drawImage(video, 0, 0);
const data = canvas.toDataURL();
video.cancelVideoFrameCallback(capture); // 截完即停
};
video.requestVideoFrameCallback(capture);
}
真正卡住人的，往往不是代码写错，而是误以为“只要 video 能播，就能 draw”——iOS 的媒体管线把解码、渲染、合成拆得比安卓更彻底，截图本质是向 GPU 合成器要一帧快照，而这个快照权限，只在特定上下文、特定时机、特定配置下才开放。别省掉 setTimeout(0)，别跳过 playing 事件，更别在 loadedmetadata 就急着画。
