如何使用JavaScript进行媒体控制_JavaScript如何播放和暂停音频视频_网络技术

如何使用JavaScript进行媒体控制_JavaScript如何播放和暂停音频视频

发布时间 - 2026-01-07 00:00:00 点击率：次

play()和pause()需在用户手势（如点击）后调用，否则因浏览器自动播放策略抛出NotAllowedError；应通过paused属性判断状态，监听play/pause事件而非轮询，并注意iOS/Safari的playsinline等限制。

如何用 `play()` 和 `pause()` 控制媒体元素

HTML 中的和元素原生支持播放与暂停，核心就是调用它们的 play() 和 pause() 方法。但直接调用不总成功——现代浏览器要求用户手势（如点击）触发播放，否则会抛出 NotAllowedError。

必须确保 DOM 已加载完成，再获取元素并绑定事件
不能在页面加载后自动调用 play()（除非设置了 muted 且 autoplay）
推荐在按钮点击、键盘回车等明确用户交互后调用 play()

const media = document.querySelector('video');
document.getElementById('playBtn').addEventListener('click', () => {
  media.play().catch(e => console.warn('播放被阻止:', e.name));
});
document.getElementById('pauseBtn').addEventListener('click', () => {
  media.pause();
});

为什么 `play()` 有时静默失败或报错

Chrome、Safari 等主流浏览器实施了「自动播放策略」：未静音的音频/视频不允许无用户交互启动。错误通常表现为 Promise 被 reject，e.name === 'NotAllowedError'，但控制台可能不显眼。

检查是否在非用户手势上下文中调用（如 setTimeout、DOMContentLoaded 回调里）
若需自动播放，必须同时满足：autoplay + muted（对有效）或仅音频且静音
即使 muted，部分 iOS 版本仍禁止自动播放，需依赖用户点击

`paused` 属性和 `playbackRate` 的实用判断

仅靠是否调用过 play() 无法准确判断当前状态，应以元素的 paused 属性为准——它实时反映是否处于暂停态（包括初始加载完成后的暂停状态）。

media.paused === true 表示已暂停或尚未开始播放（即使已调用 play() 但被策略拦截）
media.playbackRate 可读写，默认为 1.0；设为 0 不会暂停，只是“停帧”，仍算播放中；暂停必须用 pause()
监听 play 和 pause 事件比轮询 paused 更可靠

media.addEventListener('play', () => console.log('已开始播放'));
media.addEventListener('pause', () => console.log('已暂停'));
// 避免这样判断状态：
// if (wasPlayCalled) { ... } → 不可靠