javascript - 看不见时暂停/恢复 Youtube 视频(滚动)

Question

我正在使用一个能够播放背景全 Angular youtube 视频的 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>

当我在网站上向下滚动并在视口(viewport)中恢复时，如何让它暂停？

谢谢。

Answer 1

我建议添加 scroll容器的事件监听器(在您的情况下可能是 window 对象，然后在每次滚动时尝试计算视频是否在可见视口(viewport)中。这里有一些有用的代码:

$(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() .