html5 Video-Wiedergabe durch Scrollen mit dem Mausrad

Question

Ich möchte in der Lage sein, eine Webseite, die ein Video vor und zurück spielt, wenn sie mit dem Mausrad nach oben und unten scrollen. Es erscheint denkbar, über HTML5 und möglicherweise JavaScript. Jede Art von Richtung für diese Art von Dingen wäre hilfreich.

Answer 1

Vielleicht so etwas wie dies

$(document).mousewheel(function(event, delta, deltaX, deltaY){   
    if (deltaY > 0) { 
     $(".video-element").get(0).playbackRate = -1; 
    } else { 
     $(".video-element").get(0).playbackRate = 1; 
    } 

    event.preventDefault(); 
}); 

Answer 2

das Video jederzeit anhalten. Holen Sie sich die Bildlaufposition mit regelmäßigen Intervallen und stellen Sie sicher, dass das Video die Bildlaufposition erreicht. Es empfiehlt sich jedoch, alle Seitenladeeffekte zu verwenden, um das Video vollständig zwischenzuspeichern.

full code

// select video element 
var vid = document.getElementById('v0'); 
//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(); 
}; 

// refresh video frames on interval for smoother playback 
setInterval(function(){ 
    vid.currentTime = window.pageYOffset/400; 
}, 40); 

Answer 3

Ich verwende diese. Es ist nicht perfekt, aber es sollte dir helfen.

var videoScrollTop = $(document).scrollTop(); 
$(document).scroll(function() { 
    var vid = $('#video')[0]; 
    if(videoScrollTop < $(document).scrollTop()){ 
     vid.currentTime += 0.081; 
    } else { 
     vid.currentTime -= 0.081; 
    } 
    videoScrollTop = $(document).scrollTop(); 
}); 

Answer 4

Ich weiß, dass dies eine alte Frage, aber ich über sie neulich gestolpert und the answer above half mir ein wenig jQuery plugin schreiben diesen Effekt zu erzielen.

Bei Scroll berechnete ich die Position des Videoelements in Bezug auf das Fenster, dann verwendet, um die aktuelle Zeit auf dem Video zu berechnen.

Anstatt jedoch setTimeout/setInterval zu verwenden, um die aktuelle Zeit des Videos zu aktualisieren, habe ich request animation frame verwendet. Request animation frame rendert das Video, wenn es möglich ist, anstatt setInterval zu verwenden, das auch dann ausgeführt wird, wenn der Browser nicht bereit ist.

Angewandt auf das obige Beispiel:

var renderLoop = function(){ 
    requestAnimationFrame(function(){ 
    vid.currentTime = window.pageYOffset/400; 
    renderLoop(); 
    }); 
}; 
renderLoop(); 

in all modern browsers except Opera Mini unterstützt.

Answer 5

Einige Mods von meinem Ende machen es glatter

// select video element 
var vid = document.getElementById('v0'); 
//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(); 
}; 

// refresh video frames on interval for smoother playback 
setInterval(function(){ 
    TweenMax.to(vid,2,{currentTime:window.pageYOffset/400}); 
}, 40); 

http://codepen.io/anon/pen/qORmee