滚动播放一次视频有问题吗

Issue with play video once on scroll?

本文关键字：一次 视频 有问题 播放 滚动      更新时间：2023-09-26

如果滚动到#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部分，则代码应该只触发一次。当滚动到另一个部分并返回时，视频不应第二次播放。

我该如何解决这个问题？

这样？

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

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

相关文章：