HTML怎么在内部系统做视频防投屏-html教程-PHP中文网

disableremoteplayback 属性必须以无值布尔形式书写，仅 chrome/edge 可靠支持，safari 从 ios 15.4 起支持，firefox 完全不识别；正确写法为，它仅提示浏览器“请勿投屏”，非强制机制。

html怎么在内部系统做视频防投屏

disableRemotePlayback 属性必须写成无值布尔形式

它只在 Chrome/Edge 中可靠生效，Safari 从 iOS 15.4 起才支持 AirPlay 禁用提示，Firefox 完全不识别。写成 disableRemotePlayback="true" 或 disableRemotePlayback="disabled" 会被浏览器忽略——这是最常踩的坑。

正确写法只有这一种：<video controls disableremoteplayback></video>。它不是开关，只是向浏览器发一个“请勿投屏”的信号，不强制、不可靠，但却是 HTML5 原生唯一能做的。

动态设置（如 videoEl.setAttribute('disableRemotePlayback', '')）在 Safari 和部分 Android WebView 中可能无效，建议初始化时就声明
该属性对系统级屏幕镜像（如 macOS 镜像、Windows 投影到此电脑）完全无影响
如果视频是通过 <iframe></iframe> 嵌入的第三方播放器（如腾讯云、阿里云 SDK），这个属性通常被封装层拦截，不起作用

controlslist="noremoteplayback" 是更广谱的兼容写法

controlslist 是比 disableRemotePlayback 更早被支持的属性，Chrome、Edge、部分新版 Safari 都认，且语义更明确：禁用远程播放入口。它和 disableRemotePlayback 可以共存，互不冲突。

写法是：<video controls controlslist="nodownload noremoteplayback"></video>。注意空格分隔多个指令，noremoteplayback 不带引号、不赋值。

仅隐藏右键菜单和地址栏中的投屏图标，不影响已建立的投屏会话（比如用户先点 Cast 再刷新页面，投屏仍在继续）
在微信内置浏览器、QQ 浏览器等 X5 内核环境里，controlslist 大概率被忽略，需额外判断 UA 并降级提示
搭配 crossorigin="anonymous" 才能确保后续 Canvas 水印逻辑可读取视频帧，否则会触发 CORS 错误

监听 webkitbeginfullscreen 和 enterpictureinpicture 事件做兜底响应

用户仍可能通过快捷键（F11、Cmd+Shift+F）、系统级手势或调试工具绕过 UI 限制。这时前端能做的，是感知异常行为并干预。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

关键事件有：webkitbeginfullscreen（Safari/Chrome 全屏前）、enterpictureinpicture（进入画中画）、visibilitychange（切到后台）。监听后可执行暂停、弹窗警告或上报行为日志。

videoEl.addEventListener('enterpictureinpicture', () => { videoEl.pause(); alert('画中画已禁用'); }) —— 注意：调用 video.exitPictureInPicture() 必须由用户手势触发，不能自动执行
在企业内网环境中，可结合 navigator.permissions.query({name: 'display-capture'}) 检测是否已被授予录屏权限，异常时主动中断播放
不要依赖 document.hidden 判断投屏状态——投屏时页面仍处于 visible 状态

真正防不住的环节，必须靠服务端补位

所有 HTML 层面的属性和事件监听，都拦不住抓包下载 URL、本地保存 m3u8/ts、手机拍摄投屏画面这三类行为。内部系统若真有敏感内容（如合规培训、风控案例），光靠前端是危险的。

必须配合的服务端手段包括：

每个视频请求附带一次性 JWT Token，含用户 ID、设备指纹哈希、10 分钟有效期，后端校验失败则返回 403
HLS 分片使用 AES-128 加密，密钥由独立授权接口动态下发（URL 带签名，且签名含时间戳与 IP 绑定）
对高敏视频启用 Widevine CDM，license server 配置 outputProtection 要求 HDCP 1.4+，阻止非加密输出路径
前端 Canvas 动态叠加半透明文字水印（含工号+时间），服务端转码时再加一层静态水印，双保险

最后提醒一点：X5 内核（微信/QQ）和 Android WebView 对这些属性的支持碎片化严重，测试时务必覆盖真实终端型号，别只信桌面 Chrome 的表现。