jquery - YouTube 视频播放和暂停取决于 jquery 帧的可见性

Question

首先我要感谢Kosmos因为他的惊人answer .

如何控制 YouTube 视频播放和暂停取决于帧或播放器的可见性。有什么方法可以通过 HTML 选项卡使用 YouTube 嵌入视频来做到这一点吗？

例如:

<br><br><br>

<div class="container">

    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Tab One</li>
        <li class="tab-link" data-tab="tab-2">Tab Two</li>
        <li class="tab-link" data-tab="tab-3">Tab Three</li>
        <li class="tab-link" data-tab="tab-4">Tab Four</li>
    </ul>

    <div id="tab-1" class="tab-content current">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div id="tab-2" class="tab-content">
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div id="tab-3" class="tab-content">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div id="tab-4" class="tab-content">
<iframe id="playerA" width="300" height="220" src="https://www.youtube.com/embed/0_P4pKbvaII?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>

</div><!-- container -->

如果上面的帧可见，视频会自动播放，如果该帧隐藏或向下滚动，如 DEMO jsfiddle它会自动暂停。

JS Answer来自Kosmos这是 works great with scroll方法(感谢他)这意味着如果用户滚动视频暂停，如果再次滚动到视口(viewport)中的视频帧，它就会开始播放。否，我的问题是如何使用 HTML 选项卡实现此功能

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(){
            if( Utils.IsElementInViewport(this.Player.$element[0]) ) this.Play();
            else this.Pause();
        },

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

    };

    var Utils = {

        /** @author https://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();
};

window.onload = function(){
    LoadVideo('playerA');
    LoadVideo('playerB');
    LoadVideo('playerC');

    // or (loop mode)

    //$('iframe').each(function(){
    //  LoadVideo($(this).attr('id'));
    //});
};

请帮助或分享您的想法，我们将不胜感激。谢谢!

Answer 1

嗯，我做了一个简单的示例来使用 Youtube Iframe API 执行您正在寻找的操作。

这是 jsfiddle:https://jsfiddle.net/kmsdev/gsfkL6xL/

这是代码(请参阅 API 文档以更好地理解它):

编辑:

Example code updated to match OP requests. I just added an event handler to listen to tab click events. Don't forget to append &enablejsapi=1 to the iframe source url, else the API won't work. Since the idea now is a little more than just play and stop the videos by scroll, maybe this code is not the best option, but it is still a workaround.

Updated jsFiddle: https://jsfiddle.net/kmsdev/gsfkL6xL/3/

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();

};

window.onload = function(){
    LoadVideo('playerA');
    LoadVideo('playerB');
};

您可以根据自己的目的随意使用和修改它。