17370845950

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

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

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

所有控制都基于 HTML 中的 或 标签实例（例如 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 获取错误类型

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

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

• 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 底层）的基础，但普通需求建议优先使用原生 + 标准属性控制。