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

在Scroll上播放视频

1 个答案: