如何在看不见代码时暂停 html5 视频（非静态定位）

Question

我在我的网站上使用 html5 视频。我希望它仅在可见时播放，否则暂停。

我也在使用 javascript 来设置播放/暂停按钮。

我能够轻松地在一个网站上使用这两种功能，并且视频是该网站上的第一个元素。不过这次是第二个div

我觉得存在冲突，因为目标是相同的元素或出现了我似乎无法理解的错误

在这种情况下，当我打开网站时视频会自动播放，当我滚动到实际视频时，它会停止（暂停）！谁能看到我做错了什么？

      <script>
  var videos = document.getElementsByTagName("video"), fraction = 0.8;

  function checkScroll() {

  for(var i = 0; i < videos.length; i++) {

      var video = videos[i];

      var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
          b = y + h, //bottom
          visibleX, visibleY, visible;

          visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
          visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

          visible = visibleX * visibleY / (w * h);

          if (visible > fraction) {
              video.play();
          } else {
              video.pause();
          }

  }

  }

  window.addEventListener('scroll', checkScroll, false);
  window.addEventListener('resize', checkScroll, false);

  </script>      

我附上了一个小提琴 http://jsfiddle.net/5wZLL/12/

我在这个网站上使用过的其他插件： 恒星.Js 弹性滑块 平滑滚动

Answer 1

您在此处发布的代码大部分都很好，应该或多或少正确地工作，但这里有一些需要注意的地方：

1. 从您的视频元素中完全删除 autoplay 属性。将其设置为“0”不会将其关闭。 autoplay 的任何值都会使它成为真的。

2. 您可能希望在页面加载时调用一次checkScroll 以覆盖初始窗口状态，以防视频最初处于视图中。否则，在您至少滚动一次之前它不会启动。

3. 这里的数学假设您的视频是静态定位的，没有父元素的 CSS 位置为 fixed、relative 或 absolute。如果您需要这样做，您可能需要稍微修改位置计算。但这在您发布的 jsfiddle 中不是问题。

4. 基于fraction 的值，视频只有在 80% 可见时才会播放。如果浏览器窗口小于视频元素区域的 80%，则无论您滚动到哪里，它都不会播放。您可能需要调整与visible 相比的值以解决此问题，或者您可以保持原样。由你决定。

5. 确保实际正在加载视频。如果找不到文件或网络太慢，可能会设置播放状态，但您可能看不到它正在播放。您可能希望使用play 和pause 事件以及paused 属性来获得播放状态的其他视觉指示器。

6. 最后，如果您要拥有一个单独的暂停/播放按钮，您需要使用它来设置一些禁用滚动逻辑的外部变量，以免它们发生冲突。

根据您的描述，我怀疑您要密切关注 1. 和 3.，因为它们可能会解决您的问题。

更新： 看起来您的问题是 3。当您有未静态定位的父元素时，offsetTop 和 offsetLeft 不足以获取页面内视频元素的位置。您需要遍历所有可能影响位置的祖先元素，如下所示：

parent = video;
while (parent && parent !== document.body) {
    x += parent.offsetLeft;
    y += parent.offsetTop;
    parent = parent.offsetParent;
}

这是一个工作示例： http://jsbin.com/qekat/1/edit