HTML视频防投屏无一劳永逸方案：disableRemotePlayback须以无值布尔形式写在video标签中，controlslist="noremoteplayback"仅隐藏UI入口，均无法阻止系统级投屏或抓包；真正防护需服务端DRM、动态鉴权与终端设置。
HTML 视频防投屏没有“做完就一劳永逸”的方案，disableRemotePlayback 和 controlslist="noremoteplayback" 仅能隐藏部分 UI 入口，对已建立的投屏连接、系统级镜像（如 macOS 控制中心 AirPlay）、或抓包复现流地址完全无效。
video 标签里 disableRemotePlayback 怎么写才生效
这个属性不是开关，是浏览器提示信号，写法极其严格：
- 必须以无值布尔形式直接写在
<video></video>标签中：<video disableremoteplayback></video> -
disableRemotePlayback="true"、disableRemotePlayback="disabled"、videoEl.setAttribute('disableRemotePlayback', '')全部被 Chrome/Safari 忽略 - 需确保元素已挂载且
src已赋值；若动态设置src，应在loadedmetadata后再执行video.disableRemotePlayback = true - Firefox 完全不识别；Safari 仅从 iOS 15.4 起支持 AirPlay 禁用提示；安卓 WebView 和微信 X5 内核大概率失效
controlslist="noremoteplayback" 能多撑一道防线吗
可以，但作用范围和 disableRemotePlayback 高度重叠，属于“双保险”式兼容补救：
- 写法是：
<video controls controlslist="nodownload noremoteplayback"></video>，注意空格分隔、不带引号、不赋值 - 比
disableRemotePlayback更早被 Chrome/Edge 支持，Safari 也基本识别，但同样不强制、不拦截协议 - 它只影响浏览器控件条里的投屏入口（比如右键菜单、地址栏 Cast 图标），不影响用户手动点浏览器右上角 Cast 按钮——那是投整个标签页
- 在微信/QQ 内置浏览器中大概率被忽略，需结合 UA 判断做降级提示（例如弹窗：“请勿使用微信投屏”）
自定义播放器里怎么监听并响应投屏行为
不能靠 fullscreenchange 或 webkitbeginfullscreen——投屏不触发这些事件。真正可用的是非标准但实际有效的 webkitPresentationMode 属性：
生成HTML格式PPT
下载
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
立即学习“前端免费学习笔记（深入）”；
- 轮询检测比事件监听更可靠：
setInterval(() => { if (video.webkitPresentationMode === "remote") { video.pause(); } }, 500); - 该属性在 Safari（macOS/iOS）和新版 Edge 中返回
"remote"，Chrome 桌面版部分版本支持，Firefox 不支持 - 必须配合
disableRemotePlayback = true使用，否则轮询到时投屏早已建立，暂停只是“事后补救” - 监听
webkitcurrentplaybacktargetiswirelesschanged可捕获无线目标切换瞬间，但触发时机不稳定，建议作为辅助手段
为什么加了所有限制还是能投屏成功
因为前端根本不在投屏链路的关键路径上：
- Chrome 的 Cast 按钮投的是整个渲染进程，和
<video></video>元素无关 - 智能电视端能否投，取决于它是否作为 DLNA/Miracast 接收器被发现，前端 HTML 无法干预网络层发现机制
- 若视频由
MediaStream（如摄像头、canvas.captureStream()）提供，disableRemotePlayback基本无效 - 服务端直供 HLS 地址给电视浏览器时，投屏行为发生在终端侧，前端代码早已失去控制权
真正需要防投屏的场景（如内部培训、付费课件），必须依赖服务端 DRM（如 Widevine L1）、动态 Token 鉴权、短时效 URL，以及终端设备侧关闭投屏接收功能——前端能做的，只是增加一道轻量 UI 层门槛，而不是构筑防火墙。
