微信内视频防投屏的核心限制在于X5内核不支持标准投屏控制API，iOS强制全屏、Android无法拦截系统级投屏行为；真正有效的是视频资源层加密与canvas/WebGL绕过video标签渲染。
微信内视频防投屏的核心限制在哪
微信内置浏览器（X5内核）不支持标准的 webkit-playsinline 以外的原生投屏控制 API，disablePictureInPicture、controlsList="nodownload nofullscreen" 等属性在微信中基本无效；iOS 微信强制全屏播放，Android 微信则可能响应投屏按钮——但你无法通过 JS 拦截“投屏”这个系统级行为。
真正能起效的，只有两个层面：
- 视频资源层：不让投屏端拿到可解码的原始流
- 播放器层：用 canvas/WebGL 渲染帧，绕过
<video></video>标签
用 MSE + canvas 实现基础防投屏（兼容 X5 内核）
微信 X5 支持 MediaSource 和 requestVideoFrameCallback（Android ≥12 / iOS 微信 8.0.49+），但不支持 captureStream()。可行路径是：
- 后端提供分片的加密 MP4（如 AES-128 key 动态下发）
- 前端用
fetch拉取分片 → 解密 →sourceBuffer.appendBuffer() - 同时用
video.requestVideoFrameCallback捕获帧 →canvas.drawImage(video, ...) - 隐藏原
<video></video>元素（opacity: 0; position: absolute; left: -9999px），只显示 canvas
关键点：
立即学习“前端免费学习笔记（深入）”；
-
<video></video>必须设playsinline和x5-playsinline，否则 iOS 微信直接拦截 MSE 播放 - 不要设
src，全程走 MSE，否则投屏可能捕获到原始 src - canvas 渲染时禁用右键（
oncontextmenu="return false"），并监听video的enterpictureinpicture事件做兜底隐藏
为什么加水印和禁右键还不够
单纯在 video 上叠 CSS 水印或监听 contextmenu，对投屏完全无效——投屏输出的是显卡合成后的帧，不是网页 DOM。常见误区：
- 以为
controlsList="noplaybackrate"能禁投屏 → 微信忽略该属性 - 用
video.disableRemotePlayback = true→ X5 内核不支持该属性，无效果 - 依赖
document.addEventListener('visibilitychange')判定投屏 → 投屏时页面仍处于 visible 状态
真正有效的补充手段只有：
- 后端对 HLS 的
.ts分片做动态 token 鉴权，过期即 403 - 视频帧内嵌动态时间戳水印（需服务端编码时注入，canvas 渲染无法伪造）
- 检测
navigator.userAgent中是否含MicroMessenger+Miniprogram，区分小程序与 H5，避免误伤
安卓微信投屏检测与降级策略
安卓微信点击「投屏」按钮后，会触发 video 元素的 webkitbeginfullscreen（非标准事件），但不可取消。此时可：
- 监听
video.addEventListener('webkitbeginfullscreen', () => { video.pause(); canvas.style.display = 'none'; }) - 立即调用
video.load()中断缓冲（部分机型有效） - 更稳妥的做法：检测到
screen.orientation变为landscape-primary且window.outerWidth > window.outerHeight，判定大概率已投屏，主动暂停并提示「检测到投屏行为，已停止播放」
注意：
-
screen.orientation在微信中需用户授权，首次调用会弹权限框，慎用 - 不要依赖
matchMedia('(orientation: landscape)')，微信不触发该媒体查询变化 - 最小化影响体验：仅对付费/敏感视频启用该逻辑，普通视频保持默认行为
微信里没有银弹。防投屏本质是提高盗录成本，不是绝对封锁。最常被忽略的一点：CDN 日志里 user-agent 含 SmartTV 或 Chromecast 的请求，往往比前端 JS 更早暴露投屏行为——得配合服务端做实时限流。
