Chrome中HTML5视频播放器下载选项防篡改方案咨询

完全杜绝视频被下载是不可能的（只要能在浏览器播放，就存在录屏或帧提取的可能），但可以通过以下方法大幅提高篡改门槛，过滤绝大多数普通用户：

1. 流媒体加密传输（最有效） #

放弃直接暴露完整视频文件，改用HLS/DASH流媒体协议，将视频切割成加密小段传输：

• 用媒体服务器（如Nginx+RTMP模块）生成加密的HLS流，前端通过video.js或原生HLS API加载
• 核心是对.m3u8索引文件和.ts视频片段加密，用户即使拿到片段，没有密钥也无法解码播放

示例代码：

<video id="vid" playsinline></video>
<script>
  const vid = document.getElementById('vid');
  // 浏览器原生支持HLS则直接加载，否则用Hls.js兼容
  if (window.Hls) {
    const hls = new Hls();
    hls.loadSource('/encrypted-video-stream.m3u8');
    hls.attachMedia(vid);
  } else if (vid.canPlayType('application/x-mpegURL')) {
    vid.src = '/encrypted-video-stream.m3u8';
  }
</script>

2. DOM篡改监听+自动重置 #

针对开发者工具篡改标签的行为，定时检查并重置video属性，增加篡改成本：

const vid = document.getElementById('vid');
// 禁用右键菜单减少快速打开开发者工具的入口
document.addEventListener('contextmenu', e => e.preventDefault());

// 定时检查并重置视频控件状态
setInterval(() => {
  if (vid.hasAttribute('controls') || vid.getAttribute('controlslist') !== 'nodownload') {
    vid.controls = false;
    vid.setAttribute('controlslist', 'nodownload');
    // 激进方案：发现篡改直接清空视频源
    // vid.src = '';
  }
}, 300);

注意：资深开发者可禁用定时器，但能过滤90%以上普通用户

3. Canvas渲染视频（完全脱离原生控件） #

将视频帧渲染到Canvas上，彻底抛弃原生video控件，让用户无法通过修改video标签获取下载选项：

<canvas id="videoCanvas" width="1280" height="720"></canvas>
<video id="hiddenVid" style="display: none" playsinline></video>
<script>
  const vid = document.getElementById('hiddenVid');
  const canvas = document.getElementById('videoCanvas');
  const ctx = canvas.getContext('2d');

  vid.src = '/your-video.mp4';
  vid.play();

  // 逐帧绘制视频到Canvas
  function renderFrame() {
    ctx.drawImage(vid, 0, 0, canvas.width, canvas.height);
    requestAnimationFrame(renderFrame);
  }
  renderFrame();

  // 如需播放控制，自行实现自定义按钮逻辑
</script>

缺点：无法直接使用原生画中画、字幕功能，且无法阻止录屏

4. 服务器端权限限制 #

从源头控制视频资源的访问：

• 生成临时签名URL，仅允许当前登录用户在有效期内访问视频，过期自动失效
• 通过服务器脚本（如Node.js/PHP）动态输出视频流，验证用户权限后再返回数据，不直接暴露视频文件路径
• 检查请求的Referer头，仅允许域名内的请求（辅助手段，Referer可伪造）

内容的提问来源于stack exchange，提问作者Badar Al Naaimi