HTML视频无法真正防投屏，所谓“防投屏”实为降低成功率的策略性干预；iOS Safari忽略noremoteplayback属性是苹果主动设计，非bug；Chrome Cast按钮显示依赖HTTPS、Cast扩展/功能启用及可用Cast设备三者同时满足；Android端disableRemotePlayback仅对标准Cast有效，无法阻止Miracast等系统级投屏；HLS在iOS上反而更易触发AirPlay，统一用hls.js+disableRemotePlayback可提升跨平台可控性。
HTML 视频本身没有“防投屏”机制，浏览器不提供禁止用户点击 Cast 按钮或 AirPlay 图标的 API。所谓“防投屏”，实际是通过限制播放环境、阻断协议触发条件、或干扰投屏链路关键环节来降低被投成功率——但无法 100% 拦截。跨平台兼容的关键，不是加锁，而是让所有端（iOS/Android/Chrome/Firefox/Safari）都落在同一套可控行为下。
为什么 controlslist="nodownload noremoteplayback" 在 iOS 上无效
iOS Safari 完全忽略 noremoteplayback 属性，这是 WebKit 的明确设计选择：苹果认为用户对 AirPlay 的控制权高于网页策略。即使你写了：
<video controlslist="noremoteplayback"></video>
在 iPhone 或 iPad 上，只要视频在支持 AirPlay 的页面中播放（且系统级 AirPlay 开关开启），右上角的 AirPlay 图标仍会照常出现。这不是 bug，是 Apple 的策略性放行。
实操建议：
- 别依赖该属性做 iOS 防投屏，它只对 Chrome / Edge（Windows/macOS）部分生效
- 若需隐藏控件，用 CSS 隐藏整个
video原生控件，再手写 JS 控制层（但注意：这不阻止用户手动唤出系统级 AirPlay 菜单） - 真正影响 AirPlay 触发的是视频源协议：HLS 流 +
playsinline+ HTTPS 页面，比 MP4 文件更容易被 AirPlay 拦截识别
Chrome Cast 按钮消失的三个硬性前提
Chrome 浏览器右上角的 Cast 按钮是否出现，不取决于你的 HTML，而取决于三件事是否同时满足：
- 页面必须通过
https://访问（http://或localhost直接禁用按钮） - 用户设备已安装并启用 Google Cast 扩展（桌面）或系统级 Cast 功能（Android/iOS）
- 当前网络中存在可发现的 Cast 设备（Chromecast、Android TV、Google TV）
这意味着：如果你的视频页部署在内网测试环境，或用户没装扩展，或电视没连 Chromecast，Cast 按钮根本不会渲染出来——你不需要“防”，它天然就不可用。
常见误操作：
- 在开发环境用
http://192.168.x.x:3000调试，却指望 Cast 按钮出现 - 给
加disableRemotePlayback属性，但没配 HTTPS，属性被静默忽略 - 以为禁用
cast.framework.CastContext.getInstance()就能隐藏按钮——其实按钮由浏览器原生渲染，和 JS 是否初始化 Cast SDK 无关
安卓端靠 disableRemotePlayback 不够稳
Android Chrome 支持 disableRemotePlayback 属性，写法是：
<video disableremoteplayback></video>
但它只阻止“通过 Cast 框架发起的投屏”，对系统级无线显示（Miracast）、厂商定制投屏（如华为多屏协同、小米投屏）完全无效。更麻烦的是：从 Android 12 开始，部分 OEM 厂商（如三星、OPPO）已绕过该属性，只要用户长按音量键呼出投屏菜单，依然能选中当前标签页。
真正有效的组合动作：
- 加
disableRemotePlayback应对标准 Cast 场景 - 用
document.addEventListener('visibilitychange', ...)监听页面失焦，主动pause()视频（防止后台继续播放被 Miracast 捕获） - 避免使用
webkit-playsinline或playsinline，某些安卓浏览器开启内联播放后反而更容易被无线显示协议抓取画面流
最易被忽略的跨平台雷区：HLS + 自动播放 + AirPlay
很多人以为把 MP4 换成 HLS 就安全了，其实恰恰相反。iOS Safari 对 HLS 流的 AirPlay 支持最完善，尤其当满足以下条件时，AirPlay 图标几乎必然出现：
- 视频使用
- 页面启用了
autoplay和muted（符合 iOS 自动播放策略） - 服务器返回正确的
Content-Type: application/vnd.apple.mpegurl
这时候，用户点开页面几秒内，AirPlay 图标就会浮现在右上角——比 MP4 还快。这不是你能用 HTML 属性关掉的，是 Safari 主动提供的体验。
所以真正的兼容策略是：不要试图“堵”，而是“控”。统一用 MSE + hls.js 播放 HLS，并在初始化时显式调用 hls.attachMedia(video) 后，立即执行 video.disableRemotePlayback = true（如果支持）。虽然不能 100% 拦截，但至少把行为收敛到可测、可 log、可 fallback 的路径上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
