youtube api事件上的弹出窗口

时间:2012-04-06 18:11:10

标签: jquery youtube-api dom-events simplemodal

我正在使用simplemodal弹出一个模态窗口。我已经测试了模态窗口功能,它一切正常。

我有一个隐藏的div元素:

        <div id="form-box" class="form-box" style="display:none;">
        <div class="form-crop">
        <script type="text/javascript"         src="https://releasetechnique.infusionsoft.com/app/form/iframe/84f82828ea34c2a633bbe0a87560586c"></script>
        </div>
        </div>
如果我用计时器测试它,这会弹出很好。

    <script type="text/javascript">
    $(function() {
    setInterval(update, 1000);
    });

    function update() {
    $("#form-box").modal();
    }
    </script>

现在我要做的就是从Youtube的API获取信息,我已经成功测试了以下内容:

    function onYouTubePlayerReady(playerId) {
        $ytplayer = document.getElementById("myytplayer");
        $ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    }

    function onytplayerStateChange(newState) {
        alert("Player's new state: " + newState);


    }

这是按预期工作的。它返回当前的玩家状态,每当玩家状态改变时,警报都会让我知道。

现在,当玩家状态等于0时,我想要做的是弹出模态窗口.0表示玩家已停止。所以基本上,一旦Youtube视频播放完毕,0就会以新状态返回。

我尝试过以下操作但无法使其正常工作。有什么建议吗?

    function onYouTubePlayerReady(playerId) {
        $ytplayer = document.getElementById("myytplayer");
        $ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    }

    function onytplayerStateChange(newState) {
        if(newstate === 0) {
            $("#form-box").modal(); 
        }
    }

1 个答案:

答案 0 :(得分:1)

  1. $("form-box").modal();应为$("#form-box").modal();
  2. 您确定newState是一个数字吗?如果没有,您可能希望使用==代替===
  3. 删除页面中其他未使用的jQuery插件。他们可能会引发冲突。