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/

我在本网站上使用过的其他插件： Stellar.Js FlexSlider SmoothScroll

Answer 1

您在此处发布的代码大多数都很好，应该或多或少地正常工作，但这里有一些注意事项：

从视频元素中完全删除autoplay属性。将其设置为＆＃34; 0＆＃34;不会把它关掉。 autoplay的任何值都将使其成为现实。
您可能希望在页面加载时调用checkScroll一次以覆盖初始窗口状态，以防视频最初在视图中。否则，它不会开始，直到你滚动至少一次。
此处的数学假设您的视频是静态定位的，没有父级元素的CSS位置为fixed，relative或absolute。如果您需要这样做，您可能需要稍微修改位置计算。但这不是你发布的jsfiddle的问题。
根据fraction的值，只有80％的视频可见，视频才会播放。如果浏览器窗口小于视频元素区域的80％，则无论您在何处滚动，它都不会播放。您可能需要调整与visible相比较的值来说明这一点，或者您可以将其保留原样。由你决定。
确保视频实际正在加载。如果找不到文件或网络速度太慢，可能会设置播放状态，但您可能看不到播放状态。您可能希望使用play和pause事件以及paused属性来获得播放状态的其他可视指示符。
最后，如果您要有一个单独的暂停/播放按钮，您将要使用它来设置一些禁用滚动逻辑的外部变量，这样他们就不会冲突。

根据您的描述，我怀疑您要密切关注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

如何在视图代码外（非静态定位）暂停html5视频

1 个答案: