Question

所以我想知道我是否可以制作它以便当用户滚动到它的视图时我的网站上的视频开始播放。我已经尝试了很多东西，比如我在这个网站上找到的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

Answer 1

查看Dan的回答： How to tell if a DOM element is visible in the current viewport?

简而言之，您可以添加：

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

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

1 个答案: