Chrome提示playbackPrevented是因严格自动播放策略阻止未交互时的play()调用，需确保用户手势触发、元数据加载完成及静音设置；disablePictureInPicture等属性仅控制UI，无法真正禁用投屏。
Chrome 浏览器提示 playbackPrevented 怎么办？
这不是“防投屏代码”生效了，而是浏览器主动阻止了自动播放——尤其在用户未与页面交互前调用 play() 时。Chrome 66+ 默认启用严格 autoplay 策略，video.play() 会返回 Promise 并可能 reject，错误信息通常是 "DOMException: play() failed because the user didn't interact with the document first."。
调试关键点：
- 在
play()后加.catch(e => console.error(e))，确认是否卡在这一步 - 检查
video元素是否已加载元数据（readyState >= 2），否则play()必然失败 - 确保触发播放的事件是用户真实手势（
click、touchstart），而非setTimeout或load回调 -
muted属性能大幅提高静音视频自动播放成功率，但和“防投屏”无关
disablePictureInPicture 和 webkit-playsinline 为什么没效果？
这两个属性常被误认为“防投屏开关”，其实它们只控制播放器 UI 行为，不干预系统级投屏（如 Chrome 的 Cast 按钮、iOS 镜像）。disablePictureInPicture="true" 仅隐藏画中画按钮；webkit-playsinline 是 iOS Safari 专有属性，让视频在网页内播放而非全屏，不影响 AirPlay。
实操注意：
立即学习“前端免费学习笔记（深入）”；
- 必须写成布尔属性形式：
<video disablePictureInPicture>，而不是disablePictureInPicture="false" -
webkit-playsinline在 iOS 10+ 才生效，且需配合playsinline（标准属性）双写才稳妥 - 这些属性无法禁用 macOS 的镜像菜单或 Windows 的“连接到无线显示”功能
真想限制投屏，只能靠服务端 DRM？
纯前端没有可靠手段阻止投屏。所谓“防投屏”本质是内容保护问题，必须依赖平台级能力：Android TV 的 Widevine L1、iOS 的 FairPlay Streaming、桌面端的 PlayReady。HTML5 <video> 标签本身不提供投屏拦截 API。
如果你看到某些网站“投屏按钮消失”，大概率是：
- 检测到
navigator.mediaSession或document.hasFocus()异常，主动隐藏自定义投屏 UI - 使用 MSE + EME 加密流，让投屏设备因解密失败而黑屏（但原生 Cast 按钮仍存在）
- 通过
chrome.castSDK 自建投屏逻辑，绕过系统按钮——这反而需要主动集成投屏，不是禁止
调试时该监控哪些 DOM 属性和事件？
别盯着“怎么禁投屏”，先确认视频基础行为是否可控。重点监听：
-
video.oncanplaythrough：确保资源可流畅播放，避免因网络卡顿误判为“被拦截” -
video.onemptied：如果频繁触发，说明视频源被重置（比如 src 动态切换后未重载） -
video.disableRemotePlayback属性（实验性）：设为true可隐藏 Chrome 的 Cast 按钮，但 Safari 和系统级镜像不受影响 -
video.getVideoPlaybackQuality()：查droppedVideoFrames，判断是否因性能问题导致画面异常，被误认为“投屏失效”
真正难处理的是跨平台一致性——iOS 的 AirPlay、Android 的 Chromecast、Windows 的 Miracast，底层协议和权限模型完全不同，前端能做的边界非常窄。
