如果不是观点，我怎样才能停止播放视频

Question

js 在我的网站上播放视频

但如果不是我的观点，我想停止播放视频

我编写了这段代码

$(document).on("scroll", function() {
  var scrollTop = $(window).scrollTop();
  $( "video" ).each(function() {
    var pos = index.position();
    if (scrollTop < pos.top + 100) {
                $(this)[0].play();
    }
    if (scrollTop > pos.top + 400) {
                $(this)[0].stop();
    }
    if (scrollTop < pos.top - 400) {
                $(this)[0].stop();
    }
  });
});

但它对我不起作用并且没有显示任何错误

这是演示页面“ http://jsbin.com/yaqozihita/1/ ”

Answer 1

您可以使用此代码来检测元素是否在视图中。迭代每个视频元素，如果 isInView() 为 true，则启动视频，如果没有则暂停视频（如果尚未暂停）。

注意事项：您需要确保视频至少已加载元数据，否则视频元素可能会导致错误。使用preload="auto"和canplay事件提前检测此阶段（此处未显示）。

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() {
  $( "video" ).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
    }
  });  
});

div {width:400px;}

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

<div>
<h1>Scroll down to start video</h1>
Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... <br><br>

Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... <br><br>

Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... <br><br>

Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... <br><br>

  <video loop style="width:320px;height:auto;">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
  </video>

<br><br>
Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... <br><br>

Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... <br><br>

Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... <br><br>

Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummtext ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... <br><br>

    <video loop style="width:320px;height:auto;">
    <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4">
        <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm">
  </video>
Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummtext ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... <br><br>
Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummtext ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... <br><br>

</div>