在滾動上播放視頻

Question

我正在嘗試在滾動時播放視頻。無論如何，我實現了向前發揮，但是當我向後滾動時，視頻不向後播放，而是向前播放。

這裏是我的代碼：

//getting video element 
var v = $("#v"); 

// calling function on scroll 
$("#video-wrapper").on('mousewheel','#v',function(){ 
    var playVideoByScrollv = new PlayVideoByScrollv(v); 
}); 

var PlayVideoByScrollv = function(video,e){ 

    var evt=window.event || e //equalize event object 
    //delta returns +120 when wheel is scrolled up, -120 when scrolled down 
    var delta = evt.detail ? evt.detail*(-120) : evt.wheelDelta 

    if(delta<=-120){ 
     video.currentTime += (1/24); 
     video[0].play(); 
     setTimeout(function(){ 
      video[0].pause(); 
     },40); 
    } 
    else{ 
     video.currentTime -= (1/24); 
     video[0].play(); 
     setTimeout(function(){ 
      video[0].pause(); 
     },40); 
    } 

    if (evt.preventDefault) //disable default wheel action of scrolling page 
     evt.preventDefault() 
    else 
     return false 
} 

誰能告訴我我要去哪裏錯了？

Answer 1

我認爲你的代碼將當前時間設置爲將來的新時間（向前滾動時）和過去的新時間（向後滾動時）。在這兩種情況下，它都將開始正常播放視頻（即轉發）。

如果你想實際播放視頻，你可能會發現它是一個相當大的問題，因爲大多數編碼技術假設向前播放 - 例如，第9幀可以通過獲取第6幀並從第7幀添加一些信息和第8幀，然後第9幀的信息。

對於流式傳輸視頻來說，它更像是一個問題，因爲這些流幾乎都會被設置爲只能播放。

有一些方法（請參閱答案：Is it possible to play HTML5 video in reverse?），但我懷疑是否有任何這些是您正在尋找。