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/