防投屏实际是防录屏与二次分发，浏览器无法阻止系统级投屏；disablepictureinpicture和webkit-playsinline无效；唯一有效方案是服务端动态水印+hls分片加密+mse加载。
浏览器投屏本身无法阻止，防的是投屏后被录屏或二次分发
HTML <video></video> 标签没有任何 API 能检测或禁用系统级投屏（如 macOS AirPlay、Windows 无线显示、Chrome 的“投射”功能）。所谓“防投屏”，真实目标是：防止用户在投屏状态下用另一台设备录制画面，或把投屏内容保存为本地视频。所有声称“禁止投屏”的前端 JS 方案（比如监听 screen.orientation 或 document.visibilityState）都无效——投屏不触发这些事件，且完全绕过页面控制。
disablePictureInPicture 和 webkit-playsinline 不解决投屏问题
这两个属性常被误用：
-
disablePictureInPicture="true"只禁用画中画（PiP），和投屏（Mirroring/Casting）无关； -
webkit-playsinline是 iOS 早期限制全屏的 hack，对投屏无影响； - 设置
controlsList="nodownload noplaybackrate"也仅隐藏 UI 按钮，不影响系统级操作。
它们既不拦截投屏请求，也不干扰 Miracast/AirPlay 协议栈。浏览器无权干预操作系统媒体路由层。
真正能起效的只有服务端动态水印 + 用户绑定
当培训视频必须支持投屏时，唯一可落地的版权防护是让录屏内容自带不可剥离的追溯信息：
- 在服务端生成视频流时，叠加 用户 ID + 时间戳 + 设备指纹哈希 的动态跑马灯水印（非静态 logo），位置随机、透明度渐变、频率扰动；
- 使用 HLS 分片加密（
AES-128），密钥由后端按会话动态下发，每次播放请求返回不同KEY_URI； - 前端用
MediaSource Extensions (MSE)加载解密后的分片，避免<source src="..."></source>暴露直链； - 配合 Nginx 或 CDN 配置
Referrer-Policy: strict-origin-when-cross-origin和X-Frame-Options: DENY，阻断 iframe 套嵌和跨站引用。
注意：水印必须在解码后、渲染前注入帧数据（如用 WebAssembly 解码器 + Canvas 合成），不能靠 CSS 叠加——否则投屏时会被系统直接绕过。
别碰“浏览器防录屏”这种伪方案
所谓 navigator.mediaDevices.getDisplayMedia() 检测、document.onvisibilitychange 监听、甚至用 canvas.captureStream() 反向探测，全是障眼法：
- 系统投屏不经过
getDisplayMedia，它只捕获标签页/窗口，而投屏是 GPU 层镜像； - 录屏软件（OBS、Bandicam）完全不触发页面事件；
- 任何前端 JS 都能被禁用或 patch，连 Chrome 扩展都能绕过这类检测。
真要防录屏，只能靠法律手段+水印溯源，技术上只做“让盗版者不敢公开传播”这一件事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
