javascript - 当新视频以模态开始时停止播放其他 Youtube 视频

Question

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 Embeddes 之后，有没有办法调用此代码？

标签： javascriptjquerytwitter-bootstrapyoutube-iframe-api

Answer 1

您可以使用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;
    });
}