HTML视频防投屏无强制机制，仅能通过disableRemotePlayback（无值布尔形式）和controlslist="noremoteplayback"向浏览器提示禁用远程播放，二者共存可提升兼容性；但均不阻止系统镜像、抓包或物理盗录，需结合服务端鉴权、网络隔离与DRM等综合防护。
HTML 本身没有“防投屏”能力，disableRemotePlayback 和 controlslist="noremoteplayback" 只是向浏览器发提示信号，不是开关，更不能阻止系统级镜像或抓包盗流。真要降低风险，得组合前端提示 + 服务端控制 + 网络隔离。
disableRemotePlayback 属性怎么写才有效
必须用无值布尔形式，写成 disableRemotePlayback，不能带等号、不能赋值。
-
disableRemotePlayback="true"或disableRemotePlayback="disabled"—— 浏览器直接忽略，这是最常踩的坑 - 只在 Chrome/Edge 中可靠生效；Safari 从 iOS 15.4 / macOS Monterey 12.3 起支持 AirPlay 提示；Firefox 完全不识别
- 动态设置（如
videoEl.setAttribute('disableRemotePlayback', '')）在 Safari 和部分 Android WebView 中可能无效，建议初始化时就声明 - 它仅隐藏右键菜单和地址栏中的投屏图标，不影响已建立的投屏会话（比如用户先点 Cast 再刷新页面，投屏仍在继续）
controlslist="noremoteplayback" 是更广谱的兼容写法
controlslist 比 disableRemotePlayback 更早被支持，Chrome、Edge、部分新版 Safari 都认，且语义更明确：禁用远程播放入口。
- 写法是：
，注意空格分隔多个指令，noremoteplayback不带引号、不赋值 - 它和
disableRemotePlayback可以共存，互不冲突，建议两个都加 - 在微信内置浏览器、QQ 浏览器等 X5 内核环境里，
controlslist大概率被忽略，需额外判断 UA 并降级提示 - 该属性对系统级屏幕镜像（如 macOS 镜像、Windows 投影到此电脑）完全无影响
前端能做的兜底动作有哪些
纯 HTML 属性只是表层提示，真正起作用的是监听关键事件并干预行为。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 监听
webkitbeginfullscreen（Safari/Chrome 全屏前）、enterpictureinpicture（进入画中画）、visibilitychange（切到后台）事件 - 在
enterpictureinpicture回调中调用videoEl.pause()或弹窗警告，但注意：部分浏览器会拦截自动弹窗 - 搭配
crossorigin="anonymous"才能确保后续 Canvas 水印逻辑可读取视频帧，否则触发 CORS 错误 - 禁用 MSE：
if ('mediaSource' in window) { delete window.MediaSource; }，可让 hls.js / dash.js 失效，间接阻断 WebRTC/HLS 方案投屏
为什么智能电视上加这些属性基本没用
因为电视端能否投屏，取决于它是否能作为 Cast/Miracast/DLNA 接收器被发现，和网页里 标签有没有属性完全无关。
- Chrome 的 Cast 按钮投的是整个标签页，不是
元素；DLNA 推送靠的是 App 或系统级服务扫描本地 HTTP 服务 - 前端无法阻止投屏，但可增加投屏链路中的失败点：比如用动态 token 鉴权 URL 替代公网直连地址，token 绑定 UA/IP 且有效期短
- HLS 的
.m3u8文件本身是纯文本，若被电视浏览器直接访问就能播；应将路径设为登录态接口（如/api/play.m3u8?token=xxx），并校验 session - 网络层隔离才是硬防线：所有投屏协议都依赖局域网设备发现机制，拔网线、关 Wi-Fi 或配置防火墙规则比前端代码更有效
真正难防的从来不是 UI 上那个 Cast 图标，而是用户用手机拍投屏画面、用 Wireshark 抓包、或直接在 DevTools Network 面板里复制分片 URL——这些行为前端几乎无法感知，必须靠服务端鉴权、DRM、动态水印和日志审计协同防御。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
