Попытка создать автоматическое воспроизведение и автоматическую паузу на видео YouTube, когда игрок становится видимым пользователю при прокрутке вниз и вверх.
Tab One Tab Two Tab Three Tab Four Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit, Sed Do EiusMod Tempor Incididunt Ut Labore et Dolore Magna Aliqua.Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea кассовый следствие.Duis aute irure dolor в репереендерит в завитке Velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, иск в виновнике, вызывающий моллис аним, то есть лейборист.Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea кассовый следствие.Duis aute irure dolor в репереендерит в завитке 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
исключение в консоли