HTML无法真正阻止视频投屏，因投屏由操作系统或浏览器外层实现，网页无权干预；disablePictureInPicture和playsinline仅影响画中画与内联播放，与投屏无关。
HTML 无法真正阻止视频投屏
直接说结论：HTML 和 JavaScript 没有 API 能禁止用户将页面内容（包括 <video></video>）投屏到其他设备。所谓“防投屏”在浏览器层是伪命题——投屏行为发生在操作系统或浏览器进程外（如 Chrome 的 Cast、Windows 的无线显示、macOS 的 AirPlay），网页代码对此无权干预。
为什么 disablePictureInPicture 和 webkit-playsinline 不起作用
这两个常被误用的属性，只影响画中画（PiP）和内联播放，跟投屏（Cast/AirPlay）完全无关：
-
disablePictureInPicture="true"：仅禁用浏览器原生画中画按钮，不影响右键菜单里的“投射到设备”选项 -
webkit-playsinline或playsinline：只让 iOS Safari 在页面内播放，不全屏，但用户仍可手动点 AirPlay 图标投屏 - 监听
webkitpresentationmodechanged或enterpictureinpicture等事件，对投屏无响应——这些事件根本不触发
能做的有限防御：隐藏控件 + 阻断右键 + 检测投屏状态（不保证有效）
虽然不能阻止投屏动作本身，但可增加一点门槛，主要面向非技术用户：
- 移除原生控件：
<video controls="false"></video>，自定义按钮并禁用右键：oncontextmenu="return false;" - 隐藏 AirPlay/Cast 图标（仅限部分场景）：
video::-webkit-media-controls-overlay-play-button { display: none; }（仅 Safari 内部样式，不可靠） - 检测是否处于投屏会话（极弱信号）：
navigator.mediaSession无法识别投屏；window.matchMedia("(display-mode: browser)").matches在投屏时仍为true，基本无效
示例片段：
立即学习“前端免费学习笔记（深入）”；
<video src="video.mp4" controls="false" oncontextmenu="return false;" playsinline webkit-playsinline disablePictureInPicture ></video>
真正需要防投屏？必须换架构
如果业务强依赖“不让视频离开设备”，纯前端 HTML 已到边界。可行路径只有：
- 改用原生 App（iOS/Android）+ DRM（如 FairPlay、Widevine），通过系统级策略限制输出（如
AVPlayer的allowsExternalPlayback = false） - Web 端接入 DRM（如 Shaka Player + Widevine），但注意：DRM 只加密解密流程，不禁止投屏——Chrome 投屏时仍可转发已解密帧
- 服务端动态切片 + token 鉴权 + 极短有效期 URL，让录屏/投屏后的内容快速失效（治标不治本，但实操中最常用）
别在 <video></video> 标签上堆属性了，浏览器没留这个后门。
