HTML无法真正防投屏，需组合声明式属性（如正确使用disableRemotePlayback布尔属性）、服务端动态鉴权与播放行为干预；前端仅能提示或隐藏UI，核心防护在服务端签名URL、HDCP/DRM等策略。
HTML 本身无法真正“防投屏”，所有前端属性都只是提示或 UI 隐藏，不能阻止系统级行为。想降低投屏风险，必须组合使用声明式属性 + 服务端控制 + 播放行为干预。
disableRemotePlayback 属性怎么写才生效
这是唯一原生支持的投屏提示属性，但极易写错：
- 必须作为布尔属性直接写在
<video></video>标签里：<video disableremoteplayback controls></video> -
disableRemotePlayback="true"或disableRemotePlayback="disabled"是无效写法，浏览器会忽略 - 只对 Chromium 系统（Chrome/Edge）稳定生效；Safari 自 iOS 15.4 起仅部分支持 AirPlay 提示；Firefox 完全不识别
- 它不阻止用户手动开启系统投屏（如 macOS 的 AirPlay 菜单），也不影响 Chrome 右上角 Cast 按钮投整个标签页
controlsList="noremoteplayback" 隐藏投屏按钮
这个属性用于隐藏原生控件中的投屏入口（如 Chrome 地址栏 Cast 图标、右键菜单里的“投射到设备”）：
- 必须和
controls属性一起用，否则无 UI 可隐藏：<video controls controlslist="noremoteplayback"></video> - 仅 Chromium 支持；Safari 和 Firefox 忽略该值
- 它不禁止投屏功能本身，只藏按钮——用户仍可通过地址栏图标、系统菜单或快捷键触发
- 可叠加其他控制项，例如：
controlsList="noremoteplayback nodownload nofullscreen"
监听并拦截投屏相关事件
前端能做的有限防御，集中在行为感知与即时响应：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 监听
webkitbeginfullscreen（iOS/Safari 全屏前）或enterpictureinpicture（进入画中画），立即调用document.exitPictureInPicture()并暂停播放 - 注意：这些事件无法捕获系统级投屏（如 AirPlay 菜单点击），但能应对 JS 主动触发或部分浏览器自动行为
- 动态设置
disableRemotePlayback = true在 Safari 中常失效，推荐初始化时就声明 - 搭配
playsinline和webkit-playsinline可减少 iOS 上意外全屏/投屏倾向
真正起效的环节在服务端
前端所有操作都是障眼法。关键防护必须落在请求链路上：
- 视频 URL 不应是静态直链，而应是带签名、时效、绑定用户/设备的临时地址，例如：
/proxy/video/abc123?t=173XXXXXX&s=xxxxxx&u=user_456 - Nginx 或 CDN 层校验签名与时间戳，过期或非法请求直接返回 403
- 配置
Access-Control-Allow-Origin严格限定域名，禁用跨域加载 - 对 HLS/DASH 流，密钥不应硬编码在前端，而由后端按需下发，且 license server 可限制输出类型（如要求 HDCP）
- 别信“禁右键”“禁 F12”——DevTools 里看 Network 面板照样能抓到分片 URL
最易被忽略的一点：disableRemotePlayback 和 controlsList 都不阻止系统录屏、手机拍摄、或抓包重放。如果你的内容敏感，前端能做的只是增加一点门槛；真正的防线，得建在服务端鉴权、流加密和 DRM 授权策略里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
