WordPress DIVI主题下Vimeo播放器集成故障：播放20秒后无法显示元素

问题诊断 #

1. 重复ID冲突：iframe同时设置了id="player1"和id="video"，会导致DOM选择器识别异常
2. 不必要的延迟绑定：用setTimeout包裹播放器ready事件，可能错过Vimeo播放器的就绪状态，导致进度监听失效
3. 类型比较错误：将播放时长与字符串'20'比较，逻辑判断会出现异常，应改为数字20
4. DIVI主题兼容问题：DIVI自带jQuery并启用noConflict模式，直接用$可能导致函数未定义

修正后的完整代码 #

HTML代码

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/froogaloop.js"></script>
<iframe id="player1" src="https://player.vimeo.com/video/80312270?api=1&player_id=player1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="show--div-20sec">
  Show me after 20 second of video play
</div>
<div class="buttons">
  <button id="play-button">Play</button>
  <button id="pause-button">Pause</button>
</div>

jQuery代码

jQuery(function($) {
  var iframe = $('#player1')[0];
  var player = $f(iframe);
  var playButton = document.getElementById("play-button");
  var pauseButton = document.getElementById("pause-button");

  // 绑定播放按钮事件
  playButton.addEventListener("click", function() {
    player.api("play");
  });

  // 绑定暂停按钮事件
  pauseButton.addEventListener("click", function() {
    player.api("pause");
  });

  // 播放器就绪后绑定进度监听
  player.addEvent('ready', function() {
    player.addEvent('playProgress', onPlayProgress);
  });

  // 进度监听逻辑
  function onPlayProgress(data) {
    var currentTime = data.seconds;
    if (currentTime >= 20) {
      $('.show--div-20sec').show();
      // 可选：仅触发一次，避免重复执行
      player.removeEvent('playProgress', onPlayProgress);
    }
  }
});

CSS代码

.button {
  width: 48px;
  height: 48px;
  cursor: pointer;
}

.defs {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

iframe {
  float: left;
  width: 350px;
  height: 200px;
}

.buttons {
  padding: 1rem;
  background: #f06d06;
  float: left;
}

body {
  padding: 1rem;
}

.show--div-20sec {
  width: 100%;
  background: red;
  height: 80px;
  float: left;
  display: none;
}

DIVI主题集成注意事项 #

1. jQuery兼容处理：代码开头用jQuery(function($) {})，确保在DIVI的noConflict模式下$可以正常使用
2. 代码放置位置：将JS代码放在DIVI后台「主题选项」→「集成」→「页脚代码」区域，保证在jQuery和froogaloop.js之后加载
3. 缓存清理：修改代码后清理WordPress缓存和浏览器缓存，避免旧代码干扰
4. 混合内容检查：确保所有外部资源链接为HTTPS，避免浏览器拦截加载

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