controlslist属性仅能隐藏部分原生控件，无法实现纯净无交互；需结合移除controls、禁用右键、拖拽、键盘事件及css限制等多层措施，但仍无法完全阻止用户获取视频内容。

Video 标签的 controlslist 属性本身**不能实现“纯净无交互”的视频展示**，它仅用于**隐藏部分原生控件按钮**，且依赖浏览器支持；真正去除所有交互（包括右键菜单、拖拽、快捷键等），必须配合其他属性与 JavaScript 才能接近目标。

controlslist 只能隐藏特定控件，不是禁用交互

该属性接受空格分隔的字符串值，如 "nodownload noremoteplayback nofullscreen"，作用是告诉浏览器“不要显示下载按钮、远程播放按钮、全屏按钮”。但它：

• 不阻止用户右键另存为视频源文件（只要 src 可访问）
• 不禁止空格键/方向键/鼠标滚轮等默认播放控制行为
• 不屏蔽右键上下文菜单（含“查看视频”“保存视频”等）
• 在 Safari 和旧版 Edge 中基本无效，兼容性有限

实现“纯净无交互”的关键组合方案

要显著降低用户对视频的操作能力，需多层限制：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 移除原生控件：去掉 controls 属性，避免任何按钮出现
• 禁用右键菜单：添加 oncontextmenu="return false;"
• 禁用拖拽与选择：设置 draggable="false" 和 CSS user-select: none; -webkit-user-drag: none;
• 禁用键盘控制：监听 keydown 事件，阻止空格、箭头键、F 键等（注意保留可访问性需求）
• 隐藏播放器焦点与轮廓：CSS 加 video:focus { outline: none; }

一个轻量但有效的示例写法

以下代码可让视频呈现为静态画面（自动播放+静音+无控件），并大幅减少用户干预可能：

需要清醒认识的边界

完全杜绝用户获取视频内容在前端几乎不可能：

• 开发者工具中仍可查到 src 地址或从内存中提取解码帧
• 录屏、抓包、扩展插件等手段不受 HTML 层限制
• 过度禁用交互会影响残障用户访问（如屏幕阅读器、键盘导航）
• 真正保护内容应靠服务端鉴权、动态 token、DRM 或流式加密（如 HLS + AES-128）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！