video标签本身不提供防投屏能力，disableRemotePlayback仅作提示而非强制禁用，无法阻止Chromecast、AirPlay等系统级投屏行为，真正有效的防护需依赖服务端DRM加密与鉴权策略。
video 标签本身不提供防投屏能力，浏览器原生控制栏里的“投屏”按钮（Cast）是系统级功能，无法通过 HTML 或 CSS 直接禁用。所谓“防投屏”，实际是限制用户把当前页面或视频流镜像到外部设备——但这个行为发生在浏览器/操作系统层，前端代码没有权限拦截。
webkit-playsinline 和 playsinline 是什么？
这两个属性常被误认为能“防投屏”，其实它们只影响 iOS Safari 的内联播放行为：
-
playsinline：标准 HTML5 属性，告诉 iOS 在页面内播放，而不是全屏跳转 -
webkit-playsinline：旧版 Safari 兼容写法，现已基本被playsinline覆盖
它们和投屏无关，也不会阻止 Chromecast、AirPlay 或 Miracast。
常见错误现象：加了这两个属性后发现“还是能点投屏”，不是配置漏了，是它本来就不管这事。
为什么 disablePictureInPicture 也拦不住投屏？
disablePictureInPicture 是个布尔属性，作用明确且有限：
- 只禁用「画中画」（PiP）模式，即小窗口悬浮播放
- 对 AirPlay（iOS/macOS）、Chromecast（Chrome）、Windows 投屏（Miracast）完全无效
你可以在 video 标签里这样写：
立即学习“前端免费学习笔记（深入）”；
<video disablePictureInPicture controls> <source src="demo.mp4" type="video/mp4"> </video>
但它不会让右键菜单或地址栏的 Cast 图标消失，也不会阻止用户长按视频呼出 AirPlay 列表。
真正能影响投屏体验的只有两个方向
- 服务端策略：用 HLS 或 DASH 分片 + DRM（如 FairPlay、Widevine），让投屏设备无法解密内容。但这需要专门的流媒体服务和授权体系，不是改几行 HTML 就能实现的。
-
UI 层遮罩/干扰：在视频区域上方叠一层透明但可捕获点击事件的
div，隐藏原生控件，自己重绘播放器 UI（比如用 ArtPlayer）。这类方案能藏掉 Cast 按钮，但用户仍可通过系统级快捷方式（如 macOS 的菜单栏 AirPlay 图标、Windows 的 Win+K）发起投屏——你只能“降低可见性”，不能“禁止行为”。
容易踩的坑：
- 把
x5-video-player-type="h5-page"（微信安卓私有属性）当成通用方案，它只在微信内置浏览器生效 - 给
video加oncontextmenu="return false"想屏蔽右键菜单，但投屏入口根本不在右键里 - 以为设置
controlslist="nodownload noremoteplayback"能禁投屏，其实noremoteplayback仅对部分 Android 浏览器有效，且已被 Chrome 99+ 移除支持
投屏不是前端能关掉的开关，而是浏览器与操作系统协作开放的能力。如果你的目标是“减少非授权传播”，重点不该放在 HTML 属性上，而应考虑内容分发链路：是否用加密流？是否有水印？是否限制 Referer 或 Token 验证？这些才是真实起效的环节。
