Youtubevideo播放和暂停取决于jquery框架的可见性
首先，我要感谢Kosmos的惊人答案 。
如何控制youtubevideo播放和暂停取决于框架或播放器的可见性。 有没有办法用youtube嵌入带有HTML标签的video？
例如 ：
- Tab One
- Tab Two
- Tab Three
- Tab Four
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. 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. 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. 如果上面的帧可见video自动播放，如果帧隐藏或向下滚动，如DEMO jsfiddle ，它将自动暂停。
JS来自Kosmos的 回答 ，滚动方法效果很好 （感谢他），这意味着如果用户滚动video暂停，如果再次滚动到视口中的video帧，它就开始播放。 没有我的问题是如何使用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')); //}); };
请帮助或分享您的想法将非常感谢。 谢谢！
好吧，我做了一个简单的例子来使用Youtube Iframe API做你想要的。
这是jsfiddle： https ：//jsfiddle.net/kmsdev/gsfkL6xL/
这是代码（请参阅API文档以更好地理解它）：
编辑：
更新示例代码以匹配OP请求。 我刚刚添加了一个事件处理程序来监听选项卡点击事件。 不要忘记将
&enablejsapi=1附加到iframe源url，否则API将无效。 由于现在的想法不仅仅是通过滚动来播放和停止video，也许这段代码不是最佳选择，但它仍然是一种解决方法。更新了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'); };
随意使用和修改它为您的目的。