Pause/Reprendre la vidéo Youtube quand hors de la vue (défilement)

Question

J'utilise un plugin javascript qui permet de jouer un fond vidéo youtube pleine largeur:

<script> 
      $(document).ready(function() { 

     $(".player").mb_YTPlayer(); 

    }); 
</script> 

<script> 
      var vids = ["list of videos" 
      ]; // create your list of youtube videos 

    var currVid = vids[Math.floor(Math.random()*(vids.length-1))]; // this will grab a random video from the array. 

    var opts = { // keep all the options in an object 
     videoURL: currVid, // set the video to display 
     containment:'.video-section', 
     quality:'large', 
     autoPlay:true, 
     mute:true, 
     opacity:1 
    } 

    $(document).ready(function(){ 
     document.getElementById("bgndVideo").dataset.property = JSON.stringify(opts); // change to this 

     $(".player").mb_YTPlayer(); // play! 
    }); 
</script> 

Comment puis-je faire pour faire une pause quand je faire défiler vers le bas sur le site Web et reprendre quand dans la fenêtre?

Merci.

Answer 1

Je recommande l'ajout d'un écouteur d'événement scroll au conteneur (probablement l'objet window dans votre cas, puis sur chaque rouleau tentent de calculer si la vidéo est dans la fenêtre visible ou non Voici un code utile.

$(window).on("scroll", function() { 
    var viewportTop = window.scrollY; 
    var viewportBottom = viewportTop + window.outerHeight; 
    var isVideoBelowViewport = $(".player").offset().top > viewportBottom; 
    var isVideoAboveViewport = $(".player").offset().bottom < viewportTop; 
    var isVideoOutsideViewport = isVideoBelowViewport || isVideoAboveViewport; 
    if (isVideoOutsideViewport && isVideoPlaying()) pauseVideo(); 
    if (!isVideoOutsideViewport && !isVideoPlaying()) resumeVideo(); 
}); 

Je vais laisser à vous écrire isVideoPlaying(), resumeVideo() et pauseVideo().