不可见时将视频设置为暂停

Question

我的问题是基于这个：

Event listener for when element becomes visible?

我希望视频元素在可见时自动开始播放，在不可见时自动停止。该元素是轮播组件中的幻灯片（即 owl-carousel，尽管我认为这无关紧要）。所以我做了以下事情：

将视频元素标记为 autovideo class。
包含 the answer 中的 respondToVisibility 函数代码。
附加了存根事件处理程序。

所以现在代码如下所示：

function respondToVisibility(element, callback) {
  var options = {
    root: document.documentElement,
  };

  var observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      callback(entry.intersectionRatio > 0);
    });
  }, options);

  observer.observe(element);
}

// Autoplay video when visible.
$('.autovideo').each(function ()
{
    respondToVisibility(this, function (isVisible)
    {
        alert('isVisible: ' + isVisible);
    });
});

它按预期工作，当我单击轮播按钮时 Next/Prev（display:none 样式正在 added/removed 在引擎盖下）。但是当我向下滚动页面并且视频元素超出屏幕时，事件没有被触发。

我猜想IntersectionObserverAPI表示一个元素的intersection使用浏览器的可见部分 window (viewport)。我应该使用额外的观察器将视频从 window 中滚动出来还是更改当前视频？

Answer 1

根据文档 (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_concepts_and_usage)：

To watch for intersection relative to the device's viewport, specify null for root option.

当我这样做时，当我向下滚动页面时，现在也会调用回调。

另外，我猜 entry.intersectionRatio > 0 条件对我来说不是很好，视频的可见度应该超过 50%。

var options =
{
    root: null,
    threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
};

不可见时将视频设置为暂停

Setting video on pause when invisible

html

javascript

intersection-observer