HTML video标签无法真正防投屏，disablePictureInPicture仅隐藏画中画UI入口，controlsList="noremoteplayback"在Chrome 117+外无效且不支持AirPlay/Miracast，Safari/Firefox忽略；真防护需DRM（Widevine/FairPlay）+服务端鉴权+加密分片。
HTML 视频无法真正“防投屏”——浏览器的 disablePictureInPicture、webkit-playsinline 等属性只能影响部分行为，但投屏（如 Chrome 的 Cast、Windows 的无线显示、iOS 的 AirPlay）是系统/浏览器级能力，前端代码无权禁用硬件或系统协议层的投屏入口。
为什么 disablePictureInPicture 和 controlsList 不起作用？
这两个属性只控制浏览器内部 UI 行为：
-
disablePictureInPicture仅隐藏画中画按钮，不影响右键菜单里的“投射到设备”或地址栏 Cast 图标 -
controlsList="nodownload noremoteplayback"中的noremoteplayback在 Chrome 117+ 才开始支持，且仅对 部分 远程播放（如 Chromecast）有弱抑制，对 AirPlay、Miracast、Windows 投屏完全无效 - Safari 完全忽略
noremoteplayback；Firefox 不支持该属性
真正在意投屏的场景，应该关注什么？
如果你的服务需要保护视频内容不被大屏截获（比如付费课程、内部培训），重点不在“阻止投屏动作”，而在于“让投屏后的内容不可用”：
- 投屏本质是把当前 tab 或窗口画面镜像过去——只要视频能解码渲染，就可能被录屏或投出
- 真正可控的是：是否提供可下载的
.mp4链接、是否启用 DRM（如 Widevine / FairPlay）、是否使用 MSE + 加密分片（如 CENC） - 纯 HTML
<video></video>标签 + 公开 URL 永远无法防投屏；必须配合服务端鉴权 + DRM 授权流程
开发时最容易误信的“防投屏”写法
以下代码看似合理，实则无效或误导性强：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
<video controls disablePictureInPicture controlsList="nodownload noremoteplayback" playsinline webkit-playsinline x5-playsinline src="https://example.com/video.mp4"> </video>
问题点：
-
noremoteplayback在移动端 Safari 和多数 Android 浏览器中被忽略 -
playsinline只影响 iOS 是否全屏，和投屏无关 - 公开的
src地址一旦被拿到，用户可直接粘贴到新标签页再投屏 - 没有 DRM，浏览器 DevTools → Network 里找
mp4或ts就能下载原始流
如果业务真有强内容保护需求，别在 <video></video> 标签上做文章——去对接 EME（Encrypted Media Extensions），用 MediaKeys + 许可证服务器，否则所有“防投屏”都是心理安慰。
