4

我有一个 vimeo 视频,我想在单击按钮后 3 秒播放。我可以让视频在点击时播放,但我似乎无法在正确的位置获得 setTimeout ......有什么建议吗?

var iframe1 = document.getElementById("prelearn-1");
var player1 = $f(iframe1);

var prelearnBtn = document.getElementById("prelearn-1-btn");
prelearnBtn.addEventListener("click", setTimeout(function(){player1.api("play")}, 3000));

我正在使用 vimeo froogaloop API。

4

4 回答 4

14

只需将它包装在一个函数中 -

prelearnBtn.addEventListener("click", function(){
    setTimeout(function(){
        player1.api("play");
    }, 3000);
});
于 2015-04-20T18:12:41.397 回答
2

setTimeout函数接受一个回调函数。只需将您的代码包装在一个匿名函数中,它就可以工作了。此外,如果您尝试访问 iFrame 的内容,您可能会遇到跨域问题。

var iframe1 = document.getElementById("prelearn-1");
var player1 = $f(iframe1);

var prelearnBtn = document.getElementById("prelearn-1-btn");
prelearnBtn.addEventListener("click", function(){setTimeout(function(){player1.api("play")}, 3000)});
于 2015-04-20T18:13:06.623 回答
0

AddEventlistener 将匿名函数作为第二个参数。所以你需要把setTimeout匿名函数包装在里面。每当点击事件发生时,setTimeout 代码就会触发并播放视频。

prelearnBtn.addEventListener("click", function () {
    setTimeout(function () {
        player1.api("play")
    }, 3000)
}, false);
于 2015-04-20T18:13:17.670 回答
0

ES2015更短的语法 + 利用第三个参数setTimeout将使我们的代码更短更好,同时保持可读性:

document.querySelector('button').addEventListener("click",() => 
  setTimeout(console.log, 1000, "play")
)
<button>Play</button>

为了打印参数,上面的示例替换了 OP 的player1.api方法,这说明了代码的工作原理。console.log

于 2019-11-12T13:04:16.803 回答