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

Posted 2023-05-09

【中文标题】使用 YouTube iframe API 触发简单事件/使用 player.getCurrentTime 同步事件

【英文标题】：Triggering a simple event with YouTube iframe API / sync event with player.getCurrentTime

【发布时间】：2015-08-26 09:07:45

【问题描述】：

这似乎是一件相对容易的事情，但是网络上缺乏示例（以及 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);

我是个白痴……

【问题讨论】：

我建议您将您的编辑作为您问题的答案，然后将其标记为已接受，因为这表明您可以自己找到解决方案。

@not_a_bot 啊，我不知道我能做到这一点。感谢您的建议：D 完成！

【参考方案1】：

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

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

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

因为知识就是力量！