在视窗中可见时不播放视频?

当视频在视图端口上部分可见时,我尝试自动播放,就像视频完全隐藏时一样,我希望停止播放。到目前为止,它的工作只能在窗口滚动。

所以下面的代码不能正常工作:-

videojs("myPlayerID").ready(function() {
  var myPlayer = this;

  window.onscroll = checkIfVideoInView;

  function checkIfVideoInView() {
    if (isScrolledIntoView(myPlayerID)) {
      myPlayer.play();
    } else {
      myPlayer.pause();
    }
  }

  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return (
      elemBottom > docViewTop &&
      elemTop < docViewBottom
    );
  } 
});

代码笔URL:-

https://codepen.io/burner/pen/bxbzmR