disableRemotePlayback属性仅作投屏提示，非强制策略；必须裸写为布尔属性，Chrome/Edge支持良好，Safari自iOS 15.4起部分支持且需playsinline+muted，Firefox完全忽略。
disableRemotePlayback 属性写对了却没效果，或者控制台报错、视频直接不加载——这不是你代码写错了，而是浏览器根本不认这个属性，或它被其他策略覆盖了。
disableRemotePlayback 属性无效的典型报错和原因
最常见的是控制台静默无反应，或出现 TypeError: Cannot read property 'addEventListener' of null（因 video 元素未就绪就操作），但更隐蔽的问题是：disableRemotePlayback 被忽略却不报错。根本原因有三个：
-
disableRemotePlayback="true"或disableRemotePlayback="disabled"—— 这是错误写法，必须作为布尔属性裸写，不带等号和值 - video 元素还没插入 DOM 就尝试设置该属性（比如 JS 动态创建后立即
el.setAttribute('disableRemotePlayback', '')），部分浏览器（尤其是 Safari）只在初始化时读取该属性 - 用了
自身设src，iOS/Safari 下可能连 video 元素都未触发加载，属性自然失效
Chrome 和 Safari 中 disableRemotePlayback 的行为差异
Chrome/Edge 会隐藏地址栏投屏图标、禁用右键菜单里的 “Cast” 项；Safari（iOS 15.4+ / macOS 12.3+）仅对 AirPlay 图标做灰显提示，且需配合 playsinline 和 muted 才稳定生效。关键区别：
- Safari 不支持通过 JS 动态添加
disableRemotePlayback：必须在 HTML 源码中声明，videoEl.disableRemotePlayback = true无效 - Chrome 对
autoplay+disableRemotePlayback组合更宽容；Safari 若未加muted，连播放都会被拦截，更别说投屏控制 - Firefox 完全忽略该属性，控制台不会报错，但也不起作用 —— 别在 Firefox 里测这个功能
防投屏真正出问题时，先查这三件事
所谓“防投屏报错”，90% 是误判：你以为是 disableRemotePlayback 报错，其实是视频根本没加载成功，导致后续逻辑崩了。优先排查：
- 打开 DevTools → Network 面板，过滤
mp4或webm，确认视频请求返回200且Content-Type是video/mp4，不是text/plain或application/octet-stream - 检查 video 元素是否设置了
crossorigin="anonymous"—— 如果视频跨域且没配 CORS，Canvas 滤镜或 JS 读取video.readyState会失败，控制台报DOMException: The video element has no video track - 在控制台手动执行
document.querySelector('video').canPlayType('video/mp4')，返回""（空字符串）说明当前浏览器压根不支持该格式，disableRemotePlayback再怎么写也白搭
防投屏不是靠一个属性就能落地的事。disableRemotePlayback 只是个提示信号，它既不阻止录屏，也不加密内容，更不替代服务端鉴权。最容易被忽略的点是：你在 HTML 里写了这个属性，但视频源本身是 HTTP 协议、或托管在不支持 HTTPS 的内网服务上——Chrome 直接拒绝加载媒体，连 video 元素都进不了 loadedmetadata 状态，这时候去调试“为什么 disableRemotePlayback 不生效”，方向就完全错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
