JavaScript 直接使用 HTMLMediaElement 原生 API 控制音视频，需监听 loadeddata/canplay 后调用 play()（返回 Promise 需 catch），通过 paused、currentTime、volume、muted、playbackRate 等属性控制状态，依赖 timeupdate、ended、error、loadedmetadata 等事件响应行为，并注意 canPlayType 兼容性、iOS 静音限制及 playsinline 全屏策略。
JavaScript 实现音视频控制不依赖第三方库，直接用浏览器原生 HTMLMediaElement（即 <audio></audio> 和 <video></video> 元素）就能完成绝大多数操作；所谓“媒体 API”就是这一套标准接口，不是独立的 JS 库。
怎么获取和控制播放状态：play()、pause()、paused、currentTime
所有控制都基于 DOM 元素实例。必须等元素加载完成（loadeddata 或至少 canplay 事件后）再调用 play()，否则多数浏览器会静默失败（尤其移动端）。
常见错误现象：点击按钮无反应，控制台报 DOMException: play() failed because the user didn't interact with the document first —— 这是浏览器自动播放策略限制，必须由用户手势（如 click、touchend）触发 play()。
-
el.play()返回 Promise，失败时需.catch(e => console.error(e)) -
el.paused是只读布尔值，判断是否暂停（注意：false不代表一定在播放，可能是已结束或加载中） -
el.currentTime = 120可跳转到第 120 秒，但实际生效取决于缓冲进度；设置后可监听seeking/seeked事件确认 - 设置
el.volume = 0.7有效范围是0.0–1.0，设为NaN或负数会被忽略
如何监听关键事件：timeupdate、ended、error、loadedmetadata
这些事件决定了你能否及时响应播放行为。例如 timeupdate 频率高（约每 250ms 一次），适合更新进度条，但别在里面做重操作（如频繁 DOM 更新），否则卡顿。
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
立即学习“Java免费学习笔记（深入）”；
-
loadedmetadata表示元数据（时长、尺寸、码率等）已加载，此时el.duration才可靠（未加载前是NaN） -
ended触发表示自然播放完毕（非用户暂停），常用于自动循环：el.loop = true或手动el.currentTime = 0; el.play() -
error事件对象的el.error.code值能定位问题：MediaError.MEDIA_ERR_NETWORK（4）表示网络中断，MEDIA_ERR_DECODE（3）多因格式不支持或文件损坏 -
stalled表示缓冲区即将耗尽，适合提示“加载中”，但不要盲目重试，可能只是临时带宽波动
volume、muted、playbackRate 怎么用才稳定
这三个属性看似简单，但受平台策略影响大。iOS Safari 默认禁用 volume 设置（始终返回 1），且无法通过 JS 修改——只能靠用户手动调节物理音量键；muted 则全平台可用，是实现“静音按钮”的唯一可靠方式。
-
el.muted = true会覆盖el.volume，且不受自动播放策略限制，可随时设置 -
el.playbackRate = 0.5支持常见倍速（0.5–2.0），但部分老设备或编码格式（如某些 HEVC 视频）可能不支持变速解码，此时设了也无效，el.playbackRate读回来还是 1 - 修改
playbackRate后，timeupdate触发频率会变，但currentTime仍按真实播放时间推进
兼容性与性能注意点：canPlayType()、preload、buffered
别假设所有格式都能播。el.canPlayType('video/mp4; codecs="avc1.42E01E"') 返回 "probably" / "maybe" / ""，只有非空字符串才建议尝试加载。MP4 的 H.264 + AAC 组合兼容性最好；WebM（VP9 + Opus）在 Chrome/Firefox 更友好，但 Safari 旧版本不支持 VP9。
-
preload="metadata"是平衡体验与流量的常用策略：只预加载头信息（时长、封面），不拉视频主体，避免用户没点播放就浪费带宽 -
el.buffered是一个TimeRanges对象，需用el.buffered.end(0)获取已缓冲的最远时间点（单位秒），用来画缓冲进度条 - 移动端需特别注意：Safari iOS 强制全屏播放
<video></video>，除非加playsinline属性（且服务器要支持 CORS）
真正难的不是调用几个方法，而是处理加载失败、格式不兼容、策略拦截、跨端行为差异这些“边缘情况”。写完 play() 就以为播起来了？大概率在真机上卡住。
