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

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

暂停使用：

$(this)[0].pause();

用于播放：

$(this)[0].play();

已在 Firefox 和 chrome

上测试

Answer 2

您可以使用此代码来检测某个元素是否在视图中。迭代每个视频元素，如果 isInView() 为真，则开始播放视频，如果没有暂停则暂停。

注意事项：您需要确保视频至少加载了元数据，否则视频元素可能会导致错误。使用 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>

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

how can i stop video from playing if not point view

jquery

html

html5-video

video.js