如果滚动到 #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>
代码的问题在于,每当用户滚动一点点时,它都会触发脚本,直到该部分在浏览器视口(viewport)中不可见。如果用户滚动到 #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();
}
});
一个简单的 bool 标志似乎可以满足您的行为要求。
关于javascript - 滚动播放一次视频有问题吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38808041/