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

时间:2015-03-31 07:25:28

标签: php wordpress

我正在网页上工作。我使用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();
                            }
                        });
                    }
                }
            }
        }))
    });
}

请帮忙。提前谢谢。

0 个答案:

没有答案