如何禁止HTML5 video标签右键菜单显示“保存视频”选项

你观察到的Prime Video、Netflix右键不显示「保存视频」的效果，不是靠小技巧隐藏选项，是整套流媒体分发方案带来的自然结果，具体实现分表层方案和商业级方案两类：

直接阻止video元素的右键默认行为即可，代码如下：

document.querySelectorAll('video').forEach(videoEl => {
  videoEl.addEventListener('contextmenu', e => e.preventDefault())
})

注意：这个方案只能拦住完全不懂技术的普通用户，只要打开开发者工具定位到video标签的src属性，照样能直接下载完整MP4文件，完全达不到商业平台的防护效果。

商业平台的视频右键没有保存选项，本质是浏览器根本拿不到可直接下载的完整静态视频源，自然不会给出对应选项，核心技术点包括：

• 不直接在video标签的src属性挂载完整MP4文件，而是通过MSE（媒体源扩展）接口，把动态加载的视频流片段一点点喂给播放器，video标签本身不关联任何可直接访问的完整视频文件地址。
• 视频采用HLS/DASH协议切分为数秒时长的细碎分片，用户抓包只能拿到一堆独立的短片段，无法直接获取完整单文件。
• 全片应用DRM数字版权加密，所有分片都经过加密处理，播放时由浏览器内置的可信DRM模块（Widevine/FairPlay/PlayReady）完成解密，解密密钥不会暴露给前端JS环境，即使用户把所有分片都爬下来，没有合法密钥也无法合并、播放完整视频。

额外提醒：靠禁用F12、加透明遮罩层、禁用右键这类前端小技巧防下载没有实际意义，对有基础前端知识的用户完全无效。如果只是需要减少普通用户的随意下载，用最基础的阻止右键方案即可；如果是有版权保护要求的商业内容，必须上分片+DRM的方案才能达到和主流流媒体平台同级的防护效果。

内容的提问来源于stack exchange，提问作者fgonzalez