Vimeo切换下一个视频后无法触发play、ended事件求助

你遇到的问题核心在于：直接修改iframe的src会导致原有的Vimeo Player实例与新加载的iframe失去绑定，之前注册的play和ended事件监听也就无法作用于新视频了。

正确的解决方案：使用Vimeo Player官方API切换视频 #

Vimeo的Player SDK提供了专门的loadVideo方法来更换视频，这样能保持Player实例的有效性，之前绑定的事件监听也会自动作用于新视频。

修改后的代码如下：

var player = new Vimeo.Player('videoPlayer');

var onPlay = function(data) {
  console.log('Video is Played');
}
var onEnd = function(data) {
  console.log('Video is ended');
}

player.on('play', onPlay);
player.on('ended', onEnd);

var nextBtn = document.querySelector('button#next');
var playNextVideo = function(event) {
  console.log('Playing Next Video');
  // 使用loadVideo方法加载新视频，而不是直接修改src
  player.loadVideo(234797489)
    .then(function() {
      // 视频加载成功后的回调（可选）
      console.log('新视频加载完成');
    })
    .catch(function(error) {
      console.error('加载视频失败:', error);
    });
}

nextBtn.addEventListener('click', playNextVideo);

为什么直接改src不行？ #

当你创建new Vimeo.Player('videoPlayer')时，SDK会和当前的iframe元素建立绑定关系，包括监听它的内部消息（Vimeo播放器通过postMessage和父页面通信）。一旦你修改iframe的src，旧的iframe上下文被销毁，新加载的iframe是一个全新的实例，原来的Player对象无法再和它通信，自然收不到事件通知。

备选方案：如果必须修改src（不推荐） #

如果出于某些原因必须直接修改src，那需要重新创建Player实例并重新绑定事件：

var iframe = document.getElementById('videoPlayer');
var player;

// 封装初始化播放器和绑定事件的函数
function initPlayer() {
  // 先移除旧实例的事件（如果存在）
  if (player) {
    player.off('play', onPlay);
    player.off('ended', onEnd);
  }
  // 创建新的Player实例
  player = new Vimeo.Player(iframe);
  // 重新绑定事件
  player.on('play', onPlay);
  player.on('ended', onEnd);
}

var onPlay = function(data) {
  console.log('Video is Played');
}
var onEnd = function(data) {
  console.log('Video is ended');
}

// 初始化第一个视频
initPlayer();

var nextBtn = document.querySelector('button#next');
var playNextVideo = function(event) {
  console.log('Playing Next Video');
  // 修改src
  iframe.src = 'https://player.vimeo.com/video/234797489';
  // 等待iframe加载完成后重新初始化Player
  iframe.onload = function() {
    initPlayer();
  };
}

nextBtn.addEventListener('click', playNextVideo);

这个方案需要处理iframe的加载事件，并且每次切换都要重新初始化，不如使用官方的loadVideo方法简洁可靠，所以优先推荐第一种方案。

内容的提问来源于stack exchange，提问作者Hira Kumar Maharjan