HTML无法防投屏，因浏览器和系统级投屏（如Chrome Cast、AirPlay）绕过前端控制；disablePictureInPicture等属性仅影响画中画或内联播放，与投屏无关。

HTML 本身没有“防投屏”能力，浏览器和操作系统层面的投屏（如 Chrome 的 Cast、Windows 的无线显示、iOS 的 AirPlay）不受 <video></video> 标签或前端代码直接控制。所谓“防投屏”实际是无效概念——你无法用 HTML/JS 禁止用户将整个浏览器窗口或系统屏幕投出去。

为什么 disablePictureInPicture 和 webkit-playsinline 不等于防投屏

这些属性常被误认为能“阻止投屏”，但它们只影响特定子功能：

• disablePictureInPicture="true"：仅禁用画中画（PiP）按钮，不影响 Chromecast 或 Miracast 投屏
• webkit-playsinline / playsinline：仅让 iOS 视频在页面内播放（不全屏），和投屏完全无关
• controlsList="nodownload noplaybackrate"：仅隐藏右键菜单中的下载/倍速选项，对投屏无任何拦截作用

真正会被投屏捕获的内容，根本绕不开

只要视频在页面中正常播放，用户打开系统级投屏（如 Windows + K、macOS 控制中心里的“屏幕镜像”、手机投射 App），整个 tab 或窗口就会被实时编码传输。前端无权干预：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 投屏走的是 GPU 截图或桌面采集通道，不是 HTTP 请求，fetch 或 XHR 拦截无效
• MediaStream API 无法检测当前是否处于投屏会话（浏览器未暴露该状态）
• 尝试用 document.hidden 或 pageVisibility 判断？投屏时页面仍为 visible

如果必须降低被录屏/投屏风险，只能做有限妥协

这些手段不防投屏，但可能提高录制门槛或明确法律边界：

立即学习“前端免费学习笔记（深入）”；

• 使用 DRM 方案（如 Widevine、FairPlay）：需接入商业 DRM 服务商（如 Bitmovin、JW Player），且仅对 encrypted media extensions (EME) 流有效，普通 <video src="xxx.mp4"></video> 依然裸奔
• 添加动态水印：用 canvas 叠加用户 ID 时间戳，通过 requestVideoFrameCallback 每帧绘制，但水印可被裁剪或模糊处理
• 服务端校验播放上下文：比如检查 Referer、User-Agent、JWT token 有效期，拦截非预期请求，但这拦不住已获取到视频 URL 的用户

真正的防护边界在服务端和版权协议层，而不是 HTML 标签里加几个属性。把希望寄托于 controlsList 或 oncontextmenu="return false" 是典型的技术错觉。