当新视频以模式启动时，停止播放其他Youtube视频

问题描述

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

                            function onYouTubeIframeAPIReady() {
                                var $ = jQuery;
                                var players = [];
                                $('iframe').filter(function() {
                                    return this.src.indexOf('https://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) {
                                                if (event.data == YT.PlayerState.PLAYING) {
                                                    $.each(players,function(k,v) {
                                                        if (this.getIframe().id != event.target.getIframe().id) {
                                                            this.pauseVideo();
                                                        }
                                                    });
                                                }
                                            }
                                        }
                                    }))
                                });
                            }
                        });

上面的代码为嵌入式播放器编写了代码，但是如果您在所有iframe嵌入式视频都正常工作之前点击播放视频，则除非刷新页面，否则它通常会停止工作。在所有YouTube嵌入广告加载完毕后，是否可以调用此代码？

解决方法

您可以将onReady事件与Promises一起使用，以确定是否已加载所有视频。可能是这样的：

function onYouTubeIframeAPIReady() {
    var $ = jQuery;
    var players = [];
    var loaded = [];
    var allLoaded = false;
    $('iframe').filter(function() {
        return this.src.indexOf('https://www.youtube.com/') == 0
    }).each(function(k,v) {
        var that
        if (!this.id) {
            this.id = 'embeddedvideoiframe' + k
        }
        that = this.id;
        loaded.push(new Promise(function (resolve,reject) {
            players.push(new YT.Player(that.id,{
                events: {
                    'onReady': resolve,'onStateChange': function(event) {
                        if (!allLoaded) return;
                        if (event.data == YT.PlayerState.PLAYING) {
                            $.each(players,function(k,v) {
                                if (that.getIframe().id != event.target.getIframe().id) {
                                    that.pauseVideo();
                                 }
                            });
                        }
                    }
                }
           }))
       }));
    });
    Promise.all(loaded).then(function () {
       allLoaded = true;
    });
}