更换iframe URL后Vimeo Player ended事件失效的解决方法

问题核心在于：你直接修改iframe的src属性后，最初创建的Vimeo Player实例和新加载的视频播放器已经断开关联，之前绑定的ended等事件监听器不会自动作用于新视频。

下面提供两种可行的解决方法：

方法一：更换URL后重新初始化Player并绑定事件 #

修改你的loadIframe函数，每次更新iframe的src后，重新创建Player实例并绑定所需事件。注意要先销毁旧的Player实例（避免内存泄漏）：

<script src="https://player.vimeo.com/api/player.js"></script>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://player.vimeo.com/video/137857207" name="frame1" id="frame1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<a href="https://player.vimeo.com/video/137857207" onclick="return loadIframe(this.href);">Page 1</a>
<a href="https://player.vimeo.com/video/344456217?h=e78b006de0" onclick="return loadIframe(this.href);">Page 2</a>

<script>
let player; // 把player变量提升到全局，方便后续销毁

function loadIframe(url) {
  const iframe = document.getElementById('frame1');
  // 销毁旧的Player实例
  if (player) {
    player.destroy().then(() => {
      iframe.src = url;
      // 重新初始化Player并绑定事件
      initPlayer(iframe);
    });
  } else {
    iframe.src = url;
    initPlayer(iframe);
  }
  return false;
}

function initPlayer(iframe) {
  player = new Vimeo.Player(iframe);
  
  player.on('play', function() {
    // alert('You have played the video')
  });
  player.on('ended', function(){
    alert('Video play completed');
  });

  player.getVideoTitle().then(function(title) {
    console.log('title:', title);
  });
}

// 页面加载完成后初始化一次
window.addEventListener('load', () => {
  const iframe = document.getElementById('frame1');
  initPlayer(iframe);
});
</script>

方法二：使用Vimeo Player API的loadVideo方法（更推荐） #

不需要直接修改iframe的src，而是利用Vimeo Player提供的loadVideo方法来更换视频，这样原来的Player实例会保持有效，绑定的事件也会自动作用于新视频：

<script src="https://player.vimeo.com/api/player.js"></script>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://player.vimeo.com/video/137857207" name="frame1" id="frame1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!-- 这里直接传递视频ID，不用完整URL -->
<a href="137857207" onclick="return loadVideo(this.href);">Page 1</a>
<a href="344456217?h=e78b006de0" onclick="return loadVideo(this.href);">Page 2</a>

<script>
const iframe = document.getElementById('frame1');
const player = new Vimeo.Player(iframe);

// 绑定事件（只需要做一次）
player.on('play', function() {
  // alert('You have played the video')
});
player.on('ended', function(){
  alert('Video play completed');
});

function loadVideo(videoId) {
  // 用loadVideo方法加载新视频
  player.loadVideo(videoId).then(() => {
    // 加载成功后可以获取新视频标题
    player.getVideoTitle().then(function(title) {
      console.log('title:', title);
    });
  }).catch(function(error) {
    console.error('加载视频失败:', error);
  });
  return false;
}

// 页面加载完成后获取初始视频标题
player.getVideoTitle().then(function(title) {
  console.log('title:', title);
});
</script>

第二种方法更符合Vimeo API的设计规范，也避免了重复创建实例的开销，优先推荐使用。

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