1

我正在开发一个谷歌地图界面，其中所有视频都包含在 Wordpress 帖子中并附加到标记中。该界面还包括预加载在地图正上方的“4 div 容器”，当我单击标记时，Jquery Ajax 会加载对应于同一类的 div 内的视频。当相关视频结束时，我需要“div 容器”淡出。

当我处理多个非由 JS 生成的 iframe 时，我正在尝试在YouTube API Target (多个) 现有 iframe(s)上实施 RobW 提出的解决方案

但是，我遇到了一种奇怪的行为。当我加载第一个播放器时，分配的 onStateChange 函数永远不会起作用，当我触发第二个播放器时它开始给出一些反馈。

我真的无法理解原因，但是我集成脚本的方式可能是错误的。我在单独的 .js 文件中预加载 RobW 脚本的第一部分，然后在我的 Ajax 调用中设置 YT_ready(function() 如下：



google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            var destinationWin = $('#'+locations[i].meta);
            destinationWin.html("loading...");
            destinationWin.load('?action=ajax_post&id='+ locations[i].addre);

            YT_ready(function() {
    $("iframe[id]").each(function() {
        var identifier = this.id;
        var frameID = getFrameID(identifier);
        if (frameID) { //If the frame exists
            players[frameID] = new YT.Player(frameID, {
                events: {
                    "onStateChange": function(event){
                    if(event.data == 0 ){
                    console.log("ENDED");
                    }
                    }


                }
            });
        }
    });
});
                            }
        })(marker, i));     
    }

}

您可以通过访问http://testmap.byethost9.com/在控制台上检查结果。 PinkFish 是谷歌标记，它们确实可以在四个红框之一中加载视频。任何意见/帮助将不胜感激。

4

0 回答 0