JS实现：前一个Vimeo视频结束后加载新视频的方法

我来给你梳理一下完整的实现方案，刚好能解决你遇到的问题——核心就是利用Vimeo官方Player SDK的事件监听和视频加载API，结合你的视频ID数组来完成自动切换。

步骤1：引入Vimeo Player SDK #

首先得在页面里引入Vimeo的Player脚本，这样才能调用官方的API来监听视频状态和加载新视频：

<script src="https://player.vimeo.com/api/player.js"></script>

步骤2：初始化播放器与基础变量 #

先准备好你的视频容器、视频ID数组，还有当前播放的索引（你已经确认索引能正确递增，这部分可以沿用你的逻辑）：

// 视频容器的DOM元素（假设你的容器id是vimeo-player）
const playerElement = document.getElementById('vimeo-player');
// 你的视频ID数组
const videoIds = ['123456', '789012', '345678'];
// 当前播放的索引，初始为0
let currentIndex = 0;

// 初始化Vimeo播放器
const player = new Vimeo.Player(playerElement, {
  id: videoIds[currentIndex],
  autoplay: true, // 根据需求设置是否自动播放
  loop: false // 不要开启循环，否则不会触发ended事件
});

步骤3：监听视频结束事件并加载新视频 #

关键就是监听ended事件，在事件触发时更新索引，然后调用loadVideo方法传入新的视频ID：

// 监听视频播放结束事件
player.on('ended', () => {
  // 更新索引（你已经确认这部分逻辑正常，这里直接沿用）
  currentIndex = (currentIndex + 1) % videoIds.length; // 用取模实现循环播放，不需要的话直接currentIndex++即可
  // 加载新的视频
  player.loadVideo(videoIds[currentIndex])
    .then(() => {
      // 加载成功后的操作，比如自动播放
      player.play();
    })
    .catch(error => {
      // 处理加载失败的情况
      console.error('加载视频失败:', error);
    });
});

关键注意点 #

• 确保你使用的是Vimeo官方Player SDK，而不是直接嵌入iframe的原生方式——原生iframe没法直接监听播放结束事件，也没法方便地切换视频ID。
• 如果你的视频需要权限，要确保播放器初始化时配置了正确的token（如果是私有视频的话）。
• 测试时注意浏览器的自动播放限制，有些浏览器需要用户交互后才能自动播放下一个视频，这时候可以在loadVideo成功后提示用户点击播放，或者确保第一个视频是用户手动触发的。

看起来你已经搞定了索引递增的逻辑，剩下的就是用player.loadVideo()这个API来传入新ID，上面的代码应该能完美适配你的需求～

内容的提问来源于stack exchange，提问作者Adam Šulc