Question

使用scrolltop我使用if条件将滚动分为5个部分。在第二部分，我给了视频滚动值从600到700px。如果我再次滚动，视频在该位置内播放多次。但我想要视频必须如果我在该值内任意次数，则播放一次。

var scrolld=window.scrollTop();
if(scrolld >=600) {
  ///i gave image here
}

elseif((Scrolld >600) & (scrolld <=700)){
//video
}

//rest 3 elseif contain images

检查此链接： http://projects.lollypop.biz/auluxa/lighting.html

如果我使用鼠标滚动它的工作正常。但如果我使用keyup和keydown（键盘）视频滚动多次播放。

Answer 1

请看一下这段代码。我认为这就是你的意思，因为我在我的网站上有这个，但你的问题不是很清楚。你能分享你的代码吗？

$('#vid').on('ended', function(){this.playedThrough = true;});

$(window).scroll(function(){
    var myVideo = document.getElementById("vid");

    if($(window).scrollTop() > 300 && $(window).scrollTop() < 975){
       // only if we didn't reached the end yet
       if(!myVideo.playedThrough)
          myVideo.play();
    }else{
       myVideo.pause();
    }
 })

Answer 2

您可以使用视频元素的currentTime属性来检查它是否正在播放，然后再触发它。

var vid = document.getElementById("myVideo");
if (vid.currentTime === 0) {
    // Play video...
}

了解更多here。

Onscroll视频必须播放一次

2 个答案: