WordPress站点视频需求：进入视口自动播放，指定时间暂停并保持

嘿，这个交互效果挺有意思的！我帮你梳理下怎么在WordPress里实现视频进入视口自动播放，到指定时间点暂停并保持的需求：

1. 准备视频元素 #

首先，确保你的视频标签有唯一ID，方便JS定位。如果是用WordPress自带的视频块，你可以切换到「代码编辑器」模式，给video标签加上id="stack-tiles-video"，同时加上muted和playsinline属性（这俩是浏览器自动播放政策要求的，不然有声视频没法自动播放）：

<video id="stack-tiles-video" src="你的视频文件URL" muted playsinline></video>

（如果不需要循环播放可以去掉loop属性）

2. 核心JavaScript逻辑 #

我们用Intersection Observer API来检测视频是否进入视口（比监听scroll事件性能好太多），然后监听视频的timeupdate事件，当播放到你设定的暂停时间点时，暂停视频并移除监听，确保不会再次触发。

把下面的代码放到你的WordPress站点里：

document.addEventListener('DOMContentLoaded', function() {
  // 获取视频元素
  const targetVideo = document.getElementById('stack-tiles-video');
  if (!targetVideo) return; // 如果找不到视频就终止

  // 这里设置你需要暂停的时间点（单位：秒），比如瓷砖堆叠完成是8秒，就填8
  const pauseAtSecond = 8;

  // 创建视口检测观察者
  const videoObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 视频进入视口，尝试播放
        targetVideo.play().catch(error => {
          console.log('视频自动播放失败：', error);
          // 这里可以加降级处理，比如显示播放按钮
        });
        // 开始监听视频播放时间
        targetVideo.addEventListener('timeupdate', checkPlayTime);
      } else {
        // 视频离开视口，移除时间监听（可选，根据需求调整）
        targetVideo.removeEventListener('timeupdate', checkPlayTime);
      }
    });
  }, { threshold: 0.3 }); // 当视频30%进入视口时触发，可按需调整

  // 开始观察视频元素
  videoObserver.observe(targetVideo);

  // 检查播放时间的函数
  function checkPlayTime() {
    if (targetVideo.currentTime >= pauseAtSecond) {
      targetVideo.pause();
      // 移除时间监听，确保暂停后不会再触发
      targetVideo.removeEventListener('timeupdate', checkPlayTime);
      // 可选：如果想禁止用户手动继续播放，可以隐藏控制条
      // targetVideo.controls = false;
    }
  }
});

3. 在WordPress中添加脚本的方式 #

你有几种简单的选择：

• 自定义HTML块：在视频块的下方添加一个「自定义HTML」块，把上面的代码用<script>标签包裹起来直接粘贴进去。
• 主题footer.php：如果你会编辑主题文件，打开footer.php，在</body>标签前插入这段脚本。
• functions.php：通过WordPress的脚本钩子添加，把下面的代码放到主题的functions.php里（注意提前备份文件）：

function enqueue_video_autoplay_script() {
  wp_add_inline_script( 'wp-util', '
    document.addEventListener("DOMContentLoaded", function() {
      const targetVideo = document.getElementById("stack-tiles-video");
      if (!targetVideo) return;

      const pauseAtSecond = 8;

      const videoObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            targetVideo.play().catch(error => console.log("播放失败:", error));
            targetVideo.addEventListener("timeupdate", checkPlayTime);
          } else {
            targetVideo.removeEventListener("timeupdate", checkPlayTime);
          }
        });
      }, { threshold: 0.3 });

      videoObserver.observe(targetVideo);

      function checkPlayTime() {
        if (targetVideo.currentTime >= pauseAtSecond) {
          targetVideo.pause();
          targetVideo.removeEventListener("timeupdate", checkPlayTime);
        }
      }
    });
  ' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_video_autoplay_script' );

4. 关键注意事项 #

• 浏览器自动播放政策：必须给视频加上muted属性，否则浏览器会阻止自动播放。如果需要有声效果，可以在暂停后让用户手动点击播放并开启声音。
• 调试暂停时间：你可以在checkPlayTime函数里加console.log(targetVideo.currentTime)，打开浏览器控制台查看视频当前播放时间，精准设置pauseAtSecond的值。
• 移动端兼容性：playsinline属性是为了让iOS设备上视频不会自动全屏播放，保持在页面内。

这样就能完美实现你要的效果：用户滚动到视频位置时，视频自动播放瓷砖下落的动画，等所有瓷砖堆叠完成后自动暂停并保持状态~

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