播放视频问题一次卷轴？

Question

如果到达卷轴上的#user-experience部分，我将使用以下代码播放视频：

JS:

var player = $('video');

function isInView(elem){
    return $(elem).offset().top - $(window).scrollTop() < $(elem).height();
}

$(window).scroll(function() {

    if (isInView($('#user-experience'))) {
        // console.log('play video');
        player.get(0).play();
    }

});

HTML:

<video>
    <source src="images/browser.webm" type="video/webm">
    <source src="images/browser.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

代码的问题是，每次用户滚动一点点时，它都会触发脚本，直到浏览器视图中看不到该部分为止。只有当用户滚动到#user-experience部分时，代码才会触发一次。当滚动到另一个部分和背面时，视频不应该第二次播放。

我该怎么解决这个问题？

Answer 1

是像这样吗？

var player = $('video');
var hasReachedUserExperience = false;

function isInView(elem){
    return $(elem).offset().top - $(window).scrollTop() < $(elem).height();
}

$(window).scroll(function() {

    if (isInView($('#user-experience')) && !hasReachedUserExperience) {
        hasReachedUserExperience = true;
        player.get(0).play();
    }

});

一个简单的布尔标志似乎满足了您的行为要求。