HTML视频防投屏如何校验播放权限-html教程-PHP中文网

controlsList="noremoteplayback"仅隐藏投屏按钮而不校验权限，真正防投屏需服务端动态token鉴权、HLS/DASH文件受保护、前端调用navigator.presentation检测（Chrome/Edge支持）、并启用DRM输出保护策略。

html视频防投屏如何校验播放权限

controlsList="noremoteplayback" 本身不校验权限，只隐藏投屏入口

这个属性只是告诉浏览器：“别在控制栏和右键菜单里显示投屏按钮”，它不发请求、不校验 token、不拦截 cast API 调用。用户仍可通过系统级投屏（如 macOS 屏幕镜像、Windows 投影到此电脑）、第三方工具（OBS、Scrcpy）或开发者工具注入脚本绕过。

真正校验播放权限必须发生在服务端或播放器初始化阶段：

视频资源 URL 必须带动态 token（如 video.m3u8?token=eyJhbGciOiJIUzI1Ni...&exp=1734647542），后端校验签名、有效期、用户 ID、设备指纹
若用 HLS/DASH，m3u8 或 mpd 文件本身需受鉴权保护（返回 403 表示权限拒绝），不能是公开可访问的静态路径
前端初始化播放器前，先 fetch('/api/play/authorize?video_id=abc')，服务端返回 { allowed: true, drm: 'widevine', licenseUrl: '...' } 等策略

监听 navigator.presentation API 可检测系统级投屏行为

Chrome 和 Edge 支持 navigator.presentation，能感知当前页面是否被投射到远程设备：

if ('presentation' in navigator) {
  navigator.presentation.connectionList.then(list => {
    list.addEventListener('connectionavailable', e => {
      console.warn('检测到投屏连接:', e.connection.url);
      // 此处可触发暂停、上报或水印增强
      video.pause();
      showWatermarkOverlay();
    });
  });
}

注意：navigator.presentation 在 Safari 和 Firefox 中不支持；iOS 完全不可用；且仅对 Chrome Cast 类投屏有效，对 AirPlay 或 Miracast 无响应。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

DRM 是唯一能限制投屏内容输出的方案

如果业务真有强防投屏需求（如金融培训视频、内部合规课程），仅靠 HTML 属性或 JS 监听远远不够。必须启用 DRM：

使用 MediaKeys + MediaEncryptedEvent 流程，配合 Widevine（Chrome/Edge）、FairPlay（Safari/macOS）、PlayReady（Edge旧版）
在 DRM 许可证中配置 outputProtection 策略：例如 {"HDCP": "required"}，强制要求投屏链路支持 HDCP 加密，多数非认证投屏设备会直接失败
注意：DRM 不阻止用户录屏（系统级录屏仍可捕获解密后的帧），但能阻断未授权设备的 HDMI/无线投屏输出