Question

我正在网页上工作。我使用jQuery load（AJAX）函数将新内容（文章）动态加载到内容div中。在这个div中，加载了多个视频。我想要的是一次只播放一个YouTube视频。如果一个视频处于播放状态，并且用户点击了另一个视频，那么前一个视频应该暂停。我使用了onYouTubeIframeAPIReady（）脚本代码来实现功能。该代码仅适用于在第一个实例上加载的视频。当我向下滚动页面时，页面上会加载不同的视频（通过AJAX调用），并且代码不适用于新内容。还显示错误：

TypeError：this.pauseVideo不是函数 - this.pauseVideo（）;

我在下面添加了脚本代码：

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
var num = firstScriptTag.length;
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) {

        var $urls_get=$(this).attr("src");
        var $new_url=$urls_get+"&enablejsapi=1";
        if (!this.id) {
           this.id='embeddedvideoiframe' + k;
           this.src=$new_url;
        }

        players.push(new YT.Player(this.id, {
           events: {
                'onStateChange': function(event) {
                   if (event.data == YT.PlayerState.PLAYING) {
                        $.each(players, function(k, v) {

                            if ('embeddedvideoiframe' + k != event.target.getIframe().id) {
                                    this.pauseVideo();
                            }
                        });
                    }
                }
            }
        }))
    });
}

请帮忙。提前谢谢。

youtube iframe API-在ajax内容上一次播放一个视频

0 个答案: