无法在同一页面上加载所有youtube iframe播放器。始终加载最后一个

时间:2014-09-24 07:10:18

标签: javascript jquery-ui youtube-api youtube-iframe-api

我的基础Html

    <div class="ytplayer" id="player1" data-videoid="xxxxxxx" data-playerheight="390" data-playerwidth="640"></div>
    <div class="ytplayer" id="player2" data-videoid="xxxxxxx" data-playerheight="390" data-playerwidth="640"></div>
    <div class="ytplayer" id="player3" data-videoid="xxxxxxx" data-playerheight="390" data-playerwidth="640"></div>

我的脚本初始化是

    $(document).ready(function(){
        $(".ytplayer")._loadIFramePlayer();
    });

我的功能看起来像

    _loadIFramePlayer: function(){  

                $("<script>")
                    .attr("src", "//www.youtube.com/iframe_api")
                    .insertBefore($("body").find("script").first());                        

                var _youtubePlayer = null;

                if (typeof (YT) === 'undefined' || typeof (YT.Player) === 'undefined') {                                
                        window.onYouTubeIframeAPIReady = function () {

                                _youtubePlayer = new YT.Player("player", {
                                height: "390",
                                width: "640",
                                videoId: "xxxxxx",
                                events: {
                                    // i didn't mention the below functions since I am not doing any thing there, just calling stopVideo and playVideo native functions of youtube api.
                                    'onReady': onPlayerReady,
                                    'onStateChange': onPlayerStateChange
                                }
                            });
                        };

                        $.getScript('//www.youtube.com/iframe_api');
                } else {
                        _youtubePlayer = new YT.Player("player", {
                                height: "390",
                                width: "640",
                                videoId: "xxxxxx",
                                events: {
                                    // i didn't mention the below functions since I am not doing any thing there, just calling stopVideo and playVideo native functions of youtube api.
                                    'onReady': onPlayerReady,
                                    'onStateChange': onPlayerStateChange
                                }
                            });
                }
            }   

理想情况下,我们应该得到三个iframe播放器实例,但在我们的情况下,我们只得到一个播放器,在所有情况下也是最后一个播放器。如果有任何解决方法,请告诉我..

0 个答案:

没有答案