Question

我正在使用javascript插件来播放背景全宽度YouTube视频：

<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

我建议在容器中添加scroll事件监听器（可能是您案例中的window对象，然后在每次滚动时尝试计算视频是否在可见视口中。＃39;一些有用的代码：

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

在视野之外暂停/恢复Youtube视频（滚动）

1 个答案: