Question

我正在使用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-Player的信息，没有...我能找到。 ..关于周围的iframe对象。

所以问题是：我怎样才能访问iframe-id，它曾用于初始化YT-Player，在函数“onYouTubePlayerStateChange”中？

PS：现在我已经使用了存储在event-object中的video_id或playlist_id来识别iframe。但是当我有两个拥有相同YT-video_id的玩家时，虽然这种情况不太可能，但他们都会继续跑。

感谢您帮我解决这个问题。

请，

Max K

Answer 1

所以最后我发现了一个非常简单的解决方案，通过将参数传递给另一个函数并传递默认的＆＃34;事件＆＃34; object加上自定义的iframe_id，如下所示：

player = new YT.Player( iframe_id, {
              events: {
                'onStateChange': function(event){
                  onYouTubePlayerStateChange(event, iframe_id);
                }
              }
            });

现在，在＆＃34; onYouTubePlayerStateChange＆＃34;函数你可以访问具有播放器当前状态的youtube-event-object和定义它实际上是哪个播放器的iframe_id。

干杯！

Answer 2

获取iframe ID的另一种方法：

jQuery(event.target.getIframe()).attr('id')

Answer 3

如 @Dmitro 所述，您可以使用 getIframe() 方法，无需 jQuery 的解决方案：

event.target.getIframe().id

YouTube Iframe-API：在'onStateChange'函数

3 个答案: