ビューの外（スクロール）するとき一時停止/ YouTubeのビデオを再開

Question

私は背景全幅ユーチューブの動画を再生することができますjavascriptのプラグインを使用しています：

<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> 

は、どのように私はときに私それを一時停止することができますウェブサイトを下にスクロールし、ビューポートで再開しますか？

ありがとうございました。

Answer 1

私はあなたのケースでは、コンテナ（おそらくwindowオブジェクトにscrollイベントリスナーを追加することをお勧めして、すべてのスクロールに映像が見えるビューポートであるかどうかを計算してみてくださいここではいくつかの有用なコードです：。

は、

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

私はisVideoPlaying()、resumeVideo()とpauseVideo()を書くためにあなたにそれを任せる。