【问题标题】:Popup window on youtube api eventyoutube api 事件上的弹出窗口
【发布时间】:2012-04-06 18:11:10
【问题描述】:

我正在使用 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 就会作为 newstate 返回。

我尝试了以下方法,但无法正常工作。有什么建议吗?

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

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

【问题讨论】:

    标签: jquery youtube-api dom-events simplemodal


    【解决方案1】:
    1. $("form-box").modal(); 应该是 $("#form-box").modal();
    2. 您确定newState 是一个数字吗?如果没有,您可能想使用== 而不是===
    3. 删除页面中其他未使用的 jQuery 插件。它们可能会引发冲突。

    【讨论】:

    • 我一定刚刚编辑了#,因为我也注意到了这一点。我不确定它是一个数字,我试试 == 并让你知道
    • 用 == 而不是 === 测试过,仍然没有触发。
    • console.log() 说newState的值是什么?
    • 说没有定义...不知道为什么
    • onytplayerStateChange()的内容还是alert("Player's new state: " + newState);时,newState的值是多少?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多