HTML5 video标签默认点击不播放，需JavaScript监听click并调用play()；须加muted属性、处理Promise拒绝、移动端注意手势时效与CORS配置。
video 标签默认点击不播放，必须显式加 controls 或监听点击
HTML5 的 元素默认不会响应鼠标点击来播放——哪怕你没加 controls，直接点画面也不会开始。这是浏览器策略：自动播放受限，且用户手势（如 click）必须明确触发 play()。所以“点击视频区域播放”不是开个开关就行，得自己写逻辑。
去掉 controls 后用 JavaScript 绑定 click 并调用 play()
常见做法是隐藏原生控件，把整个 当作可点击封面图，点击后调用 play()。注意几个关键点：
-
play()返回 Promise，需处理拒绝（比如被静音策略拦截） - 移动端 Safari 要求用户手势在 1 秒内触发播放，不能延迟或放 setTimeout 里
- 首次播放后，后续
play()可能 resolve 立即，但失败时不会抛错，得监听catch - 建议加
muted属性，绕过多数自动播放限制（尤其 iOS）
点击后隐藏 poster、显示控件？用 play 和 pause 事件联动
如果想实现“点击封面 → 播放 → 自动移除 poster / 显示 controls”，不能只靠 click，得监听播放状态变化：
-
play事件在真正开始解码时触发（比play().then()更可靠） -
pause事件可用于还原 UI（比如暂停后重新显示 poster） - 动态增删
controls属性即可控制控件显隐，但注意：iOS 上controls在播放中添加可能无效，建议初始就设好或用自定义控件
移动端真机测试容易卡在“点击无反应”，检查这三处
真机上点不动最常因为：
立即学习“前端免费学习笔记（深入）”；
- 没加
muted属性，iOS/Safari 直接拒绝播放（即使用户点了） - 视频资源跨域但没配
crossorigin="anonymous"，导致play()拒绝（报错DOMException: The element has no supported sources） - CSS 层叠问题：上面盖了透明 div、
pointer-events: none、或父容器overflow: hidden截断了点击区域
调试时打开手机 DevTools，点视频后立即查 Console 是否有 play() failed 类错误，再看 Network 是否视频请求 403/404 或 CORS 失败。
