如何使用溢出滚动在div中向下滚动时播放视频

<div id="videoContainer" style="width: 500px; height: 300px; overflow-y: scroll;">
  <video src="video.mp4" controls></video>
</div>

#videoContainer {
  overflow-y: scroll;
  display: flex;
  align-items: center;
  justify-content: center;
}

var video = document.querySelector('video');
var videoContainer = document.getElementById('videoContainer');

videoContainer.addEventListener('scroll', function() {
  if (isElementInViewport(video)) {
    video.play();
  } else {
    video.pause();
  }
});

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}