html video 的 disableremoteplayback 属性仅提示浏览器禁用投屏，非强制策略；必须无值书写，且仅隐藏ui入口，无法阻止系统镜像、录屏或抓包等行为。

HTML video 标签本身**无法真正防止投屏**，disableRemotePlayback 只是向浏览器发出“不希望投屏”的提示，不是强制策略；Chrome/Edge 会响应，Safari 仅部分支持，Firefox 完全忽略。

为什么 disableRemotePlayback 经常失效

这个属性必须以布尔形式直接写在标签里，任何赋值都会让它被忽略：

• disableRemotePlayback ✅ 正确（无值）
• disableRemotePlayback="true" ❌ 错误（被当普通字符串属性，无效）
• disableRemotePlayback="disabled" ❌ 同样无效

即使写对了，它也只影响 UI 入口：隐藏地址栏投屏图标、禁用右键菜单里的“投射到设备”选项。但以下情况完全不受控：

• 用户已开启 AirPlay/Chromecast 后刷新页面，投屏流仍持续
• 系统级镜像（如 macOS 屏幕共享、Windows 投影到此电脑）完全绕过该属性
• 手机拍摄投屏画面、抓包提取 .mp4 或 .m3u8 URL 均不受影响

Chrome 和 Edge 中能起作用的最小可行配置

在 Chromium 系列浏览器中，disableRemotePlayback 是目前唯一原生可用的投屏提示方式，但需配合其他属性减少干扰：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 必须与 controls 一起使用，否则控件不显示，用户根本看不到投屏入口（也就谈不上“禁用”）
• 建议加上 controlsList="nodownload noremoteplayback" —— 注意：noremoteplayback 是旧名，已被弃用，仅 disableRemotePlayback 有效
• 不要混用 webkit-playsinline 或 playsinline，它们和投屏无关，只影响 iOS 全屏行为

正确示例：

<video controls disableremoteplayback><source src="https://example.com/secure.mp4" type="video/mp4"></source></video>

真正降低投屏风险的组合手段

如果业务真有敏感内容（如金融培训、内部会议），单靠 HTML 属性毫无意义，必须服务端介入：

• 视频 src 必须指向后端接口（如 /api/video/123），每次请求校验登录态 + 设备指纹 + Token 时效性
• 返回流式响应时设置 Content-Range 和 Accept-Ranges: bytes，否则拖动/暂停失效
• 禁用静态文件直链：Nginx 或 CDN 层拦截对 /*.mp4 的未授权访问，只放行带签名的临时 URL
• 前端可监听 webkitbeginfullscreen 事件（Chrome/Edge），检测是否进入投屏上下文，触发警告或暂停播放（但无法中断已建立的投屏流）

最易被忽略的一点：哪怕你做了所有前端限制，只要视频资源能被浏览器解码，就一定能被系统录屏工具捕获——这不是 HTML 能解决的问题，而是内容交付模型本身的边界。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！