如何实现轮播视频滑出屏幕时暂停、回到可视区域时恢复播放？

嘿，这个需求很实用，我来帮你一步步搞定！核心思路就是监听轮播的切换事件，判断视频所在的轮播项是否处于可视状态，然后控制Vimeo视频的播放/暂停。下面结合你的现有代码给出具体实现：

第一步：优化现有脚本，缓存播放器实例 #

首先，我们把Vimeo播放器实例缓存起来，避免每次操作都重复创建，提升性能：

// 全局缓存Vimeo播放器实例
const videoPlayer = new Vimeo.Player($("#video")[0]);
// 记录静音状态，初始和iframe配置保持一致（默认静音）
let isVideoMuted = true;

// 优化音量控制逻辑
$("[data-vimeo=unmute]").click(function() {
  const volumeIcon = document.getElementById("volume");
  isVideoMuted = !isVideoMuted;
  
  // 动态切换图标路径（用你项目里的变量，避免硬编码）
  volumeIcon.src = isVideoMuted 
    ? "{image_dir}/icons/volume_off.svg" 
    : "{image_dir}/icons/volume_on.svg";
  
  videoPlayer.setMuted(isVideoMuted);
});

// 模态框控制逻辑保持不变，简化调用
$("[data-controls=video]").click(function() {
  videoPlayer.pause();
});

$("[data-close=video]").click(function() {
  videoPlayer.play();
});

第二步：编写视频可见性检查函数 #

这个函数用来判断视频所在的轮播项是否处于可视（活跃）状态，然后控制播放/暂停：

function checkVideoVisibility() {
  // 视频在第一个轮播项里，获取这个元素
  const videoSlide = $(".slider__item").first();
  // 假设你的轮播会给当前活跃的项添加「active」类（如果不是，换成你实际用的类名）
  const isSlideVisible = videoSlide.hasClass("active");

  if (isSlideVisible) {
    // 可见时恢复播放
    videoPlayer.play().catch(err => {
      // 处理浏览器自动播放限制（如果用户还没交互过，可能会失败）
      console.log("无法自动播放，请先点击页面任意位置", err);
    });
  } else {
    // 不可见时暂停
    videoPlayer.pause();
  }
}

第三步：监听轮播切换事件 #

根据你使用的轮播插件/自定义逻辑，绑定对应的切换事件，在切换完成后调用上面的检查函数：

情况1：如果用的是Swiper轮播 #

// 初始化Swiper时绑定slideChange事件
const swiper = new Swiper('.slider--default', {
  // 你的轮播配置（比如自动播放、滑动速度等）
  autoplay: {
    delay: 5000,
  },
  // ...其他配置
  
  // 监听轮播切换完成事件
  on: {
    slideChange: function() {
      checkVideoVisibility();
    }
  }
});

情况2：如果用的是Owl Carousel轮播 #

// 监听轮播切换完成事件
$('.slider--default').on('changed.owl.carousel', function() {
  checkVideoVisibility();
});

情况3：如果是自定义的轮播逻辑 #

如果是你自己写的左右滑动按钮，就在滑动动画完成后调用检查函数（加个小延时确保动画结束）：

// 左滑按钮
$('.slider-prev').click(function() {
  // 你的自定义滑动逻辑...
  
  // 动画完成后检查可见性
  setTimeout(checkVideoVisibility, 300);
});

// 右滑按钮
$('.slider-next').click(function() {
  // 你的自定义滑动逻辑...
  
  // 动画完成后检查可见性
  setTimeout(checkVideoVisibility, 300);
});

第四步：页面初始化时检查一次 #

确保页面加载完成后，默认显示视频项时能正常播放：

$(document).ready(function() {
  checkVideoVisibility();
});

注意事项 #

• 确保你的轮播组件会给当前活跃的轮播项添加明确的类（比如active），如果类名不同，记得修改checkVideoVisibility里的判断条件。
• 浏览器的自动播放限制：如果用户还没有和页面交互过（比如点击过音量按钮、模态框或轮播），浏览器可能会阻止play()方法执行，这时候可以在catch回调里给用户提示，或者忽略（因为用户交互后就正常了）。

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