disableremoteplayback属性必须以布尔属性形式直接写在标签中才生效，即；写成disableremoteplayback="true"或动态设置均无效，且仅chrome/edge支持较好，safari部分支持，firefox完全不支持。
disableRemotePlayback 属性怎么写才生效
它不是 JavaScript 脚本，也不是 npm 包，而是一个原生 HTML 布尔属性——写错格式就完全无效。
正确写法只有这一种：disableRemotePlayback，直接作为属性名出现在 <video></video> 标签里，不带等号、不加引号、不赋值：
<video controls disableremoteplayback><source src="video.mp4" type="video/mp4"></source></video>
以下全是错误写法，浏览器会忽略该属性：
disableRemotePlayback="true"disableRemotePlayback="disabled"-
disableRemotePlayback=""（空字符串也不行） - 用 JS 动态设置：
videoEl.setAttribute('disableRemotePlayback', 'true')（多数浏览器不响应）
Chrome 和 Safari 中禁用投屏的实际效果差异
这个属性在不同浏览器中表现不一致，不能指望“写了就起作用”。
Chrome / Edge（Chromium 内核）：基本可靠。视频右键菜单里“投射到设备”选项会变灰或消失，地址栏的 Chromecast 图标也会隐藏。
Safari（iOS 15.4+ / macOS 12.3+）：仅对 AirPlay 有提示作用，且只在部分机型和系统版本中生效；有些情况下仍可手动唤出 AirPlay 控制中心并投屏成功。
Firefox：完全不支持，设了等于没设。
Android WebView 或微信小程序内嵌页：行为不可控，很多版本直接忽略该属性，尤其在低版本 Android 系统上。
为什么加了 disableRemotePlayback 还能被投屏
根本原因在于：它只是个“请求”，不是“指令”。浏览器是否执行，取决于底层平台策略、播放器实现、甚至系统级权限。
常见绕过方式包括：
- 用户手动打开系统级投屏入口（如 macOS 的“屏幕镜像”菜单、Windows 的“连接”快捷键）
- 使用第三方录屏工具捕获整个浏览器窗口（
disableRemotePlayback对此毫无约束力） - 手机拍摄投屏画面（物理盗录，技术上无法防御）
- 抓包拿到
.mp4或.m3u8地址后本地下载（需服务端配合鉴权、Token 时效、Referer 校验）
也就是说，它防不住任何有心人，只对普通用户构成轻微操作门槛。
真正需要防投屏时该怎么做
如果业务涉及版权内容（比如付费课程、内部培训视频），单靠前端属性远远不够，必须组合服务端与客户端策略：
- 服务端校验播放 token：每次请求
.mp4或分片时验证 JWT，绑定用户 ID + 设备指纹 + 限时（如 5 分钟） - 监听浏览器投屏相关事件：
webkitbeginfullscreen（Safari 全屏）、enterpictureinpicture，触发暂停 + 提示 - 对高敏感内容启用 DRM：Widevine（Chrome/Android）、FairPlay（Safari/iOS），并在 license server 中配置
outputProtection要求 HDCP 输出 - 避免在前端硬编码视频 URL；改用动态接口返回加密后的播放地址，配合 Referer 白名单和 UA 校验
最后提醒一句：所有前端手段都可被绕过。真正关键的防线在服务端鉴权和 DRM 授权策略，而不是 disableRemotePlayback 这个开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
