HTML5 video标签默认点击不播放，需JavaScript监听click并调用play()；须加muted属性、处理Promise拒绝、移动端注意手势时效与CORS配置。
video 标签默认点击不播放，必须显式加 controls 或监听点击
HTML5 的 <video> 元素默认不会响应鼠标点击来播放——哪怕你没加 controls，直接点画面也不会开始。这是浏览器策略：自动播放受限，且用户手势（如 click）必须明确触发 play()。所以“点击视频区域播放”不是开个开关就行，得自己写逻辑。
去掉 controls 后用 JavaScript 绑定 click 并调用 play()
常见做法是隐藏原生控件，把整个 <video> 当作可点击封面图，点击后调用 play()。注意几个关键点：
-
play()返回 Promise，需处理拒绝（比如被静音策略拦截） - 移动端 Safari 要求用户手势在 1 秒内触发播放，不能延迟或放 setTimeout 里
- 首次播放后，后续
play()可能 resolve 立即，但失败时不会抛错，得监听catch - 建议加
muted属性，绕过多数自动播放限制（尤其 iOS）
<video id="myVideo" muted poster="cover.jpg">
<source src="video.mp4" type="video/mp4">
</video>
<script>
const video = document.getElementById('myVideo');
video.addEventListener('click', () => {
video.play().catch(e => {
console.warn('播放失败，可能是静音未启用或非用户手势:', e);
});
});
</script>
点击后隐藏 poster、显示控件？用 play 和 pause 事件联动
如果想实现“点击封面 → 播放 → 自动移除 poster / 显示 controls”，不能只靠 click，得监听播放状态变化：
-
play事件在真正开始解码时触发（比play().then()更可靠） -
pause事件可用于还原 UI（比如暂停后重新显示 poster） - 动态增删
controls属性即可控制控件显隐，但注意：iOS 上controls在播放中添加可能无效，建议初始就设好或用自定义控件
<video id="myVideo" muted poster="cover.jpg">
<source src="video.mp4" type="video/mp4">
</video>
<script>
const video = document.getElementById('myVideo');
video.addEventListener('click', () => video.play().catch(() => {}));
video.addEventListener('play', () => {
video.removeAttribute('poster'); // 移除封面
video.setAttribute('controls', ''); // 显示控件（部分浏览器支持）
});
video.addEventListener('pause', () => {
video.setAttribute('poster', 'cover.jpg'); // 暂停时恢复封面
});
</script>
移动端真机测试容易卡在“点击无反应”，检查这三处
真机上点不动最常因为：
立即学习“前端免费学习笔记（深入）”；
- 没加
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 失败。
