Question

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

我想知道有没有一种方法来编辑我的代码，以便除非视频在用户视图上，否则结束滚动不起作用？

＆＃13;

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

＆＃13;

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

＆＃13;

我想出的一个解决方案是暂停视频，如果它不在用户视图中。这个问题是，如果用户确实观看了视频，它将按计划向下滚动。但是用户然后在视频上滚动备份，它将重新开始。

我不想再次使用统计数据了吗？

以下是我的完整代码

＆＃13;

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

＆＃13;

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

＆＃13;

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)功能。它看起来看到窗口已经滚动到标题视频的高度以及窗口顶部的偏移量之下，以防您稍后进行顶级导航或其他操作。

如果不在浏览器视图中停止播放视频但不重启

1 个答案: