disablePictureInPicture仅控制浏览器原生画中画按钮，与投屏无关；禁用投屏需依赖DRM加密、License服务端校验及动态密钥，前端属性如disableRemotePlayback仅对MSE流部分生效且无法彻底阻止投屏。
为什么 disablePictureInPicture 属性不起作用？
这个属性只控制浏览器原生画中画（PiP）按钮是否显示，和投屏（Chromecast/AirPlay）完全无关。HTML 或 CSS 没有标准 API 能禁用系统级投屏功能——浏览器不暴露这个能力，设备固件也不允许网页干预。
真正能影响投屏的，只有播放器行为和媒体源策略：
- 投屏时，接收端（电视/盒子）会直接向服务器请求视频流，绕过网页 JS 控制
- 如果视频是明文 MP4 地址，投屏必然成功；只有启用 DRM（如 Widevine、FairPlay）并配合服务端许可证校验，才能在投屏链路中拦截
-
webkit-playsinline和x5-playsinline等属性仅影响 iOS/安卓内嵌播放，对 AirPlay/Chromecast 无约束力
如何让 Chrome 浏览器隐藏投屏按钮？
Chrome 117+ 支持 disableRemotePlayback 属性，它会让 <video disableremoteplayback controls><source src="https://example.com/encrypted.mpd" type="application/dash+xml"></source></video>
注意：
- 该属性对
mp4、webm等直接播放的格式无效，只对 MSE（Media Source Extensions）加载的流（如 DASH/HLS）生效 - 必须搭配服务端返回的
Content-Disposition: attachment或 CORS 头限制，否则用户仍可右键另存为 - iOS Safari 完全忽略此属性，AirPlay 图标始终存在
真正防投屏只能靠服务端 DRM + License 绑定 前端所有“隐藏按钮”“拦截事件”的尝试，都只是障眼法。投屏本质是把媒体 URL 发送给接收设备，只要 URL 可被提取，就防不住。
可行路径只有：
- 使用 CENC 加密的 DASH/HLS，且每段分片带唯一 IV，密钥由 License Server 动态下发
- License Server 校验设备指纹（如 Widevine L1 设备 ID）、会话 token、甚至 IP 地理围栏
- 在投屏发起瞬间（通过
navigator.mediaDevices.getDisplayMedia()检测屏幕共享）触发 license 吊销 —— 但这属于灰色手段，且对原生 Cast 不生效 - 放弃纯 Web 方案，改用 Electron / WebView + 原生 SDK（如 Google Cast SDK）做投屏白名单控制
常见误操作：监听 webkitbeginfullscreen 或 resize
这两个事件根本捕获不到投屏行为。投屏不触发页面重排、不改变 video 元素尺寸、也不进入全屏 API 流程。
实测无效的写法：
video.addEventListener('webkitbeginfullscreen', () => {
// 永远不会执行
});
真正能感知到的只有：
-
document.pictureInPictureElement变化（仅 PiP，非投屏） -
navigator.connection.effectiveType突然变差（可能因投屏占带宽，但不可靠） - 服务端日志里出现新 User-Agent（如 "GoogleCast"）或异常 Referer
防投屏不是前端能闭环的事。重点得放在流加密粒度、license 生效范围和服务端响应速度上，而不是在 video 标签上加一堆无效属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
