Question

当播放器在上下滚动时对用户可见时，尝试在youtube视频上创建自动播放和自动暂停。

标签一标签二标签三标签四 Lorem ipsum dolor坐镇，奉献己任，圣埃塞莫德临时工和劳动大臣。尽量不要抽烟，不要因抽烟而锻炼。 Duis aute irure dolor in reprehenderit in volttable velit esse cillum dolore eu fugiat nulla pariatur。不擅长于圣人的情节，应在负责任的犯罪活动中动手。尽量不要抽烟，不要因抽烟而锻炼。 Duis aute irure dolor in reprehenderit in volttable velit esse cillum dolore eu fugiat nulla pariatur。

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    function loadScript() {
                        if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
                            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 loadPlayer() {
                            window.onYouTubePlayerAPIReady = function() {
                                onYouTubePlayer();
                            };
                    }


   $( document ).ready(function() {
  loadScript();
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(){
            console.log(this.Player.IsReady);
            if( this.Player.getPlayerState() === 1 ) return;
            this.Player.playVideo();
        },

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

        ScrollControl: function(){
            if( Utils.IsElementInViewport(this.Player.$element[0]) ) this.Play();
            else this.Pause();
        },

        EventHandler: function(){
            var _this = this;
            $(window).on('scroll', function(){
                _this.ScrollControl();
            });

            $('.tab-link').on('click', function(){
                var $target = $('#' + $(this).data().tab);
                if( !!$('iframe', $target).length && $('iframe', $target).attr('id') == _this.Player.$element.attr('id') ){
                    _this.Play();
                }
            });

        }

    };

    var Utils = {

        /** @author http://stackoverflow.com/a/7557433/1684970 */
        IsElementInViewport: function(el){
            if (typeof jQuery === "function" && el instanceof jQuery) el = el[0];
            var rect = el.getBoundingClientRect();
            return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        }

    };

    Program.Init();

};

$(function(){
    $('ul.tabs li').on('click', function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $('#' + tab_id).addClass('current');
    });
});


LoadVideo('playerA');
LoadVideo('playerB');
    });
    </script>

我可以在控制台中看到Uncaught ReferenceError: YT is not defined异常

未捕获的ReferenceError：未定义YT

0 个答案: