Chrome浏览器下PopcornJS调用Vimeo视频点击播放触发Pause事件问题

该异常和Chrome近年的媒体播放策略、跨源资源交互规则更新直接相关，以下是可逐一排查的具体原因和修复方案：

常见触发原因 #

• Chrome 103+版本更新了跨源iframe的媒体交互权限规则，Vimeo播放器作为跨源iframe嵌入时，如果PopcornJS绑定事件的时机早于Vimeo播放器实例初始化完成，会触发Chrome的媒体权限拦截，强制暂停未授权的播放请求
• Chrome对play()方法返回的Promise异常处理规则和其他浏览器不同：如果调用play时播放器资源还未加载完成，Chrome会直接抛出NotAllowedError并触发pause事件，Firefox和Edge会等待资源加载完成后重试播放，不会直接触发暂停
• PopcornJS的旧版本（1.0~1.2版本）对Chrome的MediaSessionAPI兼容存在缺陷，会错误监听Chrome系统级的媒体暂停信号，在播放启动后误触发pause回调

排查步骤 #

1. 在Chrome控制台开启「媒体」日志面板，复现问题后查看是否存在Play request interrupted类的报错，确认是否是权限拦截导致的暂停
2. 给play()调用加catch逻辑捕获异常，示例代码如下：

// 此处player为你初始化的Vimeo播放器实例
player.play().catch(err => {
  console.log('播放异常原因：', err.name, err.message);
  // 可按需添加重试播放逻辑
  setTimeout(() => player.play(), 100);
});

3. 调整PopcornJS的初始化时机，确保在Vimeo播放器的ready事件触发后再初始化PopcornJS实例，避免事件绑定冲突
4. 升级到PopcornJS的最新维护版本，或者移除对未使用的媒体控制相关插件的引入，避免兼容问题

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