javascript - 如何在代码 View 之外时暂停 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>      

我附上了一个 fiddle http://jsfiddle.net/5wZLL/12/

我在此网站上使用过的其他插件: 恒星Js 弹性 slider 平滑滚动

Answer 1

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

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

2. 您可能需要在页面加载时调用一次 checkScroll 来覆盖初始窗口状态，以防视频最初处于观看状态。否则，直到您至少滚动一次后，它才会启动。

3. 这里的数学假设您的视频是静态定位的，没有父元素的 CSS 位置为固定、相对或绝对。如果您需要这样做，您可能需要稍微修改位置计算。但这在您发布的 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