HTML5视频，滚动时暂停

Question

我正在构建一个HTML5视频作为背景，像这个优秀的example鼠标滚轮播放。

现在我想通过在滚动时暂停它来增强它，然后在滚动一定数量后再次播放它。我试过了，但问题在于，如果我没有暂停它而不是从我已经暂停的地方继续，它会跳到它应该是的位置。

这里是我的代码：

$(function() { 
    var vid = $('#v0')[0]; // jquery option 

    // pause video on load 
    vid.pause(); 

    // pause video on document scroll (stops autoplay once scroll started) 
    window.onscroll = function() { 
     vid.pause(); 
     //console.log(vid.currentTime, window.pageYOffset/400); 
     $("#time").text(vid.currentTime); 
    }; 

    // refresh video frames on interval for smoother playback 
    setInterval(function() { 
     if((window.pageYOffset/400) > 3 && (window.pageYOffset/400) < 6){ 
      vid.pause(); 
     } else { 
      vid.currentTime = window.pageYOffset/400; 
     } 
    }, 32); 
}); 

and the example。

有没有办法实现这一目标？

由于

Answer 1

我用在这个例子中window.scroll事件和事件video.timeupdate的组合。从6〜7它让视频播放，直到它达到了目前的搜寻点

var vid = $('#v0')[0]; // jquery option 
var videoStartTime = 0; 
var durationTime = 0; 

// pause video on load 
vid.pause(); 

// pause video on document scroll (stops autoplay once scroll started) 
window.onscroll = function() { 
    vid.pause(); 
    //console.log(vid.currentTime, window.pageYOffset/400); 
    $("#time").text(vid.currentTime); 
    durationTime = window.pageYOffset/400; 
    $("#time1").text(durationTime); 
}; 

    vid.addEventListener('timeupdate', function() { 
     $("#time").text(vid.currentTime); 
    if ((window.pageYOffset/400) >= 6 && this.currentTime > (window.pageYOffset/400)) { 
     this.pause(); 


     vid.currentTime = window.pageYOffset/400; 
    } 
     else if ((window.pageYOffset/400) > 6 && this.currentTime < (window.pageYOffset/400)){ 
      this.play(); 
     } 
}); 



// refresh video frames on interval for smoother playback 
setInterval(function() { 
    if ((window.pageYOffset/400) > 3 && (window.pageYOffset/400) < 6) { 
     vid.pause(); 
    } else if ((window.pageYOffset/400) > 6 && (window.pageYOffset/400) < 7) { 
     vid.play(); 
    } else if ((window.pageYOffset/400) >= 7 || (window.pageYOffset/400) < 3) { 
     vid.currentTime = window.pageYOffset/400; 
    } 


}, 32); 

http://jsfiddle.net/itsnav/77xp5duL/9/