手机浏览器HTML视频怎么防投屏？主流浏览器适配方法-html教程-PHP中文网

disableRemotePlayback 仅为提示性属性，非强制策略，其效果取决于浏览器实现：Chromium系支持较好，Safari仅部分生效，Firefox完全不识别，国产浏览器行为混乱；正确写法是作为无值布尔属性直接写在video标签中。

手机浏览器html视频怎么防投屏？主流浏览器适配方法

HTML5 的标签本身不提供防投屏能力，disableRemotePlayback 仅是提示性属性，不能阻止 AirPlay / Chromecast / 系统镜像等行为。

它不是强制策略，只是向浏览器“建议”不要显示投屏入口。实际是否隐藏、是否拦截、是否响应，完全取决于浏览器实现：

Chrome / Edge（Chromium 内核）：支持较好，设为布尔属性后，地址栏 TV 图标和右键菜单中的投屏项通常会置灰或消失
Safari（iOS 15.4+ / macOS 12.3+）：仅对 AirPlay 有部分提示效果，且需视频元素处于可播放状态才可能生效；若页面使用了 webkit-playsinline 或自定义控件，可能直接忽略该属性
Firefox：完全不识别，写上也无任何作用
vivo / QQ / 华为等国产浏览器：行为高度不一致，部分版本无视该属性，部分版本仅在特定 UA 下响应，甚至存在“设了反而更易被注入投屏逻辑”的反效果

必须作为**无值布尔属性**直接写在标签中，否则会被浏览器当作无效字符串忽略：

<video controls disableremoteplayback><source src="video.mp4" type="video/mp4"></source></video>

以下写法全部错误，会导致属性被丢弃：

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

disableRemotePlayback="true"
disableRemotePlayback="disabled"
video.disableRemotePlayback = true（JS 动态设置，在多数浏览器中初始化后设置无效）
通过 setAttribute('disableRemotePlayback', '') 设置（部分 Chromium 版本会识别，但 Safari 和 WebView 环境普遍不认）

用户能否投屏，和你写的 HTML 关系不大，更多取决于运行环境：

网页是否启用 MediaSession API：未调用 navigator.mediaSession 设置元信息的页面，vivo / QQ 浏览器等往往默认禁用投屏入口
视频是否带音频轨道：某些浏览器（如微信内置浏览器）对静音视频放宽投屏限制，而有声视频更容易触发系统级投屏按钮
当前播放状态与手势交互：Safari 要求用户至少触发一次 play() 才激活 AirPlay 按钮；vivo 浏览器要求播放中右滑才能唤出 TV 图标
服务端响应头：若返回 Content-Disposition: attachment 或缺失 Accept-Ranges: bytes，部分浏览器会拒绝启用投屏协议栈

与其纠结前端属性，不如把资源控制权收回到服务端和播放流程中：

对敏感视频启用 DRM（Widevine / FairPlay），并在 license server 中配置 outputProtection 策略，要求 HDCP 加密输出（这能真正阻止非授权投屏设备解码）
服务端校验播放请求中的 Referer、User-Agent、JWT Token 及绑定 IP/设备指纹，Token 设为短时效（如 5 分钟）
前端监听 webkitbeginfullscreen 和 enterpictureinpicture 事件，检测到即暂停并弹窗警告——这不是阻止，而是增加用户操作成本
避免使用第三方播放器 SDK（如 video.js 插件、腾讯云点播 Web SDK），它们自带的投屏模块常绕过 disableRemotePlayback

最常被忽略的一点：无论你怎么设属性，用户用手机录屏、用另一台设备拍电视画面、或抓包下载分片，都完全不受影响。防投屏的本质，是防“便捷投屏”，不是防“所有画面获取”。