直接加 controls 属性最省事，但自定义控制需用 JavaScript 调用 pause()/play()；调用前须检查 readyState ≥ 2 且未暂停；play() 异步可能被拒，需 catch 处理；controls 失效多因资源、编码或 muted 缺失；分享时暂停防失焦，iOS 自动暂停无需手动干预。
直接加 controls 属性最省事，但真要自定义按钮、响应逻辑或解决常见卡点，得绕开浏览器默认控件，用 JavaScript 主动调用 pause() 和 play()。
video.pause() 调用前必须检查元素状态
直接调用 pause() 报错很常见，比如视频还没加载完、已被销毁、或根本没播放过。浏览器不会自动兜底。
-
paused属性只反映当前是否暂停，不表示能否调用pause()；真正要判断的是readyState是否 ≥ 2（HAVE_METADATA） - 稳妥写法：
if (video.readyState >= 2 && !video.paused) { video.pause(); } - 如果视频刚加载完但还没触发
loadeddata事件，play()可能失败，pause()却可能静默忽略——这不是 bug，是规范行为
按钮点击切换播放/暂停的坑：别只靠 paused 判断
video.paused 在自动播放被拦截、autoplay 失败后可能始终为 true，但用户点一次“播放”按钮后它才真正进入可交互状态。
- 更可靠的切换逻辑：
video.paused ? video.play() : video.pause()，而不是先查再分支 - 注意：
play()是异步操作，可能被拒绝（返回 Promise），需处理.catch()，否则后续pause()会因未成功播放而无效 - 按钮文本更新建议绑定
play/pause事件，而非仅靠点击回调——比如用户用空格键控制也会触发状态变化
controls 属性失效的典型原因
写了 controls 却看不到控件，90% 不是代码问题，而是资源或策略层面的硬限制。
立即学习“前端免费学习笔记（深入）”；
- 拼写错误：
control（少一个 s）完全无效，必须是controls - 视频 404 或跨域未配 CORS：Chrome 会渲染一个灰色“播放”图标，但进度条、音量等全消失
- MP4 编码不兼容：H.264 baseline profile 在某些旧安卓 WebView 上无法触发完整控件
-
autoplay+controls未加muted：Chrome/Safari 直接禁用整个控件条，连暂停按钮都不显示
分享时视频自动暂停的实现逻辑
分享按钮点击后暂停视频，不是为了“防止干扰”，而是避免分享过程（如弹出微信浮层）导致页面失焦，进而触发浏览器自动暂停策略。
- 监听分享按钮点击：
shareBtn.addEventListener('click', () => { video.pause(); }) - 注意：iOS Safari 在弹出系统分享面板时会强制暂停所有媒体，无需手动干预；但 Android 微信内置浏览器不会，必须显式调用
- 若分享后需恢复播放，不能直接
play()——用户手势上下文已丢失，得等用户再次点击才可恢复
最易被忽略的点：移动端 video 元素在页面 visibility 从 visible 变为 hidden 后，即使没调用 pause()，部分浏览器也会悄悄暂停并重置 currentTime。别依赖“暂停状态”做逻辑判断，要用 timeupdate + pause 事件双重校验。
