disableremoteplayback不是防投屏开关，因其仅为提示性布尔属性，chrome/edge支持良好但safari仅弱提示、firefox完全忽略；它不强制禁用、不阻止录屏或抓包，且错误赋值（如="true"）会导致失效。
原生 <video></video> 标签无法真正“防投屏”，只能通过 disableRemotePlayback 属性向浏览器发出禁用远程播放的提示——它不强制、不加密、不拦截，仅隐藏投屏入口。
为什么 disableRemotePlayback 不是防投屏开关
这个属性本质是给浏览器的一个建议，不是策略指令。实际行为完全取决于浏览器实现：
- Chrome / Edge：设为
disableRemotePlayback（无值）后，地址栏 Cast 图标灰化，右键菜单移除“投射到设备”项 - Safari：iOS 15.4+ 和 macOS 12.3+ 仅对 AirPlay 有弱提示，部分机型仍可手动触发
- Firefox：完全忽略该属性，设了也等于没设
- Android WebView / 微信内置浏览器：多数版本直接不识别，或识别后无响应
更关键的是：它对系统级录屏（如 QuickTime、Xbox Game Bar）、手机拍摄投屏画面、抓包提取 m3u8 URL 等行为零防护能力。
正确写法：布尔属性不能带值
常见错误是把它当普通 HTML 属性赋值，导致失效：
- ✅ 正确：
<video controls disableremoteplayback></video> - ❌ 错误：
<video controls disableremoteplayback="true"></video> - ❌ 错误：
<video controls disableremoteplayback="disabled"></video>
原因：HTML 规范中，布尔属性的存在即为 true；一旦带值（哪怕值是 "true"），浏览器会按“存在但值非法”处理，直接丢弃该属性。
配合 controlsList 隐藏更多入口
用户仍可能通过右键菜单投屏（尤其在 Safari 或未屏蔽上下文菜单时），可叠加 controlslist 进一步收敛 UI 表面入口：
-
controlslist="noremoteplayback"：和disableRemotePlayback作用重复，但部分旧版 Chrome 仅认这个 -
controlslist="nodownload noremoteplayback"：同时隐藏下载按钮和投屏按钮（注意：仅在controls存在时生效） - ⚠️ Firefox 完全不支持
controlslist，Safari 对noremoteplayback支持不稳定
示例：<video controls controlslist="nodownload noremoteplayback" disableremoteplayback></video>
真正需要防投屏时，必须跳出前端思维
如果你的视频含敏感内容（如金融培训、内部会议、版权素材），只靠 HTML 属性是危险的。容易被忽略的关键点：
- 服务端必须校验每次分片请求：带动态 Token + 设备指纹绑定，过期即拒收
- HLS 必须启用 AES-128 加密，密钥由后端按需下发，不能硬编码或明文暴露在 m3u8 中
- DRM（Widevine/FairPlay）才是输出控制的底层手段，
disableRemotePlayback只能算它前端的一层薄纱 - 前端监听
webkitbeginfullscreen或enterpictureinpicture事件可以告警或暂停，但无法阻止已发起的投屏会话
最常被跳过的环节：忘了配 crossorigin="anonymous" —— 没它，Canvas 水印、自定义解密、MSE 分片加载都会因 CORS 失败而中断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
