通過滾動鼠標滾輪來播放html5視頻

我希望能夠製作一個網頁，當它們隨着鼠標滾輪向上和向下滾動時，向前和向後播放視頻。似乎可以想象，通過HTML5和可能的JavaScript。任何類型的這種事情的方向將是有益的。通過滾動鼠標滾輪來播放html5視頻

2012-11-16 Mike Preble

你的意思是這樣[這]（http://a-class.mercedes-benz.com/nl/nl /）？ – avb

是的，確切地說。讓我看看我是否可以深入他們的代碼並使其適用於我。 –

不要讓上面的評論阻止人們的貢獻，我仍然需要一些幫助。網站上有很多代碼可以用來查找究竟是什麼使得這些東西起作用。 –

可能是這樣的

$(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(); 
});

來源

2012-11-16 15:44:39 homerjam

在任何時候暫停視頻。定期獲取滾動位置並使視頻搜索到滾動位置。儘管使用任何頁面加載器效果來讓視頻完全緩衝。

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);

來源

2014-05-31 17:03:10 Nav

嗨，我知道這是一個遠射，但我用我的答案爲我的一個項目，我想達到這個目的：http://stackoverflow.com/questions/26756362/html5-video-pause-while-滾動可能嗎？ – Mauro74

我用這個。這並不完美，但它應該可以幫助你。

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(); 
});

來源

2014-07-15 11:05:22

我知道這是一個老問題，但我碰到它偶然有一天，the answer above幫我寫一個小jQuery plugin來達到這種效果。

在滾動上，我計算了視頻元素相對於窗口的位置，然後用它來計算視頻上的當前時間。

但是，我用request animation frame，而不是使用setTimeout/setInterval更新視頻的當前時間。請求動畫幀會在可以播放視頻時顯示，而不是使用即使瀏覽器未準備好也會運行的setInterval。

將此應用於上面的例子：

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

支持 in all modern browsers except Opera Mini。

來源

2015-06-09 15:11:51

這真是太棒了，正是我希望能夠實現的，我的老闆從你在github上引用的同一頁面獲得靈感。謝謝 – HelloSpeakman

從我結束一些器官功能障礙綜合徵能讓它更順暢

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

來源

2015-09-30 09:10:31

通過滾動鼠標滾輪來播放html5視頻

回答

相關問題