如何使用Vimeo player.js在同一播放器上播放更多视频

问题描述

我试图在同一个Vimeo播放器中一个接一个地播放视频，但没有成功。 这是我正在处理的代码。我找不到任何有关如何执行此操作的示例。 我确定我错了，但我不知道该怎么做...

var iframe = document.querySelector('iframe.main-player');
var player = new Vimeo.Player(iframe);
var video_ids = ['123456789','987654321'];
video_ids.forEach(function(item,index) {
    player.pause();
    player.loadVideo(item);
    player.on('loaded',function() {
        player.play();
    });
})

解决方法

我不确定，因为目前无法测试，但是您可以尝试执行以下操作：

var iframe = document.querySelector('iframe.main-player');
var player = new Vimeo.Player(iframe);
var video_ids = ['123456789','987654321'];
var index = 0;
var playNext = function(data){
    player.pause();
    if(index<=video_ids.length)
       player.loadVideo(video_ids[index++])
}
player.pause();
player.loadVideo(video_ids[index++]);
player.on('loaded',function() {
    player.play();
});

player.on('ended',playNext);

,

通过监听ended事件然后移至下一个项目，这个想法非常简单。

首先，我们只创建一个类来保存一些信息，例如列表和当前播放索引：

import Player from "@vimeo/player";

class Playlist {
  constructor(playlist) {
    this.playlist = playlist;
    this.currentIdx = 0;
  }

  init() {
    this.player = new Player("app",{
      id: this.currentItem,width: 640
    });

    this.player.on("ended",this.onEnded.bind(this));
  }

  onEnded() {
    if (this.currentIdx < this.playlist.length) {
      this.currentIdx++;

      const nextId = this.currentItem;
      this.player.loadVideo(nextId);

      // Check next item has loaded then play it automatically
      // you might not receive any error in case of having to interact with document
      this.player.on("loaded",() => {
        this.player.play();
      });
    }
  }

  get currentItem() {
    return this.playlist[this.currentIdx];
  }
}

// Try to run 2 items
const pl = new Playlist([59777392,28582484]);
pl.init();

注意：我还在https://codesandbox.io/s/focused-firefly-ej0fd?file=/src/index.js

上为您创建了一个codesandbox链接