怎么用原生JS做HTML视频防投屏？免库开发教程-html教程-PHP中文网

disableRemotePlayback 属性必须作为布尔属性直接写在 HTML 中，即，不可赋值或动态设置；它仅向浏览器提示禁用投屏，实际效果依赖浏览器支持（Chrome/Edge 支持良好，Safari 有限支持，Firefox 不支持），无法替代 DRM 等后端防护措施。

怎么用原生js做html视频防投屏？免库开发教程

disableRemotePlayback 属性必须写成布尔属性，不能赋值

原生 HTML5 video 标签里唯一能影响投屏行为的属性就是 disableRemotePlayback，但它不是“防投屏”，只是向浏览器发一个“请勿投屏”的提示信号。它的生效前提是：你得写对。

错误写法会导致该属性被完全忽略：

disableRemotePlayback="true"（字符串值 → 无效）
disableRemotePlayback="disabled"（非布尔属性形式 → 无效）
video.setAttribute('disableRemotePlayback', 'true')（动态设置字符串 → 失效）

正确写法只有一种： —— 不带等号、不带引号、不带值，纯布尔属性。它必须在 DOM 初始化时就存在，部分浏览器（如 Safari）对动态添加不响应。

Chrome/Edge 有效，Safari 有限支持，Firefox 完全不认

这个属性的实际效果严重依赖浏览器实现：

Chrome / Edge（Chromium 内核）：支持良好，设为 disableRemotePlayback 后，地址栏投屏图标会置灰，右键菜单中“投射到设备”选项消失
Safari（macOS/iOS）：自 iOS 15.4 和 macOS Monterey 12.3 起支持 AirPlay 禁用提示，但仅限部分机型和系统版本；旧版或某些 WebView 环境下静默忽略
Firefox：至今未实现，加了也等于没加，开发者工具里能看到属性，但毫无行为变化

这意味着：如果你的用户群包含大量 Firefox 或旧版 Safari 用户，单靠这个属性等于没做任何事。它不能替代 DRM，也不影响系统录屏、手机拍摄、抓包下载等任何其他盗录路径。

动态设置不可靠，初始化声明才是唯一稳妥方式

有人试图用 JS 动态添加该属性，比如：

video.setAttribute('disableRemotePlayback', '')

或者：

video.disableRemotePlayback = true

这两种写法在多数 Chromium 浏览器中可能“看起来”生效（比如图标变灰），但实测发现：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

在 Safari 中，video.disableRemotePlayback = true 不触发任何 UI 变化
在页面已加载后调用 setAttribute，部分 Chrome 版本会忽略，尤其当 video 已进入播放状态
React/Vue 等框架中通过 state 控制该属性，容易因渲染时机导致属性丢失或未挂载

所以，**唯一可靠的方式是：在 HTML 源码中直接写出该属性**，例如：

<video controls disableremoteplayback><source src="https://example.com/vid.mp4" type="video/mp4"></source></video>

不要指望 JS 补救 —— 它不是补丁，而是声明。

真正需要防投屏时，前端 JS 基本无能为力

原生 JS 对投屏行为的干预能力非常有限。你可以监听以下事件做辅助响应，但无法阻止：

webkitbeginfullscreen（Safari 全屏前）
enterpictureinpicture（画中画启动）
webkitpresentationmodechanged（WebKit 投屏模式变更）

这些事件只能让你「感知」用户可能要投屏，比如触发暂停、弹警告、或上报日志。但你无法 cancel 这些行为 —— 浏览器不提供 preventDefault() 接口。

如果业务真有强版权要求（比如付费课程、直播回放），仅靠前端手段就是裸奔。必须配合：

服务端 Token 鉴权 + 短时效 URL（防止 URL 被分享复用）
HLS/DASH 分片 + 动态密钥（让 Network 面板看不到完整视频流）
DRM 方案（Widevine/FairPlay）+ license server 输出策略（如 outputProtection: { hdcp: "required" }）

原生 JS 能做的，只是把 disableRemotePlayback 写对、写早、写死 —— 其他全是幻觉。