如何实现多个Vimeo嵌入视频Hover时独立播放？

我页面里有数量不确定的多个Vimeo嵌入视频，想要实现每个视频在鼠标悬停时自动播放，移出时暂停。目前已经搞定单个视频的Hover播放，但不知道怎么循环为每个视频创建对应的Vimeo.Player实例，实现各自独立的Hover控制。当前代码如下：

<div class="work__is-video"><div style="padding:75% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/745178758?h=cc048cba55&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Present Momentum _ No Brakes Ep 10 Presented by Afterpay (1).mp4"></iframe></div></div>

<div class="work__is-video"><div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/745152170?h=8594922fdc&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="EE_Hope_United_60sec_Ex_Kids_Subtitled_H264.MP4"></iframe></div></div>

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

const iframe = document.querySelector('iframe');
const player = new Vimeo.Player(iframe);


$('.work__is-video').hover(function() {
    player.play();
    console.log("hovered");
  }, function() {
    player.pause();
});

解决方案 #

核心思路是为每个视频容器内的iframe创建独立的Vimeo.Player实例，并将实例与对应容器绑定，确保hover事件只触发当前视频的播放/暂停。修改后的代码如下：

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

// 遍历所有视频容器，为每个容器创建独立的播放器实例并绑定事件
$('.work__is-video').each(function() {
  // 获取当前容器内的iframe元素
  const iframe = $(this).find('iframe')[0];
  // 为当前iframe创建专属的Vimeo播放器实例
  const player = new Vimeo.Player(iframe);
  
  // 绑定hover事件到当前容器
  $(this).hover(
    // 鼠标悬停时播放视频
    function() {
      player.play().catch(error => {
        // 处理播放失败场景（比如浏览器阻止自动播放）
        console.error('视频播放失败:', error);
      });
    },
    // 鼠标移出时暂停视频
    function() {
      player.pause();
    }
  );
});

关键说明 #

• 使用each()遍历所有.work__is-video容器，确保每个视频都能被独立处理
• 每个iframe对应唯一的Vimeo.Player实例，彻底避免视频间的控制干扰
• 添加catch()捕获播放错误，兼容部分浏览器对自动播放的限制
• 保持iframe链接中的autopause=0参数，防止Vimeo默认暂停其他正在播放的视频

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