使用带有player.getCurrentTime的YouTube iframe API / sync事件触发简单事件

时间:2015-06-10 21:39:00

标签: javascript jquery iframe youtube-api youtube-iframe-api

这似乎是一件相对简单的事情,但是网络上缺少示例(以及JS API的弃用)让我头晕目眩,所以这里就是这样。我希望在YouTube视频播放到特定时间时执行一些代码。您可以看到此herehere的示例。

我尝试做的事情远不那么复杂。当视频进入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);

我是个白痴......

1 个答案:

答案 0 :(得分:1)

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

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

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

'因为知识才是力量!