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

Question

I want one or more videos to play/pause depending on whether or not they're in the viewport.

I understand this can be achieved with jQuery (and plugins), so I've tried using the isInViewport plugin along with the following code, but I receive the error shown below.

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

Console

TypeError: $video.is is not a function

Answer 1

try

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