माउस व्हील

Question

के साथ स्क्रॉल करके एचटीएमएल 5 वीडियो प्ले मैं एक वेब पेज बनाने में सक्षम होना चाहता हूं जो माउस व्हील ऊपर और नीचे स्क्रॉल करते समय वीडियो आगे और पीछे चलाता है। यह एचटीएमएल 5 और संभवतः जावास्क्रिप्ट के माध्यम से कल्पनाशील लगता है। इस तरह की चीज के लिए किसी भी प्रकार की दिशा सहायक होगी।

Answer 1

संभवतः इस

$(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

की तरह कुछ

हर समय वीडियो रोकें। नियमित अंतराल के साथ स्क्रॉल स्थिति प्राप्त करें और वीडियो को स्क्रॉल स्थिति की तलाश करें। किसी भी पेज लोडर प्रभाव का उपयोग करके वीडियो को पूरी तरह से बफर करने की अनुमति दी जाती है।

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

मैं इस का उपयोग कर रहा हूँ। यह सही नहीं है, लेकिन यह आपकी मदद करनी चाहिए।

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

मैं जानता हूँ कि यह एक पुराने सवाल है, लेकिन मैं दूसरे दिन यह भर में ठोकर खाई और the answer above मदद की मुझे एक छोटे से jQuery plugin इस प्रभाव को प्राप्त करने के लिए लिखें।

स्क्रॉल पर मैंने खिड़की के संबंध में वीडियो तत्व की स्थिति की गणना की, फिर वीडियो पर वर्तमान समय की गणना करने के लिए इसका उपयोग किया।

हालांकि वीडियो के वर्तमान समय को अपडेट करने के लिए सेटटाइमआउट/सेट इंटरवल का उपयोग करने के बजाय, मैंने request animation frame का उपयोग किया। अनुरोध एनीमेशन फ्रेम वीडियो को प्रस्तुत करेगा जब यह एक सेट इंटरवल का उपयोग करने के बजाय कर सकता है जो ब्राउज़र तैयार नहीं होने पर भी चलाएगा।

ऊपर के उदाहरण के लिए इस आवेदन:

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

समर्थित in all modern browsers except Opera Mini।

Answer 5

मेरी छोर से कुछ mods यह चिकनी बनाने के लिए

// 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