HTML视频需JavaScript实现双击全屏和单击暂停：对容器绑定dblclick/click事件，兼容各浏览器全屏API；iOS须加playsinline；防止单双击冲突需300ms防抖；监听fullscreenchange同步UI状态。
HTML视频标签本身不支持双击全屏或单击暂停这类交互，必须靠JavaScript监听事件并调用对应API来实现。核心在于：双击事件触发 requestFullscreen()，单击事件切换 play()/pause()，且所有操作都必须由用户真实交互发起，不能自动执行。
绑定双击事件实现全屏
双击全屏不能直接写在 <video> 标签上，因为部分安卓和旧版 Safari 对 video 元素的 dblclick 支持不稳定。推荐对视频容器（比如外层 <div>）绑定事件：
- 用
addEventListener('dblclick', handler)监听双击，避免使用ondblclick属性写法（不利于解耦和调试） - 调用前检查目标元素是否支持全屏方法，按顺序尝试：
requestFullscreen、webkitRequestFullscreen、mozRequestFullScreen、msRequestFullscreen - 想让整个播放区域（含自定义控制栏）一起全屏，就对父容器调用；只对
<video>调用可能导致拉伸或控件错位 - iOS 必须给
<video>加playsinline属性，否则双击会跳转到原生播放器，脱离网页控制
单击切换播放与暂停
单击行为要区分“点视频画面”和“点按钮”，这里指点击视频区域本身来控制播放状态：
- 监听容器或
<video>的click事件，判断video.paused状态决定调用play()还是pause() - 首次播放必须由用户点击触发，不能在页面加载完就调用
play()，否则多数浏览器会抛出DOMException - 为防重复操作，可加简单防护：只在
paused === true时调用play()，反之调用pause() - 建议同步更新 UI，比如切换播放图标、显示/隐藏控制栏，靠监听
play和pause事件比轮询更可靠
避免常见冲突与兼容问题
双击和单击共存时，浏览器可能把双击识别为两次单击，导致误暂停。需做防抖处理：
立即学习“前端免费学习笔记（深入）”；
- 用
setTimeout+clearTimeout区分单双击：单击后延时 300ms 执行播放/暂停；若 300ms 内又触发一次点击，则取消延时，执行全屏 - 移动端注意：iOS Safari 不支持
dblclick，但双击手势常被系统识别为缩放意图，不一定触发事件；可改用touchend配合时间间隔判断，或退而求其次用长按+双击组合 - iframe 中启用全屏，必须在 iframe 标签上加
allow="fullscreen"，否则 API 调用静默失败 - 退出全屏统一用
document.exitFullscreen()（及其兼容写法），且调用前检查document.fullscreenElement是否存在
状态监听与用户体验补全
用户可能通过 ESC 键、系统返回键或手势退出全屏，这些行为 JS 无法主动触发，只能靠监听响应：
- 全局监听
fullscreenchange事件，在回调中根据document.fullscreenElement的真假值，同步更新按钮图标、控制栏显隐、甚至暂停视频（有些场景下退出全屏后自动暂停更合理） - 不要只依赖 JS 主动调用的结果来判断状态，它覆盖不了所有退出路径
- 移动端无 F11，但双击视频区域仍是用户最自然的全屏入口——可借此优化，但不可作为唯一交互方式
