如果不是点视图，我如何停止播放视频答案

【问题标题】：how can i stop video from playing if not point view如果不是点视图，我如何停止播放视频
【发布时间】：2015-04-08 15:10:44
【问题描述】：

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

【问题讨论】：

我更新它并添加演示页面

标签： jquery html html5-video video.js

【解决方案1】：

您可以使用此代码来检测元素是否在视图中。迭代每个视频元素，如果 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>

【讨论】：

【解决方案2】：

暂停使用：

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

供游戏使用：

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

在 Firefox 和 chrome 上测试

【讨论】：

如果页面上有多个视频怎么办？
它可以工作，但如果我转到页面顶部，它会播放所有视频，如果我播放视频并往下走一点，但我仍然认为它会停止它
添加对页面顶部的检查（我认为 scrollTop 在顶部滚动位置返回 0）并修改最后两个“If”检查的值..
如果有多个视频没关系 $([selector]).each(..);迭代匹配选择的每个元素