controlslist="noremoteplayback"是唯一靠谱的防投屏手段，浏览器原生支持、无需JS、不依赖HTTPS；它仅作用于启用controls的video元素，可屏蔽Chrome/Edge/vivo等浏览器的一键投屏按钮，但无法阻止iOS AirPlay镜像等系统级投屏。
controlslist属性是唯一靠谱的防投屏手段，浏览器原生支持，无需 JS、不依赖 HTTPS，加一行就能生效。
为什么 controlslist="noremoteplayback" 是唯一有效方案
HTML5 标签本身不参与投屏协议，所谓“防投屏”，其实只是阻止用户点击浏览器界面上那个投屏按钮。Chrome、Edge、vivo 浏览器等都认 controlslist，但仅限于它支持的几个关键字——其中 noremoteplayback 就是专为这事设计的。
常见误区：
- 加
disableRemotePlayback属性？错，这是 JS 方法名，不是 HTML 属性 - 用 CSS 隐藏 TV 图标？无效，vivo/Chrome 的投屏按钮是原生 UI，CSS 无法覆盖
- 删掉
controls再自己写控件？没用，只要视频元素存在，系统级投屏入口（如 Chrome 右上角 Cast 按钮）依然能识别并投整个页面
controlslist 必须和 controls 一起用才生效
这个属性不会自己弹出控件，它只作用于已启用的默认控制条。如果你没加 controls，controlslist 就像给一把没装弹匣的枪贴“禁止开火”标签——根本没机会触发。
正确写法示例：
<video controls controlslist="noremoteplayback nodownload nofullscreen"><source src="lesson.mp4" type="video/mp4"> 您的浏览器不支持视频播放。 </source></video>
注意点：
- 多个参数用空格分隔，不能用逗号或引号包裹
- 必须写在
开始标签内，不能通过 JS 后续 setAttribute 添加（部分浏览器不响应动态设置） - 移动端 Safari 对
noremoteplayback支持较晚（iOS 15.4+），旧版本无效
别信“禁用全屏就能防投屏”的说法
nofullscreen 只隐藏全屏按钮，不影响投屏功能。vivo 浏览器右滑唤出的 TV 图标、Chrome 地址栏右侧 Cast 图标，都不受 nofullscreen 约束。实测中，即使同时加了 nofullscreen 和 noremoteplayback，前者只是视觉降级，后者才是关键防线。
真正起作用的组合只有：
-
controlslist="noremoteplayback"：屏蔽投屏按钮（核心） -
controlslist="noremoteplayback nodownload"：顺带防右键另存为（推荐补上）
其他如 novolume、noquality 和防投屏无关，纯属界面精简需求。
兼容性与容易被忽略的坑
这个属性在桌面 Chrome/Edge、Android Chrome、vivo 浏览器、华为浏览器里基本可靠；但在 iOS Safari 上，即使加了 noremoteplayback，用户仍可能通过系统级“屏幕镜像”（AirPlay）把整个页面投出去——这不是网页能拦住的，属于操作系统层行为。
所以真实防御边界是：
- 能拦住所有基于 MediaSession API 的一键投屏（腾讯视频、B站网页版等场景）
- 拦不住 AirPlay 镜像、Chromecast 整页投射、或用户手动录屏
- 如果视频本身是敏感内容，还需配合服务端鉴权、动态 token、HLS 分片加密等后端手段
单靠前端加一行 controlslist，只是第一道门，别当成保险柜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
