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();
    }
})