如何根据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();
  }
}
);