javascript - 您可以停止 HTML5 视频在滚动时暂停/停止吗？

Question

我的页面顶部有一个 HTML5 视频横幅。它添加了 autoplay 和 loop 属性。当我开始向下滚动页面时，视频停止，并且当我向上滚动时不再重新启动。我希望无论用户是否滚动，视频都会继续播放。

似乎没有任何属性listed in the W3C spec这提出了一个解决方案，那么还有另一种方法可以禁用此功能吗？

HTML 和 CSS 非常简单，所以我想知道是否需要一些 JS 来帮助:

HTML:

<video preload="none" autoplay loop>
  <source src="/media/test.mp4" type="video/mp4">
</video>

CSS:

video {
  width: 100%;
  height: auto;
}

任何帮助将不胜感激。

Answer 1

您可以使用isInViewport jQuery 插件如下:

$('video').each(function(){
    if ($(this).is(":in-viewport")) {
        $(this)[0].play();
    } else {
        $(this)[0].pause();
    }
})