vimeo api：多个视频的播放按钮

问题描述

我有不同的 vimeo-iframe 嵌入，我希望每个嵌入都有自己的播放按钮。

我收到错误：Uncaught TypeError: player.play is not a function

html：

<div class="video">
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe class="vimeo" src="https://player.vimeo.com/video/00000001?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=0000" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
<div class="btn">play</div>
</div>

<div class="video">
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe class="vimeo" src="https://player.vimeo.com/video/00000002?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=0000" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
<div class="btn">play</div>
</div>
...

js：遍历所有 iframe 并初始化播放器


$(document).ready(function () {
    var x = document.querySelectorAll("iframe");
    var nodelist = x.length;

    for (i = 0; i < nodelist; i++) {
        el = x[i];
        var player = new Vimeo.Player(x[i]);

        player.on('play',function () {
          console.log('played the video!');
        });

        player.on('ended',function () {
          console.log('ended the video!');
        });
      }
 });

js：点击启动众多播放器之一

$(".btn").on('click',function() {
   var player = $(this).siblings("iframe")[0];
   console.log(player);
   player.play();

});

更新：

使用此代码我没有收到错误消息，但是我如何控制哪个按钮将启动哪个视频？目前第一个按钮正在启动最后一个视频

var x = document.querySelectorAll("iframe");
var nodelist = x.length;

for (i = 0; i < nodelist; i++) {
    el = x[i];
    var player = new Vimeo.Player(x[i]);
             
    document.querySelector('.play').addEventListener('click',function() {
          player.play();
        });  
  
    player.on('play',function () {
        console.log('played the video!');
     });
        
}

解决方法

无论循环多少次，

VHD 确实是第一个按钮。改用 document.querySelector('.play')。

document.querySelectorAll(".play")[i]

jquery vimeo-api