Chrome中iframe内Vimeo视频无法启动且LoadProgress未触发

看起来你遇到的问题主要由几个关键因素导致，结合Chrome的播放政策和代码中的小错误，我们一步步来解决：

1. 修复iframe URL参数的拼接错误 #

你在动态生成iframe src的时候，player_id和portrait参数之间缺失了&符号，导致Vimeo无法正确识别player_id，这是引发重复ready事件的核心原因。

错误代码片段：

'&player_id=vimeo'+key+ 'portrait=0'

修复后：

'&player_id=vimeo'+key+ '&portrait=0'

这个小错误会让播放器无法绑定正确的player_id，导致初始化流程异常，反复触发ready事件。

2. 适配Chrome的Autoplay政策 #

Chrome严格限制自动播放非静音媒体，即使你设置了autoplay=1，如果没有开启静音，浏览器会直接阻止自动播放。

解决方法：在iframe的URL参数中添加&muted=1，修改后的src模板如下：

$(iframe).attr('src', 'https://player.vimeo.com/video/'+key+'?api=1'+ 
  '&autopause=0'+ 
  '&autoplay=1'+ 
  '&badge=0'+ 
  '&byline=0'+ 
  '&loop=1'+ 
  '&player_id=vimeo'+key+ 
  '&portrait=0'+ 
  '&title=0'+
  '&muted=1'); // 添加静音参数

如果需要有声播放，你需要移除或调整那个覆盖在iframe上的interaction_preventer层，让用户可以点击视频触发播放（Chrome会允许用户交互后的有声播放）。

3. 优化Message事件监听逻辑 #

3.1 避免重复添加事件监听 #

现在每次触发ready事件都会重复添加loadProgress监听，我们可以给每个视频对象加一个标记，确保只添加一次：

case 'ready':
  if (!vimeoVideos[key].ready) { // 新增标记，避免重复绑定
    vimeoVideos[key].ready = true;
    vimeoVideos[key].iframe.contentWindow.postMessage(
      JSON.stringify({method: 'addEventListener', value: 'loadProgress'}),
      'https://player.vimeo.com' // 指定正确的origin，更安全
    );
  }
  break;

3.2 统一PostMessage格式 #

注意到你在触发pause时用了JSON.stringify，但添加监听时没有统一格式。Vimeo的Player API要求发送的是JSON字符串，同时指定正确的origin（不要用*，避免安全风险），保持格式一致能减少异常。

4. 调整交互阻止层的逻辑 #

你添加的interaction_preventer层会完全阻止用户与iframe的交互，这不仅会影响手动播放，也可能干扰播放器的事件传递。如果必须保留这个层，建议在视频加载完成后（比如loadProgress触发时）移除它：

case 'loadProgress':
  $(vimeoVideos[key].iframe).css({ opacity: 1 });
  // 移除交互阻止层，允许用户操作视频
  $(interaction_preventer).remove();
  break;

验证修复后的效果 #

修复以上问题后，Chrome中应该会：

• 只触发一次ready事件
• 正常触发loadProgress事件
• 静音状态下自动播放视频（如果需要有声，引导用户点击播放即可）

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