单纯靠disableRemotePlayback或disablePictureInPicture无法真正防投屏，必须前端限制入口+行为监听+服务端协同校验；二者仅影响UI层触发点，不拦截系统快捷键、JS主动调用、整页投屏等路径，且Firefox完全忽略；正确写法为无值布尔属性disableRemotePlayback；需叠加disablePictureInPicture、controlsList="nodownload noremoteplayback"、playsinline等，并配合JS监听enterpictureinpicture等事件及时退出；服务端须校验Token、Referer、Origin，动态下发密钥，启用DRM输出保护。
单纯靠 disableRemotePlayback 或 disablePictureInPicture 无法真正防投屏，它们只是向浏览器“提个醒”，不是强制策略；要提升防投屏效果，必须分层控制：前端限制入口 + 行为监听 + 服务端协同校验。
为什么 disableRemotePlayback 属性经常失效
该属性只影响浏览器 UI 层的投屏触发点（如右键菜单、地址栏 Cast 按钮），但完全不拦截以下路径：
- 用户手动按系统级快捷键（如 macOS 的
Cmd+Shift+P或 Android 的投屏开关） - JS 主动调用
video.requestPictureInPicture()或document.querySelector('video').webkitSetPresentationMode('picture-in-picture') - Chrome 浏览器点击右上角 Cast 图标——这是投整个标签页，和 video 标签无关
- Firefox 完全忽略该属性，设了也白设
更关键的是：disableRemotePlayback="true" 或 disableRemotePlayback="disabled" 是错误写法，必须以无值布尔属性形式存在：disableRemotePlayback，否则浏览器直接忽略。
如何组合使用 HTML 属性封死常见投屏入口
单个属性作用有限，需叠加声明并兼顾兼容性：
立即学习“前端免费学习笔记（深入）”；
- 必须同时写
disableRemotePlayback和disablePictureInPicture，两者互不替代 - 加上
controlsList="nodownload noremoteplayback"（Chrome/Edge 支持），隐藏右键菜单中的下载和投屏项 - 移动端务必加
playsinline和webkit-playsinline，避免 iOS 强制全屏后暴露更多系统级操作入口 - 不要依赖
autoplay启动视频——自动播放易被拦截，且缺失用户手势上下文，导致后续 JS 监听失效
推荐完整写法：
<video disableRemotePlayback disablePictureInPicture controlsList="nodownload noremoteplayback" playsinline webkit-playsinline controls> <source src="video.mp4" type="video/mp4"> </video>
必须配合 JS 监听并干预实际投屏行为
HTML 属性只能“藏按钮”，JS 才能“拦动作”。重点监听两个事件：
-
enterpictureinpicture：一旦进入 PiP，立即调用document.exitPictureInPicture()并暂停播放 -
webkitbeginfullscreen（Safari）或fullscreenchange（通用）：检测到全屏即刻警告或降级显示
注意：监听必须在 video 元素插入 DOM 后、用户首次交互前完成；动态设置 video.disablePictureInPicture = true 在 Safari 中大概率不生效。
简易干预示例：
const v = document.querySelector('video');
v.addEventListener('enterpictureinpicture', () => {
if (document.pictureInPictureElement === v) {
document.exitPictureInPicture().catch(() => {});
v.pause();
}
});
真正有效的防投屏必须延伸到服务端
前端所有手段都可绕过。若内容敏感，必须切断投屏的“原料”：
- 视频 URL 必须带短期有效 Token（如
video.mp4?token=abc123&exp=1718123456），过期即 403 - 服务端校验请求头
Referer和Origin，非白名单域名一律拒收 - 对 HLS/DASH 流，密钥（
KEY）必须由后端动态下发，不能硬编码在前端 JS 或 m3u8 文件中 - 启用 DRM（如 Widevine）时，在 license server 策略中设置
outputProtection，要求 HDCP 输出，物理断开非授权投屏链路
最后提醒：任何前端方案都无法阻止手机拍摄屏幕、系统录屏或抓包下载 URL——这些属于物理层或网络层风险，得靠水印、权限管控和法律手段兜底。
