YouTube Iframe API:获取内部的Iframe id';onStateChange';功能

YouTube Iframe API:获取内部的Iframe id';onStateChange';功能,youtube,youtube-api,youtube-iframe-api,Youtube,Youtube Api,Youtube Iframe Api,我正在使用YouTube JavaScript API控制页面上的YouTube播放器。目标是在我开始新的视频时停止所有当前播放的视频 已经经历了各种YouTube嵌入选项的斗争,比如单一视频、播放列表等。我遇到了一个问题,这将使我的生活更加轻松 像这样初始化播放器: // Array to store YTplayers var YTplayers = []; // Select all YouTube iframes var YTembeds = $('iframe[src*="youtu

我正在使用YouTube JavaScript API控制页面上的YouTube播放器。目标是在我开始新的视频时停止所有当前播放的视频

已经经历了各种YouTube嵌入选项的斗争,比如单一视频、播放列表等。我遇到了一个问题,这将使我的生活更加轻松

像这样初始化播放器:

// Array to store YTplayers
var YTplayers = [];

// Select all YouTube iframes
var YTembeds = $('iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"]'); 

YTEmbeds.each(function(i) {
    iframe = $(this);

    // Generate and add the unique identifier for the current iframe
    var iframe_id = "iframe-youtube-" + i;
    iframe .attr("id", iframe_id);

    // Check if src already has a "?" and add "?" or "&" accordingly
    // then add the necessary "enablejsapi=1" option and update the src. 
    var url = iframe .attr("src");
    url += url.indexOf("?") == -1 ? "?" : "&";
    iframe.attr("src", url + "enablejsapi=1");

    // Create YouTube Player Object with custom eventListener
    player = new YT.Player( iframe_id, {
                  events: {
                    'onStateChange': onYouTubePlayerStateChange
                  }
                });

    // Store the new player element and the iframe_id together
    YTplayers.push({
        "id" : iframe_id,
        "player" : player
    });
});
现在,在函数“onYouTubePlayerStateChange”中,我可以访问“event”对象,但是只有关于嵌入式youTube播放器的信息,没有任何内容。。。我能找到。。。关于周围的iframe对象

所以问题是:如何在函数“onyoutublayerstatechange”中访问用于初始化YT播放器的iframe id

PS:现在我已经使用了存储在事件对象中的视频id或播放列表id来标识iframe。但是当我有两个玩家拥有相同的YT-video__id时,尽管这种情况不太可能发生,但他们都会继续运行

谢谢你帮我解决这个问题

好心


Max K

因此,最后我找到了一个非常简单的解决方案,将一个参数传递给eventListener函数,方法是用另一个函数包装它,并传递默认的“event”对象加上自定义的iframe_id,如下所示:

player = new YT.Player( iframe_id, {
              events: {
                'onStateChange': function(event){
                  onYouTubePlayerStateChange(event, iframe_id);
                }
              }
            });
现在,在“onyoutublayerstatechange”函数中,您可以访问带有播放器当前状态的youtube事件对象和定义它实际是哪个播放器的iframe_id


干杯

获取iframe id的另一种方法:

jQuery(event.target.getIframe()).attr('id')
如前所述,您可以使用
getIframe()
方法,不使用jQuery的解决方案:

event.target.getIframe().id

五年后,这个答案是相关的!我一直在为同样的事情挣扎。YT对象属性最近从
a
更改为
f
,因此我们必须控制多个YouTube视频的代码开始中断。非常感谢。