如何仅在视口中播放HTML5视频而不循环/重播？

Question

我有一个HTML5视频，当滚动到该视频时，我需要自动播放该视频，然后在视频的最后一帧上暂停播放，其余时间就像用户在页面上停留的其余时间一样，无论他们在哪里。

到目前为止，我已经可以使用JQuery在滚动状态下自动播放视频了，当您滚动经过它时会暂停播放，但是视频只有大约10秒长。视频播放完后，如果我完全滚动，它会重新启动我不想要的视频。

我现在的代码设置如下：

HTML：

<div id="div-id">
<video id="video_id"
width="400px"
poster="image.jpg"
src="video.mp4" type="video/mp4" muted>
</video>
</div>

Javascript：

$(window).scroll(function(e)
{
var offsetRange = $(window).height() / 3,
    offsetTop = $(window).scrollTop() + offsetRange + 
$("#div-id").outerHeight(true),
    offsetBottom = offsetTop + offsetRange;

$("#video_id").each(function () { 
  var y1 = $(this).offset().top;
  var y2 = offsetTop;
  if (y1 + $(this).outerHeight(true) < y2 || y1 > offsetBottom) {
    this.pause(); 
  } else {
    this.play();
  }
});
});
});

关于如何修改Javascript的任何想法，以便在视频播放完毕后不会在滚动状态或视口进入/离开视口时重播？我已经尝试了好几次不同的尝试。