防投屏与防盗链技术目标、位置及手段均不同：前者为客户端弱干预，无法真正阻断投屏；后者依赖服务端校验url合法性，前端仅配合。二者叠加仍无法防录屏或下载，高价值内容须用hls+aes-128加密及动态水印。
防投屏是客户端行为控制，防盗链是服务端请求拦截
防投屏管的是用户能不能把当前页面里的视频“镜像”到电视或投影仪上；防盗链管的是别人能不能在别的网站、脚本或地址栏里直接请求你的视频文件。两者作用位置、技术手段、防护目标完全不同，混用或只做其一都会留明显缺口。
防投屏靠disablePictureInPicture和webkit-playsinline等属性，但极易绕过
浏览器原生投屏（如 Chrome 的 Cast 按钮）无法被 JS 完全禁用，只能弱干预：
-
video标签加disablePictureInPicture="true"可隐藏右键菜单里的“画中画”选项，但不影响投屏按钮 - 加
webkit-playsinline和playsinline能让 iOS 视频在页面内播放，减少全屏触发，但不阻止 AirPlay 弹窗 - 监听
webkitpresentationmodechanged事件可检测是否进入投屏状态，但无法取消——触发后只能暂停播放并提示用户 - 真正阻断投屏需依赖系统级权限（如 Android 的 DRM 保护输出），Web 环境下做不到
防盗链靠服务端验证Referer或动态token，前端只是配合层
防盗链的核心不在 HTML 或 JS，而在资源 URL 是否被服务器认可：
- 仅靠
Referer检查（如 Nginx 的valid_referers）容易伪造，适合内部低敏资源 - 生产环境必须用带签名的临时 URL，例如
/video/123.mp4?token=abc&exp=1718123456，后端校验时间、用户身份与 HMAC 签名 - 前端 JS 即使把
src设为空、改用Blob URL加载，也不能替代服务端校验——否则抓包拿到 Blob 的源地址照样能复现请求 - CDN 层需同步配置
Access-Control-Allow-Origin和X-Frame-Options，防止 iframe 套嵌或跨域盗取
二者叠加仍无法防录屏或下载，高价值内容必须上 HLS+AES-128
用户开开发者工具看 Network 面板、用 ffmpeg 抓流、录屏软件截画面——这些都不受防投屏或防盗链影响。如果视频本身没加密，只要能播，就等于能存。真正需要保护的内容，必须：
- 服务端切片时用 AES-128 加密 TS 文件，并动态下发密钥（密钥 URL 本身也要带 token 校验）
- 前端用 MSE +
MediaSource加载解密逻辑，避免明文 URL 泄露 - 水印叠加在解码后的帧上（而非 CSS 层叠），且含动态字段（如
user_id+timestamp）
防投屏和防盗链只是表层动作，它们解决不了“视频一旦解码就可控”的根本问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
