禁用远程播放控制需在标签中直接设置disableremoteplayback="true"属性，且须配合正确的cors配置（crossorigin="anonymous"及响应头），hls需额外配置enableremoteplayback: false；动态js设置无效，ios系统级镜像无法通过html禁用。
video 标签如何禁用远程播放控制（如 AirPlay、Chromecast）
直接加 disableRemotePlayback="true" 属性就行，这是 HTML5 原生支持的布尔属性，不需要 JS 干预，也不依赖浏览器前缀。
- 必须写成
disableRemotePlayback="true"，仅写disableRemotePlayback（无值）在部分浏览器（如旧版 Safari）中可能不生效 - 该属性只对
<video></video>有效，<audio></audio>同样支持，但对 iframe 内嵌视频无效 - Chrome 和 Edge 从 78+、Safari 从 13.1+ 完全支持；Firefox 目前不支持（会忽略该属性）
为什么加了 disableRemotePlayback 还能投屏？
常见原因是视频源用了跨域资源且未配置 CORS，导致浏览器降级处理——当 crossorigin 缺失或配错时，Safari/Chrome 可能绕过 disableRemotePlayback 的限制，尤其在 HLS 或 MSE 场景下。
- 确保视频资源响应头包含
Access-Control-Allow-Origin: *（或精确域名），且<video></video>标签显式声明crossorigin="anonymous" - 若用
src直接加载 MP4，通常没问题；但用MediaSource动态追加片段时，每个fetch()请求都需带正确 CORS 头 - HLS 播放器（如 hls.js）默认不继承 video 标签的
disableRemotePlayback，需手动在初始化时传入enableRemotePlayback: false配置
JS 动态设置 disableRemotePlayback 是否可靠？
不可靠。DOM 属性必须在 video 元素插入文档前或加载前设置，动态 setAttribute 在多数情况下无效（尤其是已触发加载流程后）。
- 错误写法：
video.setAttribute('disableRemotePlayback', 'true')（执行太晚，属性被忽略） - 正确时机：创建元素时直接写死属性，或用 innerHTML 插入前拼好字符串，例如：
<video disableremoteplayback="true" src="..."></video> - React/Vue 等框架中，确保该属性作为 prop 一次性传入，避免条件渲染导致属性丢失
移动端 iOS Safari 的额外限制
iOS 上即使设了 disableRemotePlayback="true"，用户仍可能通过控制中心的「屏幕镜像」按钮强制投屏——这不是 bug，而是系统级行为，HTML 层无法拦截。
- 该属性仅阻止视频右下角的 AirPlay 图标出现，不禁止系统级镜像功能
- 若业务强要求禁投，需结合服务端 DRM（如 FairPlay）或 App 容器内 WebView 的原生 API 控制（如 WKWebView 的
allowsAirPlayForMediaPlayback设为 false） - 纯 Web 页面无法完全屏蔽系统镜像，这点容易被误认为是前端代码没写对
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
