需先通过 DOM 获取 media 元素实例（如 querySelector 或 getElementById），确保脚本在 DOM 加载后执行；跨域资源需加 crossorigin="anonymous"；play() 必须由用户手势触发并处理 Promise 拒绝；常用属性包括 currentTime、volume（iOS 受限）、muted、paused、ended、playbackRate；应监听 canplay、canplaythrough、timeupdate、ended 等事件而非轮询。
如何用 JavaScript 获取并控制 <video> 或 <audio> 元素？
必须先通过 DOM 获取到元素实例，才能调用控制方法。常见错误是未等元素加载完成就调用 play() 或读取 duration，导致 NaN 或抛错。
- 用
document.querySelector('video')或document.getElementById('myVideo')获取元素 - 确保脚本在 DOM 加载后执行（如放在
</body>前，或监听DOMContentLoaded） - 若媒体资源跨域，需在标签上添加
crossorigin="anonymous"，否则部分属性（如duration、buffered）可能不可读
play() 和 pause() 为什么有时不生效？
现代浏览器普遍要求用户手势触发播放（如点击、触摸），直接在页面加载时调用 play() 会返回 Promise 并被拒绝，控制台报错 DOMException: play() failed because the user didn't interact with the document first.
- 必须绑定在用户事件回调中，例如：
button.addEventListener('click', () => video.play()); -
play()返回 Promise，应处理失败情况：video.play().catch(e => console.warn('Playback prevented:', e)); - 自动播放静音视频通常被允许：
<video muted autoplay>，但带声音的autoplay几乎总被阻止
常用控制属性和方法有哪些？
核心控制能力集中在元素的属性与方法上，不是所有属性都可写，也不是所有值都能实时生效（如 volume 在 iOS Safari 中受限）。
-
currentTime：获取或设置当前播放位置（单位：秒），可写，但设为超出范围的值不会报错，而是静默归零或归为duration -
volume：取值 0.0–1.0，iOS Safari 下始终为 1.0 且不可修改（系统音量独立控制） -
muted：布尔值，设为true可绕过部分自动播放限制 -
paused：只读布尔值，判断是否处于暂停状态 -
ended：只读，为true表示已自然播放完毕 -
playbackRate：设置播放速率（如2.0表示 2 倍速），支持小数，但部分设备/浏览器有上下限（如 Chrome 最低 0.0625，最高 16）
监听播放状态变化该用哪些事件？
不能依赖轮询，应使用原生事件。容易混淆的是 timeupdate 触发频率高但不保证每帧都触发，而 loadeddata 和 canplay 的触发时机有差异。
立即学习“Java免费学习笔记（深入）”；
-
canplay：浏览器已获取足够数据，可以开始播放（但未必能连续播完） -
canplaythrough：预计能不中断地播完（适合做“准备就绪”提示） -
timeupdate：当前时间改变时触发（典型间隔 ~250ms，非精确帧级） -
pause/play：仅在用户或脚本显式调用对应方法后触发（注意：自动暂停如失焦不会触发pause） -
ended：自然播放结束时触发，不包括因网络中断、load()后未调用play()等情况
需要精确同步或响应缓冲行为时，得结合 buffered 属性和 progress 事件——但后者只在浏览器主动请求资源时触发，CDN 缓存命中时可能不触发。
