在滚动上播放视频

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?），但我怀疑是否有任何这些是您正在寻找。