HTML无法阻止投屏，因Miracast、AirPlay等投屏协议运行在系统/硬件层，浏览器video元素不可见不可干预；有效防护需依赖原生App、TV SDK、DRM加密及服务端策略。
投屏不是 HTML 能阻止的
HTML 本身没有能力阻止投屏。电视盒子（如小米盒子、当贝盒子）或手机系统（iOS/Android）发起的投屏，走的是 Miracast、AirPlay、DLNA 或私有协议（如华为 Cast+），这些是操作系统或硬件层的行为，浏览器标签页里的 <video></video> 元素完全不可见、不可干预。
哪些“防投屏”方案实际无效
网上常见但无效的做法包括：
- 给
<video></video>加controlslist="nodownload noremoteplayback"：其中noremoteplayback只影响 Safari iOS/macOS 的 AirPlay 小按钮显示，不阻止 AirPlay 手动选择；对安卓投屏、Miracast、盒子扫码投屏完全无效 - 监听
webkitremoteplaybackstatechanged或remoteplaybackAPI：只能读取当前状态（如"connected"），无法中断连接或拒绝投屏请求 - 用
CSS隐藏视频区域或覆盖黑层：投屏内容是源设备屏幕或视频解码输出，不是网页渲染层，遮挡 DOM 对投屏画面零影响 - 调用
document.exitPictureInPicture()：仅退出画中画，和投屏无关
真正起作用的环节在服务端和客户端 SDK
如果业务需要防投屏，必须放弃纯 Web 方案，转向可控终端：
- 使用原生 App（Android/iOS）或 TV 端 SDK（如银河奇异果、云视听极光 SDK），它们可调用系统级 DRM（如 Widevine L1、FairPlay）并配合硬件级解密，让投屏设备因缺少密钥或安全上下文而无法解码画面
- 服务端开启 HLS/DASH 的 AES-128 或 CENC 加密，并强制要求播放器使用支持安全输出路径（Secure Video Path）的 DRM 模块；普通浏览器
fetch+MediaSource无法满足 L1 安全等级，投屏时会黑屏或报错MediaError.code = 4（MEDIA_ERR_ENCRYPTED） - 识别 UA + IP + 设备指纹，对已知投屏中间件（如乐播投屏的 UA 特征
LeboScreen、当贝投屏的DangbeiWeb）返回 403 或降级为低清 MP4（无 DRM）——但这只是策略性规避，非技术性阻断
Web 页面能做的唯一务实动作
在用户可能误操作投屏的场景下，提供友好提示和体验收敛：
立即学习“前端免费学习笔记（深入）”；
- 检测到
navigator.mediaSession或document.pictureInPictureElement变化时，在页面顶部浮层提示：“检测到投屏行为，当前视频受版权保护，可能无法正常显示” - 监听
remoteplayback状态变化，当remoteplayback.state === "connecting"时暂停播放并弹出提示（注意：仅 Safari 支持该事件） - 避免使用
<video autoplay></video>，改用显式play()调用，并在play()前检查navigator.permissions.query({name: 'display-capture'})（仅作参考，不反映投屏状态）
真正的防投屏，从来不在 HTML 层面，而在芯片、DRM 许可证、播放器 SDK 和内容分发策略的组合里。把希望寄托在 <video controlslist="noremoteplayback"></video> 上，等于用胶带绑住遥控器去防人换台。
