监听 html5 媒体元素全屏切换应监听 document 的 fullscreenchange 事件，通过 document.fullscreenelement 判断状态，而非绑定到 media 元素；需注意拼写、兼容性处理及 ios safari 的异步延迟问题。
监听 HTML5 媒体元素（如 <video></video> 或 <audio></audio>）的全屏切换，核心不是给媒体元素本身绑事件，而是监听 document 级别的 fullscreenchange 事件，再结合 document.fullscreenElement 判断当前状态。媒体元素只是可能被全屏的对象之一，浏览器只在全局层面派发这个事件。
必须监听 document，而不是 media 元素
很多人尝试写 video.addEventListener('fullscreenchange', ...)，但该事件根本不会触发——fullscreenchange 只在 document 上发生，且不冒泡。它反映的是整个页面的全屏状态变化，无论触发源是视频、div 还是用户按了 F11。
- 正确写法：
document.addEventListener('fullscreenchange', handler) - 错误写法：
videoEl.addEventListener('fullscreenchange', ...)或window.addEventListener('fullscreenchange', ...) - 注意拼写：是
fullscreenchange（全小写），不是fullScreenChange或fullscreenchanged
用 document.fullscreenElement 判断是否进入/退出
事件本身不带方向信息，e.type === 'fullscreenchange' 无法区分进还是出。唯一可靠方式是读取状态属性：
-
if (document.fullscreenElement)→ 当前有元素处于全屏（可能是你的 video，也可能是其他元素） -
if (!document.fullscreenElement)→ 已完全退出全屏 - 若需确认是不是你的媒体元素：可进一步判断
document.fullscreenElement === videoEl - 兼容旧浏览器时，需降级检查：
document.webkitFullscreenElement（Safari）、document.msFullscreenElement（IE11）
注意移动端与 Safari 的特殊行为
某些 iOS Safari 版本中，fullscreenchange 回调刚执行时 document.fullscreenElement 可能尚未更新。为确保读取准确值，建议加一层异步延迟：
- 在事件回调里用
setTimeout(() => { /* 读取 fullscreenElement */ }, 0) - requestFullscreen 必须由用户手势触发（如
click或touchend），不能放在setTimeout或 Promise.then 中 - 避免在 handler 中立即调用
exitFullscreen()或再次requestFullscreen()，容易引发循环或 DOMException
不要混淆浏览器窗口级全屏（F11）
F11 或 Control+Command+F 触发的是浏览器窗口全屏，不属于 Fullscreen API 管控范围：
- 此时
document.fullscreenElement始终为null，无法通过 API 检测 - 你监听的
fullscreenchange也不会触发 - 只能通过 UI 提示引导用户（如“按 F11 进入浏览器全屏”），不能自动响应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
