javascript - 使用 YouTube iframe API 触发简单事件/使用player.getCurrentTime 同步事件

Question

这似乎是一件相对容易的事情，但是网络上缺乏示例(以及 JS API 的弃用)让我头晕目眩，所以就开始吧。我希望在 YouTube 视频到达特定时间时执行一些代码。您可以查看此示例 here和 here 。

我想做的事情远没有那么复杂。当视频播放 3 秒时，我想在页面上添加一些文字。就是这样。
http://jsfiddle.net/StephanieQ/2sj9smnd/

 var youtubetime;
function onPlayerStateChange(event){
    if(event.data==1) { // playing
        myTimer = setInterval(function(){ 
            youtubetime = Math.round(player.getCurrentTime()*10)/10;
            $("#timeHolder").text(youtubetime);
            //return youtubetime;
        }, 100);
    }
    else { // not playing
        clearInterval(myTimer);
    }
}

if( youtubetime > 3  ) {
     $("#results").text("Working!");

但是这不起作用。我尝试过 parseFloat (不需要它，因为 player.getCurrentTime(); 应该返回一个数字。)但这没有帮助。我将当前时间精确到小数点后一位显示在底部的 div 中，因此清楚地表明我正在使用的变量已定义并且正在工作。

为什么这不起作用？看起来很简单...

注意:仅 iframe API，因为 YouTube 的 JS API 已弃用。

编辑:setInterval 是我得救的关键!

setInterval(function () {
if (youtubetime > 3) { $("#results").text("Works!"); } }, 100);

我是个白痴...

Answer 1

根据 not_a_bot 的建议，我将添加我的编辑来回答我自己的问题，因为我自己解决了这个问题，也许其他人可以从中学习。

我使用 setInterval 每隔十分之一秒 (100ms) 检查一次变量 youtubetime 是否大于三秒。如果没有这种定期检查，匿名函数将无法工作(否则仅在页面加载时检查变量。)

setInterval(function () {
if (youtubetime > 3) { $("#results").text("Works!"); } }, 100);

因为知识就是力量!