JavaScript如何实现音视频控制_有哪些媒体API-js教程-PHP中文网

javascript通过原生元素及dom接口实现音视频控制，支持播放、暂停、音量、进度、全屏、画中画、媒体会话和mse流媒体扩展。

javascript如何实现音视频控制_有哪些媒体api

JavaScript 通过浏览器提供的原生媒体 API 实现音视频控制，核心是 <audio></audio> 和 <video></video> 元素及其对应的 DOM 接口。这些 API 不需要第三方库即可完成播放、暂停、音量调节、进度跳转、全屏切换等常见操作。

基础媒体元素与常用控制方法

所有控制都基于 HTML 中的 <audio></audio> 或 <video></video> 标签实例（例如 const media = document.querySelector('video');）。关键方法和属性包括：

play() 和 pause()：启动或暂停播放；注意自动播放受策略限制（如需用户交互后调用）
currentTime：读写当前播放时间（单位：秒），可用于拖动进度条，例如 media.currentTime = 30;
volume：设置音量（0.0–1.0），media.volume = 0.7;
muted：布尔值，静音/取消静音，media.muted = true;
playbackRate：调节播放速度，如 media.playbackRate = 1.5;（支持 0.5–2.0 常见范围）

状态监听与事件响应

媒体元素提供多个事件，用于感知播放状态变化并作出响应：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

loadedmetadata：元数据加载完成（时长、尺寸等可用）
canplay 或 canplaythrough：表示可开始播放或可连续播放到底
timeupdate：播放过程中频繁触发（约每 200ms 一次），适合更新进度条 UI
ended：播放自然结束时触发
error：加载或解码失败时触发，可通过 media.error 获取错误类型

进阶控制：全屏、画中画与媒体会话

现代浏览器支持更贴近原生体验的交互能力：

requestFullscreen()：调用 media.requestFullscreen() 进入全屏（需用户手势触发）
pictureInPictureElement 与 requestPictureInPicture()：启用画中画模式（仅视频）
navigator.mediaSession：设置锁屏/通知栏控制界面，例如设置标题、封面图、绑定播放/暂停/跳转等操作：

if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: '示例视频',
    artist: '作者名',
    artwork: [{ src: '/icon.png' }]
  });
  navigator.mediaSession.setActionHandler('play', () => media.play());
  navigator.mediaSession.setActionHandler('pause', () => media.pause());
}

媒体源扩展：动态切换与自定义解码

对于 HLS、DASH 等流媒体格式或需要精细控制缓冲/分段加载的场景，可使用 Media Source Extensions（MSE）：

创建 MediaSource 对象，绑定到 src 属性：video.src = URL.createObjectURL(mediaSource);
通过 sourceBuffer 动态追加音频/视频片段（ArrayBuffer）
配合 fetch + ReadableStream 实现边下边播、自适应码率切换

MSE 是构建自研播放器（如 hls.js、dash.js 底层）的基础，但普通需求建议优先使用原生 <video></video> + 标准属性控制。