时间戳

首页 > 解决方案 > vimeo api：多个视频的播放按钮

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

问题描述

我有不同的 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!');
     });
        
}

标签： jqueryvimeo-api

解决方案

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

推荐阅读