暂停/恢复YouTube视频时，在视野（滚动）

我使用JavaScript插件，能够播放背景全宽YouTube视频：暂停/恢复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>

我怎样才能使其当我暂停在网站上向下滚动并在视口中恢复时？

谢谢。

来源

2017-09-21 Rui

你尝试过什么到目前为止，哪里是你的企图监视滚动位置设置播放状态？ – NewToJS

我建议增加一个scroll事件监听到容器（可能你的情况window对象，然后在每一个滚动尝试计算视频是否在可见视与否下面是一些有用的代码：

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

来源

2017-09-21 23:43:18

暂停/恢复YouTube视频时，在视野（滚动）

回答

相关问题