Javascript 如何使MediaElementPlayer在滚动到视图时启动？

所以我想知道我是否可以让我的网站上的视频在用户滚动到它的视图时开始播放。 我尝试过很多东西，比如scrollspy和我在这个网站上找到的一些其他代码，但都不起作用，我总是得到相同的结果：网站完全混乱，图片移动到看不见的地方，部分改变位置或消失，这不是很有趣

这是我们MediaElementPlayer的当前JS代码：

if ($('.video-promo').length ) {
    var player_promo = new MediaElementPlayer('.video-promo', {
        videoWidth: '100%',
        videoHeight: '100%',
        loop: false,
        alwaysShowControls: true,
        features: [],
    });

    player_promo.play();
}

以及HTML：

        <section class="promo motions">
        <video class="video-promo">
                <source type="video/mp4" src="assets/video/demo.mp4" />
        </video>
      <div class="video-overlay"></div>
    </section>

为任何帮助干杯D

查看丹在以下方面的回答：

简而言之，您可以添加：

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

function elementVisibilityMayChange () {
    return function () {
        if ( isElementInViewport($('.video-promo')[0]) ) {
            player_promo.play();
        }
    }
}

var handler = elementVisibilityMayChange();

$(window).on('DOMContentLoaded load resize scroll', handler); 

函数IsElementViewPort（el）{
var rect=el.getBoundingClientRect（）；
返回(
rect.top>=0&&
rect.left>=0&&
rect.bottom能不能请你发布一些提琴来帮助你加快速度？干杯！我应该在哪里添加这个？页面上任何有视频播放器的地方都可以。我确实这样做了，但它仍然弄乱了页面。示例：&（这就是视频——它通常占据整个区域。我想显示更多，但我真的不想显示太多未完成的网站：3Alright，所以我让它停止搅乱页面，但当我滚动到它上时，它仍然不会播放视频。）。