自建站HTML视频怎么防投屏？网站管理员配置手册-html教程-PHP中文网

HTML5 video标签无法真正防投屏，disablePictureInPicture仅禁用画中画，webkit-playsinline仅控制iOS内联播放，disableRemotePlayback在iOS不支持、安卓部分忽略，三者均不能阻止AirPlay/Chromecast等系统级投屏，且可被开发者工具绕过。

自建站html视频怎么防投屏？网站管理员配置手册

HTML 视频本身无法真正“防投屏”——只要用户能播放，就存在被投屏的可能。浏览器原生标签没有 API 能检测或阻止 AirPlay / Chromecast / Miracast 等系统级投屏行为，所谓“防”，只能是提高门槛、增加成本、降低批量盗录效率。

为什么 `disablePictureInPicture` 和 `webkit-playsinline` 不起作用

这两个属性常被误认为能防投屏，实际作用非常有限：

disablePictureInPicture 只禁用画中画（PiP），不影响 AirPlay 按钮显示或投屏功能
webkit-playsinline 仅让 iOS 视频在页面内播放（不全屏），但 AirPlay 按钮仍会出现在控制栏右上角
Chrome 的 disableRemotePlayback 属性在部分安卓设备上被忽略，iOS 完全不支持
所有这些属性都可被用户通过开发者工具实时修改或绕过

真正能干扰投屏体验的配置项

目标不是“禁止”，而是让投屏后内容不可用或体验极差，从而劝退普通用户：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

使用 DRM 保护的 HLS 或 DASH 流（如 FairPlay、Widevine），需配合授权服务器；纯 HTML + MP4 文件无法启用 DRM
在视频画面上叠加动态水印（时间戳 + 用户 ID），用 canvas 实时绘制并合成到上层，避免被截图/录屏直接捕获原始帧
禁用右键和上下文菜单：oncontextmenu="return false"，虽不能防投屏，但能阻断“另存为视频”等快捷操作
监听 webkitbeginfullscreen 和 fullscreenchange 事件，在用户尝试全屏（常是投屏前奏）时暂停播放或提示“该视频不支持外部播放”

流体播放器（Fluid Player）里怎么配水印和事件拦截

Fluid Player 支持插件式扩展，适合加水印和拦截逻辑，但要注意生命周期：

水印需在 onReady 回调后挂载 canvas 层，并用 requestAnimationFrame 持续更新位置和时间戳
不要在 onPause 或 onStop 里销毁水印层，否则切换清晰度或重播时水印消失
投屏相关事件（如 webkitplaybacktargetavailabilitychanged）Fluid Player 不默认监听，需手动绑定到原生元素

示例片段：

player.on('ready', function() {
  const video = player.getElement();
  video.addEventListener('webkitplaybacktargetavailabilitychanged', e => {
    if (e.availability === 'available') {
      video.pause();
      alert('检测到投屏设备，已暂停播放');
    }
  });
});