controlslist属性仅能隐藏部分原生控件，无法实现纯净无交互；需结合移除controls、禁用右键、拖拽、键盘事件及CSS限制等多层措施，但仍无法完全阻止用户获取视频内容。
Video 标签的 controlslist 属性本身**不能实现“纯净无交互”的视频展示**，它仅用于**隐藏部分原生控件按钮**，且依赖浏览器支持；真正去除所有交互（包括右键菜单、拖拽、快捷键等），必须配合其他属性与 JavaScript 才能接近目标。
controlslist 只能隐藏特定控件，不是禁用交互
该属性接受空格分隔的字符串值，如 "nodownload noremoteplayback nofullscreen"，作用是告诉浏览器“不要显示下载按钮、远程播放按钮、全屏按钮”。但它：
- 不阻止用户右键另存为视频源文件（只要
src可访问） - 不禁止空格键/方向键/鼠标滚轮等默认播放控制行为
- 不屏蔽右键上下文菜单（含“查看视频”“保存视频”等）
- 在 Safari 和旧版 Edge 中基本无效，兼容性有限
实现“纯净无交互”的关键组合方案
要显著降低用户对视频的操作能力，需多层限制：
-
移除原生控件：去掉
controls属性，避免任何按钮出现 -
禁用右键菜单：添加
oncontextmenu="return false;" -
禁用拖拽与选择：设置
draggable="false"和 CSSuser-select: none; -webkit-user-drag: none; -
禁用键盘控制：监听
keydown事件，阻止空格、箭头键、F 键等（注意保留可访问性需求） -
隐藏播放器焦点与轮廓：CSS 加
video:focus { outline: none; }
一个轻量但有效的示例写法
以下代码可让视频呈现为静态画面（自动播放+静音+无控件），并大幅减少用户干预可能：
立即学习“前端免费学习笔记（深入）”；
<videosrc="demo.mp4"
autoplay
muted
loop
playsinline
disablePictureInPicture
controlslist="nodownload noremoteplayback nofullscreen"
oncontextmenu="return false;"
draggable="false"
></video>
<style>
video { user-select: none; -webkit-user-drag: none; }
video:focus { outline: none; }
</style>
需要清醒认识的边界
完全杜绝用户获取视频内容在前端几乎不可能：
- 开发者工具中仍可查到
src地址或从内存中提取解码帧 - 录屏、抓包、扩展插件等手段不受 HTML 层限制
- 过度禁用交互会影响残障用户访问（如屏幕阅读器、键盘导航）
- 真正保护内容应靠服务端鉴权、动态 token、DRM 或流式加密（如 HLS + AES-128）
