在 Scroll 上播放视频

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