如何在视图代码外（非静态定位）暂停html5视频 [英] How to pause html5 video when out of view code (non-statically positioned)

问题描述

我在我的网站上使用html5视频。我希望它只在视野中播放，否则暂停。

I am using a html5 video on my website. I want it to play only when in view and pause otherwise.

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

I am also using javascript to have a play/pause button on it.

我能够轻松地在一个网站上使用这两个功能，视频是网站上的第一个元素。然而这次是第二个div

I was able to use both the features on one site easily and the video was the first element on the site. However this time it is the second div

我觉得有一个冲突，因为相同的元素被定位或出现了一些我似乎无法理解的错误

I feel like there is a conflict because of the same element being targetted or something going wrong that I just can't seem to understand

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

In this case the video autoplays when I open the site, and when I scroll to the actual video, it stops(pauses)! Can anyone see what I am doing wrong ?

      <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

other plugins that I have used on this site : Stellar.Js FlexSlider SmoothScroll

推荐答案

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

The code you've posted here is mostly fine and should work more or less correctly, but here are a few things to look out for:

1. 删除完全来自您的视频元素的 autoplay 属性。将其设置为0不会将其关闭。 autoplay 的任何值都将成为现实。

1. Remove the autoplay attribute completely from your video element. Setting it to "0" does not turn it off. Any value at all for autoplay will make it true.

您可能想要致电 checkScroll 在页面加载时一次覆盖初始窗口状态，以防视频最初在视图中。否则，在您滚动至少一次之前它不会启动。

You'll probably want to call checkScroll one time at page load to cover the initial window state, in case the video is in view initially. Otherwise, it won't start until you scroll at least one time.

此处的数学假设您的视频是静态定位的，没有父元素CSS位置为已修复，相对或绝对。如果您需要这样做，您可能需要稍微修改位置计算。但这不是你发布的jsfiddle中的问题。

The math here assumes that your video is positioned statically, with no parent elements that have CSS position as fixed, relative, or absolute. If you need to do that, you may need to modify the position calculation slightly. But this is not a problem in the jsfiddle you posted.

基于 fraction 的值，只有当80％的视频可见时，视频才会播放。如果浏览器窗口小于视频元素区域的80％，则无论您在何处滚动，它都不会播放。您可能需要调整与 visible 相比较的值来说明这一点，或者您可以将其保留原样。由您决定。

Based on the value of fraction, the video will only play if 80% of it is visible. If the browser window is smaller than 80% of the area of the video element, it will never play no matter where you scroll. You may want to adjust the value compared to visible to account for that, or you can leave it as is. Up to you.

确保视频实际上已加载。如果找不到文件或者网络太慢，可能会设置播放状态，但您可能看不到播放状态。您可能希望使用播放和暂停事件以及<$来获得播放状态的其他可视指示符c $ c>已暂停属性。

Make sure the video is actually being loaded. If the file is not found or if the network is too slow, the play state may be set but you may not see it playing. You might want to have some other visual indicator of the play state, using the play and pause events and the paused property.

最后，如果您要有一个单独的暂停/播放按钮，那么''我想用它来设置一些禁用滚动逻辑的外部变量，这样它们就不会发生冲突。

Finally, if you're going to have a separate pause/play button, you'll want to use that to set some external variable that disables the scrolling logic so they don't conflict.

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

Based on your description, I suspect that you want to pay close attention to 1. and 3., as they will likely solve your problem.

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

Update: It looks like your problem is 3. When you have parent elements that are not positioned statically, offsetTop and offsetLeft are not sufficient to get the position of your video element within the page. You need to loop through all the ancestor elements that can affect the position, like this:

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

这是一个有效的例子：
http://jsbin.com/qekat/1/edit

Here's a working example: http://jsbin.com/qekat/1/edit

这篇关于如何在视图代码外（非静态定位）暂停html5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！