手机端HTML视频无法彻底防投屏或录屏，因前端能力有限；disableRemotePlayback须作布尔属性直接写在video标签中才可能生效，但各浏览器支持度不一。
手机端 HTML 视频无法“彻底”防投屏或防录屏——这是前端能力边界决定的，不是配置没写对。 disableRemotePlayback 属性仅是提示，Safari 支持弱，Firefox 完全不认；系统级录屏（如 iOS 屏幕录制、Android 快捷录屏）、AirPlay 镜像、手机拍摄等行为，HTML 层面完全不可控。
disableRemotePlayback 属性怎么写才生效
必须作为布尔属性直接写在 标签里，不带等号、不赋值，否则浏览器忽略：
<video controls disableremoteplayback><source src="lesson.mp4" type="video/mp4"></source></video>
以下写法全部无效：disableRemotePlayback="true"、disableRemotePlayback="disabled"、disableRemotePlayback=""。Chrome/Edge 下能隐藏地址栏投屏图标和右键菜单里的 AirPlay 项；iOS Safari 自 15.4 起仅对部分 AirPlay 场景起提示作用；Android WebView 和微信/QQ 内核多数版本直接无视该属性。
监听投屏相关事件做辅助响应
虽然不能阻止投屏动作本身，但可捕获用户进入投屏状态的信号，及时暂停或遮罩画面：
-
webkitbeginfullscreen：Safari/iOS 进入全屏（含 AirPlay 投屏）时触发，可video.pause()并显示提示层 -
enterpictureinpicture：画中画启用时触发，适合教育类视频弹出版权提醒 -
webkitendfullscreen或leavepictureinpicture：恢复时可重置状态
注意：这些事件在部分安卓 WebView 中不触发；且用户若直接用系统级投屏（如华为手机“多屏协同”），事件根本不会冒泡到网页层。
真正起效的防护必须靠服务端+客户端协同
前端所有手段都只是“增加盗录成本”，核心防线在后端和播放器容器：
- 视频流必须走带签名的代理 URL（如
/proxy/v/abc123?t=1734682000&s=xxx），过期时间 ≤ 5 分钟，绑定用户 ID 和设备指纹 - 敏感课程启用 DRM：Widevine（Android/Chrome）、FairPlay（iOS/Safari），并配置
outputProtection要求 HDCP，可让不支持 HDCP 的投屏设备黑屏或降为标清 - 播放器 SDK 内置录屏检测（非标准 API）：监听
navigator.mediaDevices.getDisplayMedia调用、检测 canvas 帧率异常、比对 window.outerWidth 与 innerWidth 差值突变等，触发后立即video.src = ""并报错 - 跑马灯水印必须动态渲染：用
canvas每秒重绘含用户手机号/ID 的倾斜文字层，叠加在 video 上层，CSSpointer-events: none保证不影响操作
最后强调一点：所有基于 document.addEventListener('visibilitychange') 或 blur 事件暂停视频的做法，在 iOS Safari 投屏场景下基本失效——因为页面仍处于“可见”状态，只是画面被镜像出去了。这点最容易被忽略，却恰恰是盗录高发路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
