Wiedergabe von YouTube-Video, wenn Bildlauf in Sicht ist

Question

Mit diesem Code pausiert das Video, sobald ich scrollte. Ich möchte das Video anhalten, wenn es nicht mehr angezeigt wird. Wie mache ich das?

//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 
    } 
    }); 

} 

Der Teil vorher ist das Video zu laden. Ich denke, mein Problem ist in dieser, wenn auch sonst, Aussage. Sobald ich mit dem Scrollen anfange, beginnt das Kommando pausiert zu starten, und ich kann es nicht zum Laufen bringen.

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(); 
      } 
     } 
    }); 

};