JavaScript通过原生<audio><video>元素及DOM接口实现音视频控制，支持播放、暂停、音量、进度、全屏、画中画、媒体会话和MSE流媒体扩展。
JavaScript 通过浏览器提供的原生媒体 API 实现音视频控制，核心是 <audio> 和 <video> 元素及其对应的 DOM 接口。这些 API 不需要第三方库即可完成播放、暂停、音量调节、进度跳转、全屏切换等常见操作。
基础媒体元素与常用控制方法
所有控制都基于 HTML 中的 <audio> 或 <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 常见范围）
状态监听与事件响应
媒体元素提供多个事件，用于感知播放状态变化并作出响应：
- loadedmetadata：元数据加载完成（时长、尺寸等可用）
- canplay 或 canplaythrough：表示可开始播放或可连续播放到底
- timeupdate：播放过程中频繁触发（约每 200ms 一次），适合更新进度条 UI
- ended：播放自然结束时触发
-
error：加载或解码失败时触发，可通过
media.error获取错误类型
进阶控制：全屏、画中画与媒体会话
现代浏览器支持更贴近原生体验的交互能力：
立即学习“Java免费学习笔记（深入）”；
-
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> + 标准属性控制。
