javascript - 如何在同一页面上嵌入的多个视频中一次播放一个 Youtube 视频？

Question

当用户播放新视频时，我得到了暂停已经播放的视频的代码。我必须嵌入多个 YouTube 视频。我正在做的是最初加载一些视频并在用户单击显示更多时休息。

此代码对已加载的视频效果很好，但不适用于稍后加载的视频，即 window.load 之后.

这是使用 YouTube 的 iframe API 的 javascript 代码:

    var tag = document.createElement("script");
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
  console.log("function called");
    var $ = jQuery;
    var players = [];
    $("iframe").filter(function(){return this.src.indexOf("http://www.youtube.com/") == 0}).each( function (k, v) {
        if (!this.id) { this.id="embeddedvideoiframe" + k }
        players.push(new YT.Player(this.id, {
            events: {
                "onStateChange": function(event) {
                    console.log("Event called");
                    if (event.data == YT.PlayerState.PLAYING) {
                        $.each(players, function(k, v) {
                            if (this.getIframe().id != event.target.getIframe().id) {
                                this.pauseVideo();
                            }
                        });
                    }
                }
            }
        }))
    });
}

我试着调用 function onYouTubeIframeAPIReady()加载点播视频后。还是行不通。

请帮忙。

Answer 1

实际上问题是这段代码在页面加载时调用了 onYouTubeIframeAPIReady() 函数。因此，它为页面加载时加载的视频创建事件监听器，而不是为稍后按需嵌入/加载的视频创建事件监听器。

我是如何解决这个问题的，我只是简单地 每次加载更多视频后调用 onYouTubeIframeAPIReady() 函数而我 还跟踪已绑定(bind)的玩家通过他们在数组中的 id 并在再次绑定(bind)之前检查以避免重新绑定(bind)问题。

我对代码进行了总共 3 次更改。

变更一:
在绑定(bind)之前检查已经绑定(bind)的播放器，并在绑定(bind)后将其 id 添加到 alreadyBindedPlayers 数组中。

    if(alreadyBindedPlayers.indexOf(this.id)==-1){
     //create event listener
     players.push(new YT.Player(this.id, {
            events: {
                "onStateChange": function(event) {
                    console.log("Event called");
                    if (event.data == YT.PlayerState.PLAYING) {
                        $.each(players, function(k, v) {
                            if (this.getIframe().id !=   
                               event.target.getIframe().id) {
                                this.pauseVideo();
                            }
                        });
                    }
                }
            }
        }));
        alreadyBindedPlayers.push(this.id);  //pushing player id in array
    } 

变更二:
每次按需加载更多视频后(在 window.load() 之后)，我都会调用 onYouTubeIframeAPIReady() 函数。这样这个函数也可以为新嵌入的视频创建事件监听器。

变更三:
我做的另一个改进是我在 onYouTubeIframeAPIReady() 函数之外声明了 player[] 数组以避免重新声明。

感谢@kos 的支持。