javascript - 如果不在浏览器 View 中，则停止播放视频但不重新启动

Question

我正在尝试向我的网站添加标题视频。该视频结束后，它将滚动到一个部分。我已经成功地完成了这项工作，但有一个问题。如果用户不想观看视频并在网站上滚动过去，它仍然会将用户带回该部分。

我想知道是否有一种方法可以编辑我的代码，以便除非视频位于用户 View 上，否则结束滚动不起作用？

$('#headervideo').bind("ended", function(){ 
       $('html, body').animate({
        scrollTop: $("#id4").offset().top
    }, 2000);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="headervideo" width="100%" autoplay="autoplay">
  <source src="http://bluenodehosting.com/video/intro.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<section id="id4">
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
</section>

我提出的一个解决方案是，如果视频不在用户 View 中，则暂停视频。这样做的问题是，如果用户确实观看了视频，它会按计划向下滚动。但如果用户随后在视频上滚动备份，它将再次开始。

我不想让它再次统计？

下面是我的完整代码

$('#headervideo').bind("ended", function(){ 
       $('html, body').animate({
        scrollTop: $("#id4").offset().top
    }, 2000);
    });
    
    
function isInView(el) {
  var rect = el.getBoundingClientRect();           // absolute position of video element
  return !(rect.top > $(window).height() || rect.bottom < 0);   // visible?
}

$(document).on("scroll", function() {
  $( "#headervideo" ).each(function() {
    if (isInView($(this)[0])) {                    // visible?
      if ($(this)[0].paused) $(this)[0].play();    // play if not playing
    }
    else {
      if (!$(this)[0].paused) $(this)[0].pause();  // pause if not paused
    }
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video id="headervideo" width="100%" autoplay="autoplay">
  <source src="http://bluenodehosting.com/video/intro.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>


<section id="id4">
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
</section>

Answer 1

您可以尝试如下操作:

function checkIfShouldScroll() {
  var $headerVid = $('#headervideo');
  if ($(window).scrollTop() < $headerVid.height() + $headerVid.offset().top) {
    $('html, body').animate({
      scrollTop: $("#id4").offset().top
    }, 2000);
  }
}

$('#headervideo').on('ended', function(){
  checkIfShouldScroll();
});

这种方式会检查视频完全播放完后是否应该滚动。因此，当您向下滚动时，它会继续播放。如果您想在用户向下滚动时暂停它，然后在他们返回页面时再次播放，则必须将其与一些可见度检测结合起来，就像您之前尝试的那样。

使用此示例，您可以删除检查 inView 和 $(document) 函数。看起来窗口已经滚动到标题视频的高度加上其与窗口顶部的偏移量以下，以防您稍后进行顶部导航或其他操作。