多个元素调用play()不互斥，但受浏览器并发解码限制；需用户手势触发，移动端建议加muted属性；多音频同步应使用Web Audio API而非.play()。
多个 <video></video> 元素调用 play() 是否互斥？
不互斥。HTML5 的 play() 是实例方法，每个 <video></video> 或 <audio></audio> 元素独立拥有自己的播放状态和媒体资源，调用各自的 play() 不会干扰其他元素。
但要注意：浏览器对**同时解码/播放的媒体实例数量有限制**（尤其在移动端），超出后可能静音、卡顿或触发 play() 拒绝（返回 Promise rejection）。
- 桌面 Chrome 通常允许 4–6 个并发视频解码（取决于 GPU 和内存）
- iOS Safari 强制限制为 1 个可见
<video></video>可播放（其余调用play()会失败） - Android WebView 行为不一，部分版本静音播放或丢帧
play() 调用失败时常见错误信息与原因
多实例场景下，play() 最常返回 Promise rejection，错误信息通常是：
Unhandled Promise rejection: NotAllowedError: play() failed because the user didn't interact with the document first.
这不是多实例问题，而是浏览器的自动播放策略——即使你只调一个，没用户手势（click/touch）触发，也会被拒。多实例只是放大了这个问题：你可能在循环里批量调 play()，结果全部失败。
立即学习“前端免费学习笔记（深入）”；
- 必须由用户显式交互（如按钮点击）触发首次播放，之后才能链式调用其他
play() - 不能在
load、DOMContentLoaded或定时器中直接调用 - 使用
Promise.all([...].map(el => el.play()))时，任一失败会导致整个 Promise 拒绝，需用catch单独处理每个
如何安全启动多个视频播放（带容错）
核心思路：逐个尝试，忽略单个失败，不阻塞其余实例。
示例代码（ES6）：
function tryPlayAll(videos) {
videos.forEach(video => {
video.play()
.catch(err => {
console.warn(`Video ${video.id} play failed:`, err.name);
// 常见 err.name：NotAllowedError、NotSupportedError、AbortError
});
});
}
// 使用时确保在用户点击回调内：
document.getElementById('start-btn').addEventListener('click', () => {
const videos = document.querySelectorAll('video.autoplay-multi');
tryPlayAll(videos);
});
- 避免用
await串行等待，否则一个失败就中断后续 - 移动端建议加
muted属性（<video muted></video>），大幅提高自动播放成功率 - 对非可视区域的视频，可先
pause()再play()，避免资源浪费
Web Audio API 多实例音频与 <audio></audio> 的关键区别
如果你需要真正同步、低延迟、可编程混音的多音频实例，<audio></audio> 的 play() 不是可靠选择——它不保证时序精度，也无法共享上下文。
此时应改用 Web Audio API：
- 所有音频通过同一个
AudioContext实例调度，时间线统一 - 每个音频源用
context.createBufferSource()创建独立节点，可同时start() - 支持交叉淡入、实时音量/滤波控制，适合游戏、音乐应用
- 但需手动加载解码音频数据（
fetch + context.decodeAudioData），开发成本更高
简单说：<audio>.play()</audio> 适合页面媒体内容；Web Audio 才是“多实例音频”的正解——只是它压根不用 play() 这个函数。
