17370845950

JavaScript通过HTMLMediaElement原生控制音视频播放，支持play()/pause()、currentTime、volume、playbackRate等基础操作；可读取duration、readyState、buffered等状态；监听canplay、timeupdate、ended等事件；并支持MediaSession、captureStream及AudioContext高级处理。

JavaScript 通过 HTMLMediaElement（如 和 元素）以及配套的 Media API 来控制音视频播放、获取状态、响应事件和实现交互功能。核心不依赖第三方库，原生支持良好。

基础播放控制

所有 和 元素都继承自 HTMLMediaElement，具备统一的操作接口：

• play() 和 pause()：启动或暂停播放（需用户手势触发，否则可能被浏览器阻止）
• load()：重新加载媒体资源（例如切换 src 后调用）
• currentTime：读写当前播放时间（单位：秒），支持精确跳转
• volume：设置音量（0.0–1.0），muted 属性可静音
• playbackRate：调整播放速率（如 0.5、1.0、2.0）

状态与元数据获取

可通过属性实时读取媒体状态，辅助 UI 更新或逻辑判断：

• duration：总时长（秒），加载完成前为 NaN；监听 loadedmetadata 事件后才可靠
• readyState：当前准备状态（0–4），常用判断是否可播放：≥ HTMLMediaElement.HAVE_FUTURE_DATA
• networkState：网络状态（如 NETWORK_IDLE、NETWORK_LOADING）
• buffered：返回 TimeRanges 对象，表示已缓冲的时间段，可用于绘制缓冲进度条

关键事件监听

Media API 提供丰富事件，覆盖生命周期与用户交互：

• canplay / canplaythrough：表示可开始播放 / 可连续播放至结束（适合自动播放逻辑）
• timeupdate：播放过程中高频触发（通常每 200–250ms），用于更新进度条、字幕同步等
• ended：播放自然结束时触发
• error：加载或解码失败时触发，error.code 可区分错误类型（如 MEDIA_ERR_SRC_NOT_SUPPORTED）
• loadeddata：首帧渲染完成，适合做封面图隐藏

进阶能力：MediaSession 与音视频处理

现代浏览器还支持更深度的集成：

• navigator.mediaSession：设置播放信息（标题、专辑、封面）、添加自定义控制（如上一首/下一首），并在系统通知栏/锁屏界面显示控件
• captureStream()：将 或 实时内容转为 MediaStream，用于录制或 WebRTC 推流
• 结合 AudioContext 和 MediaElementAudioSourceNode，可对音频进行滤波、混响、频谱分析等处理