スクロールで再生動画を再生すると問題が発生しますか？

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セクションにスクロールすると、コードは1回だけ発生します。別のセクションにスクロールして戻ると、ビデオは2回目は再生されません。

これを修正するにはどうすればよいですか？

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

}); 

単純な論理フラグが動作要件を満たしているようです。