HTML5视频标签本身不支持防投屏，所谓“防投屏”需依赖DRM加密、专用播放器及服务端UA识别协同实现。
HTML5视频标签本身不支持防投屏
浏览器的 标签没有内置“禁止投屏”能力，所谓“防投屏”实际是绕过浏览器原生投屏机制、依赖特定平台限制的妥协方案。Chrome、Edge 等基于 Chromium 的浏览器允许用户将任何页面内容（包括 ）投射到 Chromecast 或 Miracast 设备，HTML 层面无法拦截该行为。
禁用 webkit-playsinline 和 disablePictureInPicture 只影响内联播放，不阻止投屏
这两个属性常被误认为能防投屏，其实它们作用完全不同：
-
webkit-playsinline：仅控制 iOS Safari 是否在网页内播放（而非全屏），对投屏无影响 -
disablePictureInPicture="true"：仅禁用画中画（PiP），和投屏（Cast）是两个独立功能
即使同时设置：
<video disablepictureinpicture="true" webkit-playsinline=""></video>
，用户仍可点击浏览器右上角「投射」图标将整个标签页投出去。
真正能起效的只有 DRM + 专用播放器 + 平台级策略
商业会员视频平台（如 Netflix、腾讯视频 App 内 H5）的“防投屏”，本质是三者协同：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 使用
MediaKeys+EME接入 Widevine（Chrome/Edge）或 FairPlay（Safari）DRM - 播放器主动调用
mediaSession.setSupportedContentTypes(['audio', 'video'])并监听mediaSession.onremoveselection—— 但注意：这仅能感知投屏断开，不能阻止发起 - 关键一步：在服务端识别 User-Agent 和
navigator.connection.type，对已知投屏设备 UA（如CrKey、Google-Cast）直接返回 403 或空视频流
例如检测到请求头含 User-Agent: Mozilla/5.0 (X11; CrOS x86_64) AppleWebKit/537.36... CrKey，后端就拒绝提供 .mpd 或 .m3u8 地址。
别信“加 oncontextmenu 或禁用右键就能防投屏”
这类前端 JS 小把戏毫无意义：
- 投屏是浏览器菜单行为，不触发页面任何 DOM 事件（
contextmenu、beforeunload、visibilitychange都监听不到） - 禁用右键、隐藏控件、覆盖 div 层——只影响普通用户，对开发者按 F12 或用
chrome://cast投射完全无效 - 所有前端代码均可被绕过，真正的防护必须落在 DRM 解密环节和服务器响应策略上
如果你的视频没接入 Widevine/FairPlay，也没做服务端 UA 过滤，那所谓“防投屏”就是个视觉安慰剂。复杂点在于：DRM 集成成本高、FairPlay 要求 HTTPS + Apple 开发者账号、Widevine 许可证需与内容密钥服务对接——这些都不是加几行 HTML 能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
