html无法防投屏，因系统级投屏绕过dom和js；disableremoteplayback仅隐藏按钮，不阻止实际投屏；真正防护需服务端drm（如fairplay/widevine）配合硬件加密输出。
HTML 本身无法实现视频防投屏，所有基于 <video></video> 标签的前端方案（包括 CSS 隐藏、禁用右键、监听 webkitdisplayingfullscreen 等）对系统级投屏（如 macOS 屏幕镜像、Windows 投射、Chromecast、AirPlay）完全无效。
为什么 <video></video> 加 JS 拦不住 AirPlay / Miracast
投屏本质是操作系统或浏览器进程将当前屏幕/标签页画面编码后推流，不经过网页 DOM 或事件循环。即使你用 document.exitFullscreen() 强制退出全屏、用 video.disableRemotePlayback = true 关闭远程播放按钮，也无法阻止用户用系统快捷键（Cmd+R 屏幕录制、Win+K 投射）捕获整个窗口。
-
disableRemotePlayback只隐藏投屏 UI 按钮，不影响底层能力（Chrome 87+、Safari 16.4+ 支持，但 Firefox 不支持） - 监听
webkitfullscreenchange或pictureInPictureElement变化只能响应用户操作，无法感知后台投屏进程 - CSS
filter: blur()或 canvas 覆盖层在投屏时通常被绕过（尤其硬件加速路径）
disableRemotePlayback 的真实作用和写法
它唯一能做的，是让 <video></video> 元素不显示投屏按钮（如 Safari 地址栏右侧的 AirPlay 图标），降低普通用户一键投屏的便利性，但技术用户仍可从系统菜单投屏。
<video controls disableremoteplayback><source src="video.mp4" type="video/mp4"></source></video>
- 必须写在
<video></video>标签上，JS 动态设置（video.disableRemotePlayback = true）在部分 Android WebView 中可能不生效 - 仅对原生
<video></video>生效，对通过MediaStream播放的 WebRTC 视频无效 - Android Chrome 需要开启
chrome://flags/#enable-remote-playback才能测试效果（默认已启用）
真正能限制投屏的只有服务端 + DRM
如果内容敏感（如付费课程、版权视频），必须放弃纯 HTML 方案，走标准流媒体保护路径：
- 使用 HLS 或 DASH 封装，配合
fairplay（iOS/macOS）、widevine（Chrome/Android）、playready（Edge/Windows）等 CDM（Content Decryption Module） - DRM 密钥由授权服务器动态下发，CDM 在硬件安全环境（TEE）中解密并限制输出（例如：Widevine L1 支持 HDCP 加密输出，可阻止非认证显示器显示高清帧）
- 即使用户投屏，接收端（Apple TV、Chromecast）也需通过 DRM 认证，未授权设备会黑屏或降为 SD
这意味着你不能直接用 <video src="xxx.mp4"></video>，而要接入 shaka-player、video.js + dash.js 等支持 DRM 的播放器，并配置好许可证服务器。
防投屏不是前端能解决的问题。能做的只是加一层“别点这里”的提示，真要拦住，得靠服务端发密钥、播放器调 CDM、设备验 HDCP——这些 HTML 标签一个都碰不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
