如何解决如何使用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
链接版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。