UIkit滑块中Vimeo视频无法实现切换时才播放的问题

问题根源 #

你用的background=1和autoplay=1参数组合是核心问题：Vimeo的background模式会强制视频静音自动播放，且忽略页面元素的可见状态——哪怕幻灯片没显示，视频也会在后台加载播放；加上autoplay=1会进一步触发自动播放逻辑，直接导致视频提前启动。

解决方案步骤 #

1. 调整Vimeo嵌入参数

把原来的嵌入链接参数改成：
?api=1&loop=1
去掉background=1和autoplay=1，这两个参数是导致提前播放的关键。保留api=1是为了后续用JS控制播放器，loop=1维持循环需求。

2. 用UIkit滑块事件控制视频播放

借助UIkit滑块的show事件，在切换到目标幻灯片时再触发视频播放，切换离开时暂停并重置到开头：

首先给Vimeo的iframe加个ID方便获取：

<iframe id="vimeo-player" src="https://player.vimeo.com/video/691403770?api=1&loop=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

然后添加JS逻辑（需先引入Vimeo的Player.js库）：

// 初始化Vimeo播放器实例
const vimeoPlayer = new Vimeo.Player('vimeo-player');

// 获取UIkit滑块实例（替换成你的滑块ID）
const slider = UIkit.slider('#your-slider-id');

// 监听滑块切换事件
slider.on('show', (event) => {
  // 第二张幻灯片的索引是1（UIkit滑块从0开始计数）
  if (event.detail.index === 1) {
    // 先把视频重置到开头，再播放
    vimeoPlayer.seekTo(0).then(() => {
      vimeoPlayer.play();
    });
  } else {
    // 切换到其他幻灯片时暂停视频
    vimeoPlayer.pause();
  }
});

额外说明 #

• 确保页面已引入Vimeo的Player.js，可通过CDN引入：<script src="https://player.vimeo.com/api/player.js"></script>
• 如果需要静音播放，可在参数里加&muted=1，但不要用background=1，后者会强制自动播放逻辑。

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