列表里 12 个视频能同时出声 只允许一个播放怎么写

document.addEventListener('play', e => {
  document.querySelectorAll('video').forEach(v => { if (v !== e.target) v.pause(); });
}, true);

课程列表页有 12 个视频，用户点了 3 个，三路声音叠在一起，滚动到下一个还在响，只能逐个暂停。这类现象通常不是突然出现的，往前翻半天日志能看到苗头。

追下去是这么回事：每个 video 都是独立实例，没有统一的播放管理，play 事件之间互不知情。列表还是懒加载，滚动时新插入的视频又绕过了暂停逻辑。

「多视频互斥播放」改完先别急着全量，挑一台机器放半天，真有问题这段时间就能看出来。监控和日志的时间要对上，时区不一致会多绕很大一圈。

临时改动用注释写上日期和原因，过两周自己都记不清为什么这么写。动手前把原文件复制一份带时间戳，出问题立刻换回去，比现场分析快得多。

处理上按这个顺序：用事件委托监听 document 上的 play 事件；播放时暂停其他所有 video 并清空进度；动态插入的节点同样走委托 不用单独绑定。

确认没问题再收工，点第二个视频时第一个自动暂停，页面同时只有一路声音。