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/