スクロールが表示されているときにYouTube動画を再生

Question

このコードを使用すると、スクロールすると動画が一時停止します。私はビデオが見えなくなったときにビデオを一時停止したい。これはどうすればいいですか？

//This code loads the IFrame Player API code asynchronously. 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

//This function creates an <iframe> (and YouTube player) 

var player; 

function onYouTubeIframeAPIReady() { 

    player = new YT.Player('video', { 
    height: '100%', 
    width: '100%', 
    videoId: 'V6Y-ahQFQDA', 
    playerVars: { 
     'start': '1', 
     'color': 'white', 
     'controls': '1', 
     'showinfo': '0' 
    }, 
    events: { 
     'onReady': playOnScroll, 
     'onStateChange': playOnScroll 
    } 
    }); 

} 

前の部分は動画を読み込むことです。私は私の問題がこのif文であると思う。私がスクロールを開始するとすぐに、コマンドの実行が一時停止し、それを動作させることができません。

function playOnScroll() { 
    var video = document.getElementById('video'); 

    var x = video.offsetLeft, 
     y = video.offsetTop, 
     w = video.offsetWidth, 
     h = video.offsetHeight, 
     r = x + w, //right 
     b = y + h, //bottom 
     visibleX, visibleY, visible; 

     visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); 
     visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); 

     visible = visibleX * visibleY/(w * h); 

    var percent = 0.6; 
    var inView = visible > percent; 

     if (inView) { 
      console.log('play'); 
      player.playVideo(); 

     } else { 
      console.log('paused'); 
      player.pauseVideo(); 
     } 
} 

window.addEventListener('scroll', playOnScroll, false); 
window.addEventListener('resize', playOnScroll, false); 

Answer 1

<script> 
var tag = document.createElement('script'); 
tag.src = "//www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
</script> 
<script>  
var players = new Array(); 
var playingVideo = false; 
var done = false; 
var iterator = 0; 
var pausedVideo = ""; 
function createPlayer(playerInfo) {  
    playerVars = { 'autoplay': 0, 'controls': 0, 'rel': 0, 'showinfo': 0, 'loop': 1, 'modestbranding': 1 }; 
    return new YT.Player(playerInfo.id, { 
     height: playerInfo.height, 
     width: playerInfo.width, 
     videoId: playerInfo.videoId, 
     playerVars, 
     events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
      } 
    }); 
} 
function onPlayerReady(event) { 
    // Play/pause video's which do not auto play for seamless playback 
     if(event.target.a.src.search('autoplay=0')) { 
      event.target.playVideo(); 
      event.target.pauseVideo(); 
     } 
    } 
    function onPlayerStateChange(event) { 
    if(event.data === 2){ 
     pausedVideo = event.target.a.id; 
    } 
    if(event.data === 1){ 
     pausedVideo = ""; 
    } 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
     done = true; 
    } 
} 
window.onYouTubeIframeAPIReady = function(){ 
    players.push(createPlayer({ 
     id: 'ytPlayer', 
     height: '506', 
     width: '900', 
     videoId: 'l-OgbAqWs20', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    })); 
    jq(window).scroll(function(){ 
     _embedContainerTop = jq('.embed-container').offset().top; 
     if(jq(window).scrollTop() >= (_embedContainerTop - 544) && jq(window).scrollTop()<= (_embedContainerTop + 344)) { 
      if(typeof players[0].playVideo=="function"){ 
       players[0].playVideo(); 
      } 
     } else { 
      if(typeof players[0].pauseVideo=="function"){ 
       players[0].pauseVideo(); 
      } 
     } 
    }); 

};