Youtube视频播放和暂停取决于jquery框架的可见性

Question

首先，我想感谢科斯莫斯的精彩回答。

如何控制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一样隐藏或向下滚动，它将自动暂停。

Kosmos的JS Answer非常适合滚动方法（感谢他），这意味着如果用户滚动视频暂停，如果再次滚动到视口中的视频帧，它就会开始播放。不，我的问题是如何用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文档以更好地理解它）：

编辑：

示例代码已更新以匹配OP请求。我刚刚添加了一个活动用于侦听选项卡单击事件的处理程序。别忘了附加&enablejsapi=1到iframe源url，否则API将无法工作。既然现在的想法不仅仅是播放和停止视频通过滚动，也许这段代码不是最好的选择，但它仍然是解决方法。

更新的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');
};

请随意使用和修改它以达到您的目的。

Answer 2

我知道这是一个老问题，但我找到了一个完全符合我需求的解决方案，所以我想分享它；autoplay=1到iframe-src，它会自动播放视频。不需要Youtube IFrame API

$(window).scroll(function() {
 
//will trigger when your element comes into viewport
    var hT = $('#YourElement').offset().top,
    hH = $('#YourElement').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
        //appends &autoplay=1 to iFrame src, making it autoplay
        var videoUrl = $('#YourIFrame').attr('src');
        $('#YourIFrame').attr('src', videoUrl + "&autoplay=1");
    }