controlsList="noremoteplayback" 仅能隐藏投屏UI并拒绝remotePlayback API调用，无法阻止系统级或第三方投屏；需结合服务端鉴权、分片加密、环境检测与动态水印等综合防护。
controlsList="noremoteplayback" 是 HTML5 <video> 标签中唯一能在浏览器层面对抗投屏行为的原生属性，但它只起“提示”作用，不能真正阻止。
controlsList="noremoteplayback" 的实际效果
这个属性告诉浏览器：「请隐藏投屏按钮，并在用户尝试调用
HTMLMediaElement.remotePlaybackAPI 时拒绝请求」-
它会影响：
- 视频右键菜单中的“投屏”选项（多数浏览器会灰掉或隐藏）
- 播放控件栏里的 TV 图标（如 Chrome、Edge 默认显示的投屏按钮）
-
navigator.mediaSession相关投屏意图（部分生效）
-
但以下情况它完全无效：
立即学习“前端免费学习笔记（深入）”；
- 用户通过系统级投屏（如 Windows 10/11 的「连接到无线显示器」、macOS 的 AirPlay 菜单）
- 第三方投屏工具（如乐播、当贝投屏、TVCast）绕过网页控制直接抓取屏幕或音视频流
- Android/iOS WebView 容器内未透传该属性（需 Native 层额外拦截）
-
浏览器兼容性不一：
- Chrome ≥ 72、Edge ≥ 79 支持完整行为
- Safari 不支持该属性（iOS/macOS 均忽略），且其 AirPlay 控制由系统接管，无法禁用
- Firefox 完全不识别
controlsList
为什么单靠 HTML 属性防不住投屏？
投屏本质是系统级媒体输出重定向，不是网页能完全管控的边界：
-
<video>标签只是内容容器，浏览器一旦解码完成，像素帧就进入 GPU 渲染管线 - 投屏协议（Miracast / AirPlay / Google Cast）工作在操作系统或驱动层，可直接截取显存或编码输出流
- 即使你禁用了 UI 入口，用户仍可通过：
- 系统快捷键（Win+K / Cmd+Alt+P）
- 手机下拉通知栏投屏开关
- 第三方 App 强制镜像整个窗口或屏幕
所以，controlsList="noremoteplayback" 只能防止「无意识点击投屏」，不能替代服务端权限控制。
配合使用的最小可行防护组合
若你真有金融、内训、版权类视频需要限制传播，必须跳出 HTML 标签思维，组合以下几项：
-
服务端动态 Token 鉴权：每个
.m3u8或.mp4URL 带限时 token，后端校验用户身份、设备指纹、IP 地址，过期即 403 - HLS/DASH 分片加密：用 AES-128 加密 TS/fMP4 片段，密钥不硬编码，由授权接口动态返回（避免被静态分析抓密钥）
-
前端播放环境检测：检查
document.hidden、navigator.permissions.query({name:'display-capture'})、是否在 iframe 中运行、是否有调试工具注入痕迹，异常则暂停播放 - 动态水印叠加：用 Canvas 在播放画布上实时绘制半透明用户 ID + 时间戳，位置随机偏移，防截图识别
controlsList="noremoteplayback" 在这个链条里，只负责最表层的 UI 干扰——它不是盾，只是把「投屏」按钮藏起来，让用户多点一次系统菜单，仅此而已。
真正的防投屏，从来不在 <video> 标签里，而在你能不能让视频流离开服务器之前就被打上身份烙印，以及用户设备是否可信。别指望一个 HTML 属性扛住所有链路。
