JavaScript操作音视频核心是通过DOM获取元素并调用方法、监听事件、读写属性；需检查readyState和duration，注意play()返回Promise及iOS自动播放限制，合理监听canplay、playing、timeupdate等事件。
JavaScript 中操作音频（<audio></audio>）或视频（<video></video>）元素，核心是通过 DOM 获取媒体元素，调用其内置方法、监听事件、读写属性来实现播放控制、状态监听和交互响应。
获取媒体元素并检查基础能力
先用 document.querySelector 或 getElementById 获取元素，确保它已加载且支持基本 API：
- 检查
element.readyState：0（无信息）、1（元数据已加载）、2（可开始播放）、3（正在下载）、4（已加载全部） - 确认
element.duration不为NaN，说明时长可读；若为Infinity，可能是流媒体（如 HLS），需额外处理 - 注意：部分移动端浏览器（如 iOS Safari）禁止自动播放带声音的媒体，需用户手势触发
play()
常用控制方法与注意事项
直接调用媒体元素的方法即可执行操作，但需注意 Promise 返回和兼容性：
-
element.play()：返回 Promise，失败时会 reject（如被静音策略阻止），应加.catch(e => console.warn("播放失败:", e)) -
element.pause()：无返回值，可随时调用 -
element.load()：重载资源，重置播放状态（如切换 src 后调用） -
element.currentTime = 30：跳转到第 30 秒；设值后可能触发seeking→seeked事件 -
element.volume = 0.7：取值范围 0–1；iOS 上无法通过 JS 控制音量，仅反映 mute 状态
监听关键生命周期事件
用 addEventListener 响应状态变化，比轮询更高效可靠：
立即学习“Java免费学习笔记（深入）”；
-
canplay：媒体已加载足够数据，可开始播放（适合启用播放按钮） -
playing：真正开始播放（区别于play事件，后者只是播放请求） -
pause、ended：分别在暂停和播完时触发 -
timeupdate：播放过程中高频触发（约每 250ms），适合更新进度条；避免在此做重操作 -
error：加载或解码失败，可通过element.error.code判断原因（如 4 表示网络错误）
静音与全屏等实用控制
部分行为需结合属性与方法，并注意平台限制：
- 静音：
element.muted = true（可写），配合element.volume = 0更稳妥 - 自动播放：
autoplay属性 +muted是 iOS/Android 允许自动播放的常见组合 - 全屏：
element.requestFullscreen()（标准）或element.webkitEnterFullscreen()（iOS 视频专用）；需用户手势触发 - 画中画：
element.requestPictureInPicture()（支持较新浏览器），同样需用户交互启动
基本上就这些。媒体控制不复杂但容易忽略 Promise 和平台策略，实际使用时优先处理 play 失败、监听 readyState 变化、合理节流 timeupdate，就能覆盖大多数场景。
