如何根据 jQuery 的可见性播放/暂停视频

Question

我希望播放/暂停一个或多个视频，具体取决于它们是否在视口中。

我知道这可以通过 jQuery（和插件）来实现，所以我尝试使用 isInViewport 插件以及以下代码，但收到如下所示的错误。

HTML

<script src="scripts/jquery.js"></script>
<script src="scripts/isInViewport.js"></script>
[...]
<video id="video1" src="file.mp4" width="50%"></video>
[...]
<script src="scripts/script.js"></script>

JS

var $video = document.getElementsByTagName("video1");

if ($video.is(":in-viewport")) {
  $video.play();
} else {
  $video.pause();
};

控制台

TypeError: $video.is is not a function

Answer 1

试试

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