loadVideo() + setCurrentTime() 在一个 onclick-Event 中

Question

通过单击一个按钮，我希望嵌入的 vimeo 播放器能够：

将播放的视频更改为给定的ID
跳转到指定时间
播放视频

起初我试过：onclick="player.loadVideo(12345678); player.setCurrentTime(5); player.play()."

这显然行不通。我已经了解到 loadVideo() 函数会触发一个事件 - 因此第二个函数必须在捕获到此事件后运行。由于我对 JavaScript 的理解仍然非常有限，我很想了解它是如何工作的。

Answer 1

您正在拨打的所有电话都是Promises。在进行下一个请求之前，您需要确保等待每个请求成功 return。这是给你的例子

var player = new Vimeo.Player('player', { id:76979871, muted: true });
player.loadVideo(309565369).then(function(id) {
    player.setCurrentTime(30).then(function(seconds) {
        player.play().then(function() {
            console.log('the video was played');
        }).catch(function(error) {
            console.log(error);
        });
    }).catch(function(error) {
        console.log(error);
    });
}).catch(function(error) {
    console.log(error);
});

Answer 2

正如前面提到的关于承诺。您所需要的只是等待方法正确完成。除了用 then 和 catch 作为旧方法写之外，我还可以推荐更具可读性的 async await 方法。你可以看到如下

const playVideo = async (id, time) => {
   try {
     await player.loadVideo(id);
     await player.setCurrentTime(time);
     await player.play();
   } catch (err) {
     console.log(err);
   } 
}
onclick="playVideo(309565369, 5)"

loadVideo() + setCurrentTime() 在一个 onclick-Event 中

loadVideo() + setCurrentTime() in one onclick-Event

javascript

vimeo

vimeo-api