微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决当新视频以模式启动时,停止播放其他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;
    });
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。