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

【问题标题】：vimeo api: play button for multiple videosvimeo api：多个视频的播放按钮
【发布时间】：2021-05-28 20:37:23
【问题描述】：

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

我收到错误：未捕获的类型错误：player.play 不是函数

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!');
     });
        
}

【问题讨论】：

在 for 循环中添加 eventListener。 example
谢谢，看我更新的帖子

标签： jquery vimeo-api

【解决方案1】：

document.querySelector('.play') 确实是第一个按钮，无论您循环多少次。请改用document.querySelectorAll(".play")[i]。

var video_frame = document.querySelectorAll("iframe");
var play_btn = document.querySelectorAll(".play");

var nodelist = video_frame.length;

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

【讨论】：