Question

首先，我要感谢Kosmos感谢answer。{/ p>

如何控制youtube视频播放＆amp;暂停取决于框架或玩家的可见性。有没有办法用youtube嵌入带有HTML标签的视频？

例如：

<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，它将自动暂停。

来自Answer的Kosmos works great with scroll {{3}}方法（感谢他），这意味着用户滚动视频暂停，如果再次滚动到视口中的视频帧开始玩。没有我的问题是如何使用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源网址，否则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");
    }

Youtube视频播放＆amp;暂停取决于使用jquery的框架的可见性

2 个答案: