HTML video标签无法真正防投屏，disablePictureInPicture仅隐藏画中画UI入口，controlsList="noremoteplayback"在Chrome 117+外无效且不支持AirPlay/Miracast，Safari/Firefox忽略；真防护需DRM（Widevine/FairPlay）+服务端鉴权+加密分片。

HTML 视频无法真正“防投屏”——浏览器的 disablePictureInPicture、webkit-playsinline 等属性只能影响部分行为，但投屏（如 Chrome 的 Cast、Windows 的无线显示、iOS 的 AirPlay）是系统/浏览器级能力，前端代码无权禁用硬件或系统协议层的投屏入口。

为什么 disablePictureInPicture 和 controlsList 不起作用？

这两个属性只控制浏览器内部 UI 行为：

• disablePictureInPicture 仅隐藏画中画按钮，不影响右键菜单里的“投射到设备”或地址栏 Cast 图标
• controlsList="nodownload noremoteplayback" 中的 noremoteplayback 在 Chrome 117+ 才开始支持，且仅对 部分 远程播放（如 Chromecast）有弱抑制，对 AirPlay、Miracast、Windows 投屏完全无效
• Safari 完全忽略 noremoteplayback；Firefox 不支持该属性

真正在意投屏的场景，应该关注什么？

如果你的服务需要保护视频内容不被大屏截获（比如付费课程、内部培训），重点不在“阻止投屏动作”，而在于“让投屏后的内容不可用”：

Wechat Article Html

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

下载

• 投屏本质是把当前 tab 或窗口画面镜像过去——只要视频能解码渲染，就可能被录屏或投出
• 真正可控的是：是否提供可下载的 .mp4 链接、是否启用 DRM（如 Widevine / FairPlay）、是否使用 MSE + 加密分片（如 CENC）
• 纯 HTML <video></video> 标签 + 公开 URL 永远无法防投屏；必须配合服务端鉴权 + DRM 授权流程

开发时最容易误信的“防投屏”写法

以下代码看似合理，实则无效或误导性强：

<video controls disablepictureinpicture controlslist="nodownload noremoteplayback" playsinline webkit-playsinline x5-playsinline src="https://example.com/video.mp4"></video>

问题点：

• noremoteplayback 在移动端 Safari 和多数 Android 浏览器中被忽略
• playsinline 只影响 iOS 是否全屏，和投屏无关
• 公开的 src 地址一旦被拿到，用户可直接粘贴到新标签页再投屏
• 没有 DRM，浏览器 DevTools → Network 里找 mp4 或 ts 就能下载原始流

如果业务真有强内容保护需求，别在 <video></video> 标签上做文章——去对接 EME（Encrypted Media Extensions），用 MediaKeys + 许可证服务器，否则所有“防投屏”都是心理安慰。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！