多客户端视频播放器同步异常：播放/暂停联动问题咨询

为什么会出现重复触发暂停的异常？ #

你遇到的这个问题，本质是触发了无限循环的事件链：

• 当用户手动暂停videoA时，会触发videoA的pause事件，你的代码会发送请求让videoB执行pause()；
• 但程序调用videoB.pause()时，同样会触发videoB自身的pause事件，你的代码又会发送请求让videoA执行pause()；
• 哪怕videoA已经处于暂停状态，在某些场景下（比如事件队列延迟、浏览器的事件触发机制差异），重复调用pause()可能会再次触发pause事件，进而形成循环，导致不断重复执行暂停操作。

简单说：你没有区分「用户手动操作触发的事件」和「程序调用API触发的事件」，导致同步操作反过来触发了原视频的事件，形成闭环。

几种可行的解决方法 #

1. 用isTrusted过滤程序触发的事件

HTML5事件对象自带一个isTrusted属性：当事件是用户交互（点击、键盘操作等）触发时，它返回true；当事件是通过代码（比如play()/pause()、dispatchEvent）触发时，返回false。我们可以利用这个属性，只在用户操作时才同步到另一个视频：

// 处理videoA的事件
$(videoA).on("pause", e => {
  // 仅当用户手动触发时，才同步到videoB
  if (e.isTrusted) {
    sendRequestToPauseVideoB();
  }
});
$(videoA).on("play", e => {
  if (e.isTrusted) {
    sendRequestToPlayVideoB();
  }
});

// 同理处理videoB
$(videoB).on("pause", e => {
  if (e.isTrusted) {
    sendRequestToPauseVideoA();
  }
});
$(videoB).on("play", e => {
  if (e.isTrusted) {
    sendRequestToPlayVideoA();
  }
});

这个方案最直接，因为我们只需要对用户的操作做同步，程序自动触发的事件不需要处理。

2. 执行操作前先校验视频状态

在调用play()/pause()之前，先检查目标视频的当前状态，避免重复执行相同操作——毕竟如果视频已经处于目标状态，再调用API不会改变状态，也不会触发事件：

比如修改你的请求处理逻辑：

// 处理暂停videoB的请求
function handlePauseVideoB() {
  const videoB = document.getElementById('videoB');
  // 只有当视频未暂停时，才执行暂停操作
  if (!videoB.paused) {
    videoB.pause();
  }
}

// 处理播放videoB的请求
function handlePlayVideoB() {
  const videoB = document.getElementById('videoB');
  // 只有当视频暂停时，才执行播放操作
  if (videoB.paused) {
    videoB.play();
  }
}

// 原事件监听逻辑保持不变，请求处理函数加了状态校验
$(videoA).on("pause", e => sendRequestToPauseVideoB());
$(videoA).on("play", e => sendRequestToPlayVideoB());
$(videoB).on("pause", e => sendRequestToPauseVideoA());
$(videoB).on("play", e => sendRequestToPlayVideoA());

这个方案兼容性很好，所有支持HTML5 video的浏览器都能正常工作。

3. 添加同步标记，阻止循环触发

可以定义一个全局（或局部）标记，标记当前是否正在执行同步操作，在事件触发时跳过同步中的请求：

// 标记是否正在同步操作
let isSyncing = false;

$(videoA).on("pause", e => {
  if (!isSyncing) {
    isSyncing = true;
    // 假设sendRequestToPauseVideoB是异步请求，用finally重置标记
    sendRequestToPauseVideoB().finally(() => {
      isSyncing = false;
    });
  }
});
$(videoA).on("play", e => {
  if (!isSyncing) {
    isSyncing = true;
    sendRequestToPlayVideoB().finally(() => {
      isSyncing = false;
    });
  }
});

// 同理处理videoB
$(videoB).on("pause", e => {
  if (!isSyncing) {
    isSyncing = true;
    sendRequestToPauseVideoA().finally(() => {
      isSyncing = false;
    });
  }
});
$(videoB).on("play", e => {
  if (!isSyncing) {
    isSyncing = true;
    sendRequestToPlayVideoA().finally(() => {
      isSyncing = false;
    });
  }
});

如果你的请求是同步的，直接在执行后重置isSyncing即可，不需要finally。

内容的提问来源于stack exchange，提问作者Exfridos