唯一稳定隐藏投屏按钮的方式是彻底弃用原生控件，用 JS + HTML 自建播放器 UI；去掉 controls 属性后浏览器不再注入 Cast 按钮，从而避免显示问题。
Chrome 浏览器的 webkitvideocontrols 无法隐藏投屏按钮
Chrome（含 Edge、新版 Safari）原生视频控件里的投屏按钮（Cast button）是系统级集成组件，display: none、visibility: hidden 或伪元素覆盖都无效。它不响应 CSS 选择器，也不在 DOM 中暴露为可操作节点，强行用 ::-webkit-media-controls-overlay-cast-button 等私有伪类在大多数版本中早已失效或被移除。
disableRemotePlayback 属性只能禁用投屏逻辑，不隐藏按钮
这个布尔属性作用是阻止设备向投屏设备发起连接请求，但 UI 按钮仍会显示（尤其在 Chrome 110+）。它只影响行为，不控制渲染：
<video disableremoteplayback controls><source src="video.mp4" type="video/mp4"></source></video>
- 安卓 Chrome 下按钮仍可见，点击后提示“无法投屏”
- iOS Safari 忽略该属性，按钮照常出现
- 设置
controlslist="nodownload noremoteplayback"无额外效果
真正可行的方案：自定义控件 + 移除原生 controls
唯一稳定隐藏投屏按钮的方式是彻底弃用原生控件，用 JS + HTML 自建播放器 UI。此时浏览器不再注入 Cast 按钮，也就不存在“隐藏”问题：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给
去掉controls属性 - 用
实现播放/暂停，控制进度 - 监听
loadedmetadata后手动调用video.play()避免自动播放拦截 - 注意：iOS Safari 要求用户手势触发
play()，不能 onload 自动调
投屏功能本身未被禁用（用户仍可通过系统菜单投屏），但页面上不再提供入口——这是当前 Web 标准下能达成的最接近“防投屏 UI”的做法。
别信“CSS 隐藏投屏按钮”的网上代码
搜索到的 ::-webkit-media-controls-cast-button 或 video::-internal-media-controls-overlay-cast-button 在 Chrome 95 后已不可用；Safari 16.4+ 彻底移除了这些伪类支持。试图用 transform: scale(0) 或负 margin 掩盖按钮，会导致布局错乱或在高 DPI 屏幕上失效。真要防投屏内容，得从服务端做 DRM（如 Widevine、FairPlay）或动态水印，前端 UI 层面只能做到“不主动提供按钮”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
