javascript - YouTube 滚动显示

Question

我正在尝试让 YouTube 视频在用户滚动到它时自动播放，并在用户滚动经过它时停止。感谢这篇文章“JQuery Autoplaying Youtube videos on scroll”，这一切都很好。现在我也想用 window.scroll 执行此操作，但失败了。在我看来，包含更新的 iframe 标签的 div 未加载 youtube APIIframe 就绪。任何人都知道为什么。真的很感谢你的帮助？

下面是我的代码

<style type="text/css">
    iframe {
        width: 200px;
        height: 200px;
        margin: 10px 10px 100px 10px;
    }
</style>

<div id="wrap" class="content" style="border:groove">
    <iframe style="margin-top:200px" id="playerA" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/>
    <iframe id="playerB" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/>
    <iframe style="margin-bottom:200px" id="playerC" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
    <div style="height:800px"></div>
</div>

 <script type='text/javascript'>//<![CDATA[

function my_first(){    

    var LoadVideo = function(player_id){
                var Program = {

                    Init: function(){
                        this.NewPlayer();
                        this.EventHandler();
                    },

                    NewPlayer: function(){
                        var _this = this; 

                        this.Player = new YT.Player(player_id,{});
                        _this.Player.$element = $('#' + player_id); 

                    },

                    Play: function(){
                        if( this.Player.getPlayerState() === 1 ) return;
                        this.Player.playVideo();
                    },

                    Pause: function(){
                        if( this.Player.getPlayerState() === 2 ) return;
                        this.Player.pauseVideo();
                    },

                    ScrollControl: function(){ 
                        //alert('player='+player_id); 
                        //alert('total='+Utils.IsElementInViewport(this.Player.$element[0]) );
                        if( Utils.IsElementInViewport(this.Player.$element[0]) ) this.Play();
                        else this.Pause();
                    },

                    EventHandler: function(){
                        var _this = this;
                        $(window).on('scroll', function(){//alert(player_id)
                            _this.ScrollControl(); 
                        });
                    }
                };
                var Utils = {
                    IsElementInViewport: function(el){
                        if (typeof jQuery === "function" && el instanceof jQuery) el = el[0];
                        var rect = el.getBoundingClientRect();

                        return (
                                rect.top >= 100 &&
                                rect.left >= 0 &&
                                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                                rect.bottom <= 400 && 
                                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
                        );
                    }
                };
                return Program.Init();
            };

            $('iframe').each(function(){

                LoadVideo($(this).attr('id'));
            });

}

function yHandler(){

    var wrap=document.getElementById('wrap')  ; 
    var contentHeight = wrap.offsetHeight;//get page content height
    var yOffset = window.pageYOffset;//get vertical scroll position
    var y = yOffset+ window.innerHeight;
    if(y >= contentHeight) {//alert(1234)
        wrap.innerHTML += '<div class="newData"><iframe style="margin-top:0px" id="playerD" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerE" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerF" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><div style="height:500px"></div></div>';              
    }   
}

window.onscroll = function () { 
    $.getScript('//www.youtube.com/player_api');
    yHandler();
    my_first(); 
}

Answer 1

你应该使用append而不是innerHTML。

原文:

wrap.innerHTML += '<div class="newData"><iframe style="margin-top:0px" id="playerD" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerE" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerF" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><div style="height:500px"></div></div>';

编辑:

$(wrap).append( '<div class="newData"><iframe style="margin-top:0px" id="playerD" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerE" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerF" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><div style="height:500px"></div></div>' ); 

引用: jquery .html() vs .append()

希望对你有帮助

更新

创建具有不同id的iframe

function createVideo( $element, url ) {
    $element.append( '<iframe style="margin-top:0px" id="player' + $( 'iframe' ).length + 1 + '" frameborder="0" title="YouTube video player" type="text/html" src="' + url + '"></iframe><br/>');
}
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
$(wrap).append( '<div style="height:500px"></div>');